initial commit of a basic working audio player

.gitignore

@@ -0,0 +1,29 @@
+### Project Specific
+# Files
+docker-compose.override.yml
+npm-debug.log
+yarn-error.log
+/storage/*.key
+
+# Directories
+/node_modules
+/public/hot
+/public/storage
+/vendor
+
+### Editor Specific
+# Files
+music-ditoforge.sublime-project
+music-ditoforge.sublime-workspace
+
+# Directories
+/.idea
+/.vscode
+
+### System Specific
+# Files
+.DS_Store
+Thumbs.db
+
+# Directories
+__MACOSX

mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/public/js/app.js": "/public/js/app.js",
+    "/public/css/app.css": "/public/css/app.css"
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.26",
+    "autoprefixer": "^10.4.1",
+    "laravel-mix": "^6.0.6",
+    "notiwind": "^1.2.4",
+    "postcss": "^8.4.5",
+    "postcss-import": "^12.0.1",
+    "tailwindcss": "^3.0.11",
+    "vue": "^3.2.26",
+    "vue-loader": "^16.8.3"
+  }
+}

public/css/app.css

@@ -0,0 +1,555 @@
+/*
+! tailwindcss v3.0.11 | MIT License | https://tailwindcss.com
+*//*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+Ensure the default browser behavior of the `hidden` attribute.
+*/
+
+[hidden] {
+  display: none;
+}
+*, ::before, ::after {
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+}
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.z-30 {
+  z-index: 30;
+}
+.z-20 {
+  z-index: 20;
+}
+.z-10 {
+  z-index: 10;
+}
+.col-span-1 {
+  grid-column: span 1 / span 1;
+}
+.mx-12 {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
+.ml-4 {
+  margin-left: 1rem;
+}
+.flex {
+  display: flex;
+}
+.grid {
+  display: grid;
+}
+.min-h-screen {
+  min-height: 100vh;
+}
+.w-full {
+  width: 100%;
+}
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.flex-row {
+  flex-direction: row;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-x-8 {
+  -moz-column-gap: 2rem;
+       column-gap: 2rem;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.p-8 {
+  padding: 2rem;
+}
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.font-sans {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+.font-bold {
+  font-weight: 700;
+}
+.font-light {
+  font-weight: 300;
+}
+.font-medium {
+  font-weight: 500;
+}
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Light.woff2') format("woff2");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-LightItalic.woff2') format("woff2");
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Regular.woff2') format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Italic.woff2') format("woff2");
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Medium.woff2') format("woff2");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Bold.woff2') format("woff2");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+

public/fonts/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

public/fonts/Roboto/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

public/index.php

@@ -0,0 +1,67 @@
+<?php
+$domain = 'https://music.ditoforge.test';
+?><!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <meta name="robots" content="index,follow">
+        <meta name="googlebot" content="index,follow">
+
+        <meta name="format-detection" content="telephone=no">
+        <meta http-equiv="x-dns-prefetch-control" content="off">
+
+        <meta name="google" content="notranslate">
+        <meta name="google" content="nositelinkssearchbox">
+
+        <meta name="rating" content="General">
+
+        <meta name="url" content="<?php echo $domain; ?>/">
+        <meta name="subject" content="your website's subject">
+        <meta name="description" content="A description of the page">
+
+        <title>Music</title>
+
+        <!-- Privacy -->
+        <meta name="twitter:dnt" content="on">
+
+        <!-- analytics -->
+        <!-- -->
+
+        <!-- Android web manifest file -->
+        <!-- <link href="<?php echo $domain; ?>/.webmanifest" rel="manifest"> -->
+
+        <!-- Files listing who was involved in this site and copyrights -->
+        <link href="<?php echo $domain; ?>/humans.txt" rel="author">
+        <link href="<?php echo $domain; ?>/copyright.html" rel="copyright">
+
+        <!-- Feeds -->
+        <!-- <link href="<?php echo $domain; ?>/feed.rss" type="application/rss+xml" title="RSS" rel="alternate"> -->
+        <!-- <link href="<?php echo $domain; ?>/feed.atom" type="application/atom+xml" title="Atom 0.3" rel="alternate"> -->
+
+        <!-- Favicon -->
+        <!-- <link href="/favicon.ico" rel="icon" sizes="16x16" type="image/icon"> -->
+        <!-- <link href="/favicon.svg" rel="icon" type="image/svg+xml"> -->
+        <!-- <link href="/favicon.png" rel="icon" sizes="192x192"> -->
+
+        <!-- Font preloads (should be done for each font file) -->
+        <link href="<?php echo $domain; ?>/fonts/Roboto/Roboto-Light.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+        <link href="<?php echo $domain; ?>/fonts/Roboto/Roboto-LightItalic.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+        <link href="<?php echo $domain; ?>/fonts/Roboto/Roboto-Regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+        <link href="<?php echo $domain; ?>/fonts/Roboto/Roboto-Italic.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+        <link href="<?php echo $domain; ?>/fonts/Roboto/Roboto-Medium.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+        <link href="<?php echo $domain; ?>/fonts/Roboto/Roboto-Bold.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+
+        <!-- CSS -->
+        <link href="<?php echo $domain; ?>/css/app.css" rel="stylesheet" media="screen">
+
+        <!-- JS -->
+        <script src="<?php echo $domain; ?>/js/app.js" defer></script>
+    </head>
+    <body class="font-sans antialiased">
+        <div id="app" class="flex items-center justify-center min-h-screen bg-gray-50">
+            <!-- -->
+        </div>
+    </body>
+</html>

resources/css/app.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import 'typography.css';

resources/css/typography.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Light.woff2') format("woff2");
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-LightItalic.woff2') format("woff2");
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Regular.woff2') format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Italic.woff2') format("woff2");
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Medium.woff2') format("woff2");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url('/fonts/Roboto/Roboto-Bold.woff2') format("woff2");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}

resources/js/App.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="radio grid grid-cols-2 gap-x-8 p-8">
+        <player
+          class="col-span-1 py-4 bg-green-400"
+          :currentSong="currentSong"
+          @start-next-song="startNextSong"
+          @start-prev-song="startPrevSong"
+        ></player>
+
+        <playlist
+          class="col-span-1 py-4 px-6 bg-blue-400"
+          :playlistSongs="playlistSongs"
+          @start-song="startSong"
+        ></playlist>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from "vue"
+import Player from "./Components/Player.vue"
+import Playlist from "./Components/Playlist.vue"
+
+export default defineComponent({
+  emits: [],
+
+  props: {},
+
+  components: {
+    Player,
+    Playlist,
+  },
+
+  setup(props, {emit}) {
+    let currentSong = {
+      title: 'Childhood Memories',
+      artist: 'mell-ø x Ambulo',
+      album: 'Afloat Again EP',
+      release_date: '2020',
+      cover_art_url: 'https://music.ditoforge.test/images/mell-ø - Afloat Again EP (2020).webp',
+      file_url: 'https://music.ditoforge.test/storage/music/mell-ø - Childhood Memories.mp3',
+    }
+
+    let playlistSongs = [currentSong, currentSong, currentSong]
+
+    return { currentSong, playlistSongs }
+  },
+
+  beforeMount() {},
+
+  mounted() {},
+
+  data() {
+    return {}
+  },
+
+  computed: {},
+
+  methods: {
+    startNextSong() {
+console.log('App: starting the next song...')
+    },
+
+    startPrevSong() {
+console.log('App: starting the previous song...')
+    },
+
+    startSong(song) {
+console.log('App: starting an arbitrary song...')
+console.log("App: here's the song:", song)
+    },
+  },
+})
+</script>
+
+<style scoped>
+.radio {
+    min-width: 1024px;
+    max-width: 1128px;
+    width: 100%;
+}
+</style>

resources/js/Components/Player.vue

@@ -0,0 +1,269 @@
+<template>
+    <div class="player__container flex flex-col">
+        <div class="cover-art__container flex justify-center rounded-lg">
+            <img :src="currentSong.cover_art_url" :alt="currentSong.album" height="64" width="64" class="shadow rounded-lg">
+        </div>
+
+        <div class="song-info flex flex-col items-center justify-center">
+            <div class="song-info_title font-bold text-2xl">{{ currentSong.title }}</div>
+            <div class="song-info_artist text-xl">{{ currentSong.artist }}</div>
+        </div>
+
+        <div class="controls">
+            <button type="button" @click="changeToPrevSong()">
+                <svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="">
+                    <polygon points="19 20 9 12 19 4 19 20"></polygon>
+                    <line x1="5" y1="19" x2="5" y2="5"></line>
+                </svg>
+            </button>
+            <button type="button" v-show="!isPlaying" @click="startPlaying">
+                <svg viewBox="0 0 24 24" width="48" height="48" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="">
+                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                </svg>
+            </button>
+            <button type="button" v-show="isPlaying" @click="pausePlaying">
+                <svg viewBox="0 0 24 24" width="48" height="48" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="">
+                    <rect x="6" y="4" width="4" height="16"></rect>
+                    <rect x="14" y="4" width="4" height="16"></rect>
+                </svg>
+            </button>
+            <button type="button" @click="changeToNextSong()">
+                <svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="">
+                    <polygon points="5 4 15 12 5 20 5 4"></polygon>
+                    <line x1="19" y1="5" x2="19" y2="19"></line>
+                </svg>
+            </button>
+        </div>
+
+        <div class="progress__container flex flex-col mx-12">
+            <div class="flex flex-row items-center justify-between">
+                <div class="font-light">{{ timeElapsed }}</div>
+                <div class="font-light">{{ songLength }}</div>
+            </div>
+            <div class="progress-bars flex relative" ref="progressBars">
+                <progress class="progress-played absolute z-30  w-full" min="0" :max="duration" :value="audioPlayer.currentTime"></progress>
+                <progress class="progress-seeking absolute z-20  w-full" min="0" :max="duration" :value="seekingTime" ref="seekingBar"></progress>
+                <progress class="progress-buffered absolute z-10  w-full" min="0" :max="duration" :value="bufferedTime"></progress>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue"
+
+export default defineComponent({
+  emits: [
+    'startNextSong',
+    'startPrevSong',
+  ],
+
+  props: {
+    currentSong: Object,
+  },
+
+  components: {},
+
+  setup(props) {
+    let audioPlayer = new Audio(props.currentSong.file_url)
+    let duration = ref(0)
+    let bufferedTime = ref(0)
+    let currentTime = ref(0)
+    let seekingTime = ref(0)
+    let canPlaying = ref(false)
+    let isPlaying = ref(false)
+
+    return {
+      audioPlayer,
+      duration,
+      bufferedTime,
+      currentTime,
+      seekingTime,
+      canPlaying,
+      isPlaying,
+    }
+  },
+
+  beforeMount() {},
+
+  mounted() {
+    this.audioPlayer.addEventListener("loadedmetadata", event => {
+      this.duration = event.path[0].duration
+    })
+
+    this.audioPlayer.addEventListener("canplay", event => {
+      this.canPlay = true
+    })
+
+    this.audioPlayer.addEventListener("canplaythrough", event => {
+      this.canPlay = true
+      this.bufferedTime = this.duration
+    })
+
+    this.audioPlayer.addEventListener("loadeddata", event => {
+      this.bufferedTime = event.path[0].buffered.end(0)
+    })
+
+    this.audioPlayer.addEventListener("progress", event => {
+      if (this.duration > 0) {
+        for (let i = 0; i < this.audioPlayer.buffered.length; i++) {
+          if (this.audioPlayer.buffered.start(this.audioPlayer.buffered.length - 1 - i) < this.currentTime) {
+console.log(this.audioPlayer.buffered.end(this.audioPlayer.buffered.length - 1 - i) / this.duration)
+          }
+        }
+      }
+    })
+
+    this.audioPlayer.addEventListener("timeupdate", event => {
+      this.currentTime = event.path[0].currentTime
+    })
+
+    /*this.audioPlayer.addEventListener("seeking", event => {
+      //
+    })
+
+    this.audioPlayer.addEventListener("seeked", event => {
+      //
+    })*/
+
+    this.$refs.progressBars.addEventListener("mousemove", event => {
+      this.$refs.seekingBar.value = this.duration * (event.layerX / event.path[0].clientWidth)
+    })
+
+    this.$refs.progressBars.addEventListener("mousedown", event => {
+      let newCurrentTime = this.duration * (event.layerX / event.path[0].clientWidth)
+      this.pausePlaying()
+      this.audioPlayer.currentTime = newCurrentTime
+      this.currentTime = newCurrentTime
+      this.startPlaying()
+    })
+
+    //this.audioPlayer.addEventListener("complete", this.changeToNextSong())
+
+    //this.audioPlayer.addEventListener("ended", this.changeToNextSong())
+  },
+
+  data() {
+    return {}
+  },
+
+  computed: {
+    timeElapsed() {
+      return this.secondsToHuman(this.currentTime)
+    },
+
+    songLength() {
+      return this.secondsToHuman(this.duration)
+    },
+  },
+
+  methods: {
+    startPlaying() {
+      this.isPlaying = true
+      this.audioPlayer.play()
+    },
+
+    pausePlaying() {
+      this.isPlaying = false
+      this.audioPlayer.pause()
+    },
+
+    changeToNextSong() {
+console.log('Player: starting the next song...')
+      this.$emit('startNextSong')
+    },
+
+    changeToPrevSong() {
+console.log('Player: starting the previous song...')
+      this.$emit('startPrevSong')
+    },
+
+    // helpers
+
+    secondsToHuman(lengthInSeconds) {
+      lengthInSeconds = Number.parseInt(lengthInSeconds)
+      let minutes = Number.parseInt(lengthInSeconds / 60)
+      let seconds = Number.parseInt(lengthInSeconds - Number.parseInt(minutes * 60))
+      if (seconds < 10) {
+        seconds = "0" + seconds
+      }
+      return minutes + ":" + seconds
+    },
+  },
+})
+</script>
+
+<style scoped>
+.player__container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, min-content);
+    gap: 2em 0em;
+    grid-template-areas:
+        "."
+        "."
+        "."
+        ".";
+}
+
+.cover-art__container img {
+    height: 256px;
+    width: 256px;
+}
+
+.controls {
+    align-items: center;
+    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(3, min-content);
+    grid-template-rows: 1fr;
+    gap: 0em 4em;
+    grid-template-areas: ". . .";
+}
+
+progress.progress-played,
+progress.progress-seeking,
+progress.progress-buffered {
+    height: 24px;
+}
+
+progress.progress-played::-webkit-progress-bar,
+progress.progress-seeking::-webkit-progress-bar,
+progress.progress-buffered::-webkit-progress-bar,
+progress.progress-played::-webkit-progress-value,
+progress.progress-seeking::-webkit-progress-value,
+progress.progress-buffered::-webkit-progress-value {
+    border-radius: 0.75em;
+}
+
+progress.progress-played::-webkit-progress-bar,
+progress.progress-seeking::-webkit-progress-bar,
+progress.progress-buffered::-webkit-progress-bar {
+    padding: 0.25em;
+}
+
+progress.progress-played::-webkit-progress-bar {
+    background: transparent;
+}
+
+progress.progress-seeking::-webkit-progress-bar {
+    background: transparent;
+}
+
+progress.progress-buffered::-webkit-progress-bar {
+    background-color: #ffffff;
+}
+
+progress.progress-played::-webkit-progress-value {
+    background-color: #00ff00;
+    min-width: 15px;
+}
+
+progress.progress-seeking::-webkit-progress-value {
+    background-color: rgba(255, 0, 0, 0.5);
+}
+
+progress.progress-buffered::-webkit-progress-value {
+    background-color: rgba(0, 128, 64, 0.25);
+}
+</style>

resources/js/Components/Playlist.vue

@@ -0,0 +1,70 @@
+<template>
+    <aside>
+        <header>
+            <h3 class="text-gray-600 font-medium">Previous song</h3>
+            <playlist-card class="mt-4" :song="previousSong"></playlist-card>
+        </header>
+
+        <div class="playlist">
+            <h3 class="text-gray-600 font-medium">Up next</h3>
+            <div class="playlist-list_container mt-4">
+                <playlist-card v-for="song in nextSongs" :key="song.id" :song="song" @click="startSong(song)"></playlist-card>
+            </div>
+        </div>
+    </aside>
+</template>
+
+<script>
+import { defineComponent } from "vue"
+import PlaylistCard from "./PlaylistCard.vue"
+
+export default defineComponent({
+  emits: [
+    'startSong'
+  ],
+
+  props: {
+    playlistSongs: Array,
+  },
+
+  components: {
+    PlaylistCard,
+  },
+
+  setup(props, {emit}) {
+    let previousSong = {}
+
+    return { previousSong }
+  },
+
+  beforeMount() {},
+
+  mounted() {},
+
+  data() {
+    return {}
+  },
+
+  computed: {
+    nextSongs() {
+      return this.playlistSongs.slice(0, 4)
+    },
+  },
+
+  methods: {
+    startSong(song) {
+console.log('Playlist: starting an arbitrary song...')
+      this.$emit('startSong', song)
+    },
+  },
+})
+</script>
+
+<style scoped>
+.playlist-list_container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, min-content);
+    gap: 2em 0em;
+}
+</style>

resources/js/Components/PlaylistCard.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="card flex flex-row items-center">
+        <div class="cover-art object-cover">
+            <img :src="song.cover_art_url" :alt="song.album" height="64" width="64">
+        </div>
+        <div class="flex flex-col ml-4">
+            <div class="font-bold">{{ song.title }}</div>
+            <div class="font-md">{{ song.artist }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  emits: [],
+
+  props: {
+    song: Object,
+  },
+
+  components: {},
+
+  setup(props, {emit}) {
+    return {}
+  },
+
+  beforeMount() {},
+
+  mounted() {},
+
+  data() {
+    return {}
+  },
+
+  computed: {},
+
+  methods: {},
+})
+</script>
+
+<style scoped>
+.cover-art {
+    height: 64px;
+    width: 64px;
+}
+</style>

resources/js/app.js

@@ -0,0 +1,10 @@
+window.Vue = require("vue");
+
+import Notifications from "notiwind";
+import App from "./App.vue";
+
+const app = Vue.createApp(App);
+app.use(Notifications);
+
+//const el = document.getElementById("app");
+const vm = app.mount("div#app");

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  content: [
+    "./public/index.php",
+    "./resources/**/*.js",
+    "./resources/**/*.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

webpack.config.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+    resolve: {
+        alias: {
+            '@': path.resolve('resources/js'),
+        },
+    },
+};

webpack.mix.js

@@ -0,0 +1,23 @@
+const mix = require('laravel-mix');
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel applications. By default, we are compiling the CSS
+ | file for the application as well as bundling up all the JS files.
+ |
+ */
+
+mix.js('resources/js/app.js', 'public/js').vue()
+    .postCss('resources/css/app.css', 'public/css', [
+        require('postcss-import'),
+        require('tailwindcss'),
+    ])
+    .webpackConfig(require('./webpack.config'));
+
+if (mix.inProduction()) {
+    mix.version();
+}