feat: Initial commit

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,35 @@
+name: Build and deploy
+
+on:
+  push:
+    branches: main
+  repository_dispatch:
+    types: [jekyll-build]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Build
+      uses: docker://jekyll/jekyll
+      with:
+        entrypoint: bash
+        args:  -c "/usr/local/bin/bundle install && /usr/local/bin/bundle exec jekyll build --incremental"
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Deploy
+      run: |
+        sudo chown -R $(whoami):$(whoami) .
+        git config --global user.email "[email protected]"
+        git config --global user.name "$GITHUB_ACTOR"
+        cp -r _site /tmp
+        cd /tmp/_site
+        git init
+        git branch -M gh-pages
+        git add .
+        git commit -m "Deploy Jekyll to GitHub Pages"
+        git remote add origin "https://$GITHUB_ACTOR:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY"
+        git push -f origin gh-pages

.gitignore

@@ -0,0 +1,6 @@
+_site
+.sass-cache
+.jekyll-cache
+.jekyll-metadata
+vendor
+Gemfile.lock

Gemfile

@@ -0,0 +1,10 @@
+source 'https://rubygems.org'
+
+group :jekyll_plugins do
+  gem 'jekyll', '~> 3.9.3'
+  gem 'webrick', '~> 1.8', '>= 1.8.1'
+  gem 'kramdown-parser-gfm', '~> 1.1.0'
+  gem 'jekyll-optional-front-matter', '~> 0.3.2'
+  gem 'cssminify2', '~> 2.0', '>= 2.0.1'
+  gem 'uglifier', '~> 4.2'
+end

_config.yml

@@ -0,0 +1,16 @@
+title: xmp3
+description: Listen and download music
+
+github:
+  username: xmp3
+  data:
+    repository: data
+    branch: main
+  collections:
+    repository: xmp3
+    branch: main
+
+defaults:
+  -
+    values:
+      layout: default

_includes/components/progressbar.html

@@ -0,0 +1,16 @@
+<div
+  {% if include.id %}id="{{ include.id }}"{% endif %}
+  {% if include.min %}data-min="{{ include.min }}"{% endif %}
+  {% if include.max %}data-max="{{ include.max }}"{% endif %}
+  {% if include.step %}data-step="{{ include.step }}"{% endif %}
+  {% if include.value %}data-value="{{ include.value }}"{% endif %}
+  class="progressbar-container{% if include.extra_class %} {{ include.extra_class }}{% endif %}"
+  style="--progressbar-transform: {% if include.value and include.max %}{{ include.value | divided_by: include.max | times: 100 }}{% else %}0%;{% endif %} --progressbar-duration: 1000ms;"
+>
+  <div class="progressbar-background">
+    <div class="progressbar-filled-container">
+      <div class="progressbar-filled"></div>
+    </div>
+    <div class="progressbar-thumb" tabindex="0"></div>
+  </div>
+</div>

_includes/icons/collections.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 24 24"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M14.5 2.134a1 1 0 0 1 1 0l6 3.464a1 1 0 0 1 .5.866V21a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V3a1 1 0 0 1 .5-.866zM16 4.732V20h4V7.041l-4-2.309zM3 22a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1zm6 0a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1z"></path></svg>

_includes/icons/crotchet.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M10 2v9.5a2.75 2.75 0 1 1-2.75-2.75H8.5V2H10zm-1.5 8.25H7.25A1.25 1.25 0 1 0 8.5 11.5v-1.25z"></path></svg>

_includes/icons/download.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M4.995 8.745a.75.75 0 0 1 1.06 0L7.25 9.939V4a.75.75 0 0 1 1.5 0v5.94l1.195-1.195a.75.75 0 1 1 1.06 1.06L8 12.811l-.528-.528a.945.945 0 0 1-.005-.005L4.995 9.805a.75.75 0 0 1 0-1.06z"></path><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z"></path></svg>

_includes/icons/next.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M12.7 1a.7.7 0 0 0-.7.7v5.15L2.05 1.107A.7.7 0 0 0 1 1.712v12.575a.7.7 0 0 0 1.05.607L12 9.149V14.3a.7.7 0 0 0 .7.7h1.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-1.6z"></path></svg>

_includes/icons/play.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"></path></svg>

_includes/icons/previous.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M3.3 1a.7.7 0 0 1 .7.7v5.15l9.95-5.744a.7.7 0 0 1 1.05.606v12.575a.7.7 0 0 1-1.05.607L4 9.149V14.3a.7.7 0 0 1-.7.7H1.7a.7.7 0 0 1-.7-.7V1.7a.7.7 0 0 1 .7-.7h1.6z"></path></svg>

_includes/icons/quaver.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 24 24"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M6 3h15v15.167a3.5 3.5 0 1 1-3.5-3.5H19V5H8v13.167a3.5 3.5 0 1 1-3.5-3.5H6V3zm0 13.667H4.5a1.5 1.5 0 1 0 1.5 1.5v-1.5zm13 0h-1.5a1.5 1.5 0 1 0 1.5 1.5v-1.5z"></path></svg>

_includes/icons/sound.html

@@ -0,0 +1,6 @@
+<svg
+viewBox="0 0 16 16"
+{% if include.id %}id="{{ include.id }}"{% endif %}
+{% if include.class %}class="{{ include.class }}"{% endif %}
+{% if include.style %}style="{{ include.style }}"{% endif %}
+><path d="M9.741.85a.75.75 0 0 1 .375.65v13a.75.75 0 0 1-1.125.65l-6.925-4a3.642 3.642 0 0 1-1.33-4.967 3.639 3.639 0 0 1 1.33-1.332l6.925-4a.75.75 0 0 1 .75 0zm-6.924 5.3a2.139 2.139 0 0 0 0 3.7l5.8 3.35V2.8l-5.8 3.35zm8.683 4.29V5.56a2.75 2.75 0 0 1 0 4.88z"></path><path d="M11.5 13.614a5.752 5.752 0 0 0 0-11.228v1.55a4.252 4.252 0 0 1 0 8.127v1.55z"></path></svg>

_includes/styles/global.css.html

@@ -0,0 +1,105 @@
+<style type="text/tailwindcss">
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer base {
+    body {
+      @apply bg-black;
+    }
+    h5 {
+      @apply text-xl;
+    }
+    h6 {
+      @apply text-lg;
+    }
+  }
+
+  @layer components {
+    .btn {
+      @apply flex items-center justify-center text-center text-white;
+    }
+    .listitem {
+      @apply relative flex items-center px-6 py-3;
+    }
+    .fallback-image-img {
+      @apply absolute hidden w-full h-full object-cover object-center z-10;
+    }
+    .fallback-image-icon {
+      @apply absolute top-[35%] left-[35%] w-[31.22%] h-[31.22%] z-0;
+    }
+  }
+
+  @layer utilities {
+    .primary {
+      @apply text-white;
+    }
+    .secondary {
+      @apply text-white text-opacity-60;
+    }
+  }
+
+  :root {
+    color-scheme: dark;
+  }
+
+  * {
+    outline: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    font-size: 1rem;
+    line-height: 1.25rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  img {
+    user-select: none;
+    pointer-events: none;
+  }
+
+  svg {
+    fill: currentcolor;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  button {
+    all: unset;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /*
+  Extra small devices (phones, 640px and down)
+  @media only screen and (max-width: 640px) {}
+  */
+
+  /*
+  Small devices (phones, 640px and up)
+  @media only screen and (min-width: 640px) {}
+  */
+
+  /*
+  Medium devices (portrait tablets and large phones, 768px and up)
+  @media only screen and (min-width: 768px) {}
+  */
+
+  /*
+  Large devices (landscape tablets, 1024px and up)
+  @media only screen and (min-width: 1024px) {}
+  */
+
+  /*
+  Extra large devices (laptops/desktops, 1280px and up)
+  @media only screen and (min-width: 1280px) {}
+  */
+
+  /*
+  Double extra large devices (large laptops and desktops, 1536px and up)
+  @media only screen and (min-width: 1536px) {}
+  */
+</style>

_includes/styles/player.css.html

@@ -0,0 +1,6 @@
+<style>
+  .listitem[data-selected="true"] .equaliser {
+    display: block;
+    margin-right: .5rem;
+  }
+</style>

_includes/styles/progressbar.css.html

@@ -0,0 +1,56 @@
+<style>
+  .progressbar-container {
+    width: 100%;
+    height: 20px;
+    cursor: pointer;
+    position: relative;
+    --fg-color: rgb(255,255,255);
+    --bg-color: rgba(255,255,255,.2);
+    --progressbar-height: 4px;
+    --progressbar-transform: 0%;
+    --progressbar-radius: calc(var(--progressbar-height) / 2);
+  }
+  .progressbar-background,
+  .progressbar-filled-container {
+    width: 100%;
+    height: var(--progressbar-height);
+    border-radius: var(--progressbar-radius);
+  }
+  .progressbar-background {
+    top: 50%;
+    position: absolute;
+    display: flex;
+    display: -ms-flexbox;
+    pointer-events: none;
+    transform: translateY(-50%);
+    background-color: var(--bg-color);
+  }
+  .progressbar-filled-container {
+    overflow: hidden;
+  }
+  .progressbar-filled {
+    width: 100%;
+    height: var(--progressbar-height);
+    will-change: transform;
+    transform: translateX(calc(var(--progressbar-transform) - 100%));
+    border-radius: var(--progressbar-radius);
+    background-color: var(--fg-color);
+  }
+  .progressbar-thumb {
+    top: 50%;
+    left: var(--progressbar-transform);
+    position: absolute;
+    will-change: left;
+    z-index: 100;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    margin-left: -6px;
+    border-radius: 50%;
+    transform: translateY(-50%);
+    background-color: transparent;
+  }
+  .progressbar-container:hover .progressbar-thumb {
+    background-color: var(--fg-color);
+  }
+</style>

_includes/templates/collection.html

@@ -0,0 +1,18 @@
+{% assign data = page.username | append: ',' | append: page.filename %}
+{% assign collection = data | get_collection %}
+
+{% for track in collection %}
+<a href="#{{ forloop.index }}" class="listitem" data-selected="false" data-title="{{ track.title }}" data-artist="{{ track.artist }}" data-cover="{{ track.cover }}" data-file="{{ track.file }}">
+  <div class="absolute size-10 bg-white bg-opacity-10">
+    <img loading="eager" src="{% if track.cover contains 'https' %}{{ track.cover }}{% else %}https://xmp3.github.io/image/{{ track.cover }}{% endif %}" alt="{{ track.title }} cover" class="fallback-image-img" width="100%" height="100%" onerror="this.style.display='none';" onload="this.style.display='block';">
+    {% include icons/crotchet.html class="fallback-image-icon" %}
+  </div>
+  <div class="pl-14 w-full">
+    <div class="flex items-center">
+      <img src="/assets/img/equaliser-animated.gif" class="hidden equaliser" width="14" height="14" alt="">
+      <div class="truncate primary">{{ track.title }}</div>
+    </div>
+    <div class="truncate secondary">{{ track.artist }}</div>
+  </div>
+</a>
+{% endfor %}

_includes/templates/player.html

@@ -0,0 +1,49 @@
+<div class="flex flex-col justify-between min-h-12 mb-12">
+  <div class="flex items-center justify-center p-6 pb-0">
+    <figure class="w-full h-full m-0">
+      <div class="relative w-full h-full min-w-80 mx-auto aspect-square rounded-lg bg-white bg-opacity-10">
+        <img id="track-cover" class="hidden fallback-image-img rounded-lg" width="100%" height="100%" crossorigin="anonymous" onerror="this.style.display='none';" onload="this.style.display='block';" alt="Cover">
+        {% include icons/quaver.html class="fallback-image-icon" %}
+      </div>
+      <figcaption class="min-h-24 mt-8 pb-4 content-end">
+        <h5 id="track-title">Title</h5>
+        <span id="track-artist" class="secondary">Artist</span>
+      </figcaption>
+    </figure>
+  </div>
+  <div class="flex flex-col gap-4 px-6">
+    <div>
+      {% include components/progressbar.html id="seekbar" %}
+      <div class="flex items-center justify-between select-none">
+        <span id="current-duration" class="text-sm secondary">00:00</span>
+        <span id="total-duration" class="text-sm secondary">00:00</span>
+      </div>
+    </div>
+    <div class="flex items-center justify-between">
+      <a href="/{{ page.username }}" class="btn size-10" aria-label="View all collections">
+        {% include icons/collections.html class="w-6 h-6" %}
+      </a>
+      <button id="previous" class="btn size-10" aria-label="Previous track">
+        {% include icons/previous.html class="w-6 h-6" %}
+      </button>
+      <button id="play-pause" class="btn size-14 rounded-full bg-white text-black" aria-label="Play/Pause track">
+        {% include icons/play.html class="w-5 h-5" %}
+      </button>
+      <button id="next" class="btn size-10" aria-label="Next track">
+        {% include icons/next.html class="w-6 h-6" %}
+      </button>
+      <a id="download" class="btn size-10" aria-label="Download track">
+        {% include icons/download.html class="w-6 h-6" %}
+      </a>
+    </div>
+    <div class="flex items-center flex-1 gap-1">
+      <button id="volume" class="btn size-10" aria-label="Toggle sound/mute">
+        {% include icons/sound.html class="w-5 h-5" %}
+      </button>
+      {% include components/progressbar.html id="volume-control" class="flex-1" min="0" max="100" step="1" %}
+    </div>
+  </div>
+</div>
+<nav>
+{% include templates/collection.html %}
+</nav>