initial commit of gitara site

assets/views/audio/album.html

@@ -0,0 +1,140 @@
+{% extends "base.html" %}
+
+{% block title %}{{ album.title }}{% endblock title %}
+{% block crumb %}audio/{{ album.slug }}{% endblock crumb %}
+
+{% block content %}
+{% if logged_in_admin %}
+<header class="term-cmd">
+  <div>
+    <h1 class="term-title">{{ album.title }}</h1>
+    {% if album.artist %}
+    <p class="term-sub">// {{ t(key="album-by", lang=lang | default(value='sk')) }} {{ album.artist }}</p>
+    {% endif %}
+  </div>
+  <div class="term-cmd-actions">
+    {% if tracks | length > 0 %}
+    <button type="button" class="uw-play-album btn btn-primary btn-sm"
+      data-tracks-from="#uw-album-tracks">{{ t(key="album-play-full", lang=lang | default(value='sk')) }}</button>
+    {% endif %}
+    <a href="/audio/albums" class="btn btn-outline btn-sm">[ {{ t(key="cd-up", lang=lang | default(value='sk')) }} ]</a>
+  </div>
+</header>
+
+{% if album.cover_image_id %}
+<div class="card mb-6">
+  <div class="term-head">
+    <span class="term-head-name">~/audio/{{ album.slug }}/cover.png</span>
+  </div>
+  <div class="card-body">
+    <img src="/images/{{ album.cover_image_id }}" alt="">
+  </div>
+</div>
+{% endif %}
+
+{% if album.description %}
+<div class="card mb-6">
+  <div class="term-head">
+    <span class="term-head-name">~/audio/{{ album.slug }}/notes.txt</span>
+  </div>
+  <div class="card-body">
+    <p class="term-prose whitespace-pre-line">{{ album.description }}</p>
+  </div>
+</div>
+{% endif %}
+
+<div class="card">
+  <div class="term-head">
+    <span class="term-head-name">~/audio/{{ album.slug }}/tracklist</span>
+    <span class="term-head-meta term-tag is-green">{{ tracks | length }} tracks</span>
+  </div>
+  <div class="card-body" id="uw-album-tracks">
+    {% if tracks | length > 0 %}
+      <div class="term-track-bar">
+        <button type="button" class="uw-play-album btn btn-primary btn-sm"
+          data-tracks-from="#uw-album-tracks">{{ t(key="album-play-full", lang=lang | default(value='sk')) }}</button>
+        <span class="term-track-name t-dim">// {{ t(key="album-queue-all", lang=lang | default(value='sk')) }}</span>
+      </div>
+      {% for track in tracks %}
+      <div class="term-track">
+        <button type="button" class="uw-play btn btn-primary btn-sm"
+          data-src="/audio/tracks/{{ track.id }}/stream" data-title="{{ track.title }}">&#9654; play</button>
+        <span class="term-track-name">
+          <span class="t-dim">{% if track.track_number %}{{ track.track_number }}{% else %}-{% endif %}</span>
+          <span class="t-green">▸</span> {{ track.title }}
+        </span>
+      </div>
+      {% endfor %}
+    {% else %}
+      <p class="term-empty-cmd">{{ t(key="album-no-tracks", lang=lang | default(value='sk')) }}</p>
+    {% endif %}
+  </div>
+</div>
+{% else %}
+<header class="term-cmd">
+  <div>
+    <h1 class="term-title">{{ album.title }}</h1>
+    {% if album.artist %}
+    <p class="term-sub">{{ t(key="album-by", lang=lang | default(value='sk')) }} {{ album.artist }}</p>
+    {% endif %}
+  </div>
+  <div class="term-cmd-actions">
+    {% if tracks | length > 0 %}
+    <button type="button" class="uw-play-album btn btn-primary btn-sm"
+      data-tracks-from="#uw-album-tracks">{{ t(key="album-play-full", lang=lang | default(value='sk')) }}</button>
+    {% endif %}
+    <a href="/audio/albums" class="btn btn-outline btn-sm">[ {{ t(key="cd-up", lang=lang | default(value='sk')) }} ]</a>
+  </div>
+</header>
+
+{% if album.cover_image_id %}
+<div class="card mb-6">
+  <div class="term-head">
+    <span class="term-head-name">~/audio/{{ album.slug }}/cover.png</span>
+  </div>
+  <div class="card-body">
+    <img src="/images/{{ album.cover_image_id }}" alt="">
+  </div>
+</div>
+{% endif %}
+
+{% if album.description %}
+<div class="card mb-6">
+  <div class="term-head">
+    <span class="term-head-name">~/audio/{{ album.slug }}/notes.txt</span>
+  </div>
+  <div class="card-body">
+    <p class="term-prose whitespace-pre-line">{{ album.description }}</p>
+  </div>
+</div>
+{% endif %}
+
+<div class="card">
+  <div class="term-head">
+    <span class="term-head-name">~/audio/{{ album.slug }}/tracklist</span>
+    <span class="term-head-meta term-tag is-green">{{ tracks | length }} tracks</span>
+  </div>
+  <div class="card-body" id="uw-album-tracks">
+    {% if tracks | length > 0 %}
+      <div class="term-track-bar">
+        <button type="button" class="uw-play-album btn btn-primary btn-sm"
+          data-tracks-from="#uw-album-tracks">{{ t(key="album-play-full", lang=lang | default(value='sk')) }}</button>
+        <span class="term-track-name t-dim">// {{ t(key="album-queue-all", lang=lang | default(value='sk')) }}</span>
+      </div>
+      {% for track in tracks %}
+      <div class="term-track">
+        <button type="button" class="uw-play btn btn-primary btn-sm"
+          data-src="/audio/tracks/{{ track.id }}/stream" data-title="{{ track.title }}">{{ t(key="audio-play", lang=lang | default(value='sk')) }}</button>
+        <span class="term-track-name">
+          <span class="t-dim">{% if track.track_number %}{{ track.track_number }}{% else %}-{% endif %}</span>
+          <span class="t-green">▸</span> {{ track.title }}
+        </span>
+      </div>
+      {% endfor %}
+    {% else %}
+      <p class="term-empty-cmd">{{ t(key="album-no-tracks", lang=lang | default(value='sk')) }}</p>
+    {% endif %}
+  </div>
+</div>
+{% endif %}
+{% endblock content %}

assets/views/audio/albums.html

@@ -0,0 +1,96 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t(key="audio-title", lang=lang | default(value='sk')) }}{% endblock title %}
+{% block crumb %}audio{% endblock crumb %}
+
+{% block content %}
+{% if logged_in_admin %}
+<header class="term-cmd">
+  <div>
+    <h1 class="term-title">{{ t(key="audio-title", lang=lang | default(value='sk')) }}</h1>
+    <p class="term-sub">// {{ albums | length }} {{ t(key="audio-sub", lang=lang | default(value='sk')) }}</p>
+  </div>
+  <div class="term-cmd-actions">
+    <a href="/audio/tracks" class="btn btn-outline btn-sm">[ {{ t(key="audio-all-songs", lang=lang | default(value='sk')) }} ]</a>
+  </div>
+</header>
+
+{% if albums | length > 0 %}
+  <div class="term-grid">
+    {% for album in albums %}
+      <article class="card">
+        <div class="term-head">
+          <span class="term-head-name">~/audio/{{ album.slug }}/</span>
+          <span class="term-head-meta term-tag is-purple">{{ t(key="album", lang=lang | default(value='sk')) }}</span>
+        </div>
+        <div class="card-body">
+          {% if album.cover_image_id %}
+          <img src="/images/{{ album.cover_image_id }}" alt="" class="mb-3">
+          {% endif %}
+          <h2 class="card-title text-base">{{ album.title }}</h2>
+          {% if album.artist %}
+          <p class="text-sm t-aqua">{{ album.artist }}</p>
+          {% endif %}
+          {% if album.description %}
+          <p class="term-prose text-sm opacity-80">{{ album.description }}</p>
+          {% endif %}
+          <div class="flex flex-wrap gap-2 pt-2">
+            <button type="button" class="uw-play-album-remote btn btn-primary btn-sm"
+              data-album-tracks-url="/audio/albums/{{ album.slug }}/tracks">{{ t(key="audio-play", lang=lang | default(value='sk')) }}</button>
+            <a href="/audio/albums/{{ album.slug }}" class="btn btn-outline btn-sm">{{ t(key="audio-open", lang=lang | default(value='sk')) }}</a>
+          </div>
+        </div>
+      </article>
+    {% endfor %}
+  </div>
+{% else %}
+  <div class="term-empty">
+    <p class="font-medium">{{ t(key="audio-no-albums", lang=lang | default(value='sk')) }}</p>
+  </div>
+{% endif %}
+{% else %}
+<header class="term-cmd">
+  <div>
+    <h1 class="term-title">{{ t(key="audio-title", lang=lang | default(value='sk')) }}</h1>
+    <p class="term-sub">{{ albums | length }} {{ t(key="audio-sub", lang=lang | default(value='sk')) }}</p>
+  </div>
+  <div class="term-cmd-actions">
+    <a href="/audio/tracks" class="btn btn-outline btn-sm">[ {{ t(key="audio-all-songs", lang=lang | default(value='sk')) }} ]</a>
+  </div>
+</header>
+
+{% if albums | length > 0 %}
+  <div class="term-grid">
+    {% for album in albums %}
+      <article class="card">
+        <div class="term-head">
+          <span class="term-head-name">~/audio/{{ album.slug }}/</span>
+          <span class="term-head-meta term-tag is-purple">{{ t(key="album", lang=lang | default(value='sk')) }}</span>
+        </div>
+        <div class="card-body">
+          {% if album.cover_image_id %}
+          <img src="/images/{{ album.cover_image_id }}" alt="" class="mb-3">
+          {% endif %}
+          <h2 class="card-title text-base">{{ album.title }}</h2>
+          {% if album.artist %}
+          <p class="text-sm t-aqua">{{ album.artist }}</p>
+          {% endif %}
+          {% if album.description %}
+          <p class="term-prose text-sm opacity-80">{{ album.description }}</p>
+          {% endif %}
+          <div class="flex flex-wrap gap-2 pt-2">
+            <button type="button" class="uw-play-album-remote btn btn-primary btn-sm"
+              data-album-tracks-url="/audio/albums/{{ album.slug }}/tracks">{{ t(key="audio-play", lang=lang | default(value='sk')) }}</button>
+            <a href="/audio/albums/{{ album.slug }}" class="btn btn-outline btn-sm">{{ t(key="audio-open", lang=lang | default(value='sk')) }}</a>
+          </div>
+        </div>
+      </article>
+    {% endfor %}
+  </div>
+{% else %}
+  <div class="term-empty">
+    <p class="font-medium">{{ t(key="audio-no-albums", lang=lang | default(value='sk')) }}</p>
+  </div>
+{% endif %}
+{% endif %}
+{% endblock content %}

assets/views/audio/tracks.html

@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t(key="songs-title", lang=lang | default(value='sk')) }}{% endblock title %}
+{% block crumb %}audio/tracks{% endblock crumb %}
+
+{% block content %}
+{% if logged_in_admin %}
+<header class="term-cmd">
+  <div>
+    <h1 class="term-title">{{ t(key="songs-title", lang=lang | default(value='sk')) }}</h1>
+    <p class="term-sub">// {{ tracks | length }} {{ t(key="songs-sub", lang=lang | default(value='sk')) }}</p>
+  </div>
+  <div class="term-cmd-actions">
+    {% if tracks | length > 0 %}
+    <button type="button" class="uw-play-album btn btn-primary btn-sm"
+      data-tracks-from="#uw-songs-list">{{ t(key="songs-play-all", lang=lang | default(value='sk')) }}</button>
+    {% endif %}
+    <a href="/audio/albums" class="btn btn-outline btn-sm">[ {{ t(key="songs-albums", lang=lang | default(value='sk')) }} ]</a>
+  </div>
+</header>
+
+<div class="card">
+  <div class="term-head">
+    <span class="term-head-name">~/audio/playlist.m3u</span>
+    <span class="term-head-meta term-tag is-green">{{ tracks | length }} tracks</span>
+  </div>
+  <div class="card-body" id="uw-songs-list">
+    {% if tracks | length > 0 %}
+      {% for track in tracks %}
+      <div class="term-track">
+        <button type="button" class="uw-play btn btn-primary btn-sm"
+          data-src="/audio/tracks/{{ track.id }}/stream" data-title="{{ track.title }}">{{ t(key="audio-play", lang=lang | default(value='sk')) }}</button>
+        <span class="term-track-name"><span class="t-green">▸</span> {{ track.title }}</span>
+      </div>
+      {% endfor %}
+    {% else %}
+      <p class="term-empty-cmd">{{ t(key="songs-no-tracks", lang=lang | default(value='sk')) }}</p>
+    {% endif %}
+  </div>
+</div>
+{% else %}
+<header class="term-cmd">
+  <div>
+    <h1 class="term-title">{{ t(key="songs-title", lang=lang | default(value='sk')) }}</h1>
+    <p class="term-sub">{{ tracks | length }} {{ t(key="songs-sub", lang=lang | default(value='sk')) }}</p>
+  </div>
+  <div class="term-cmd-actions">
+    {% if tracks | length > 0 %}
+    <button type="button" class="uw-play-album btn btn-primary btn-sm"
+      data-tracks-from="#uw-songs-list">{{ t(key="songs-play-all", lang=lang | default(value='sk')) }}</button>
+    {% endif %}
+    <a href="/audio/albums" class="btn btn-outline btn-sm">[ {{ t(key="songs-albums", lang=lang | default(value='sk')) }} ]</a>
+  </div>
+</header>
+
+<div class="card">
+  <div class="term-head">
+    <span class="term-head-name">~/audio/playlist.m3u</span>
+    <span class="term-head-meta term-tag is-green">{{ tracks | length }} tracks</span>
+  </div>
+  <div class="card-body" id="uw-songs-list">
+    {% if tracks | length > 0 %}
+      {% for track in tracks %}
+      <div class="term-track">
+        <button type="button" class="uw-play btn btn-primary btn-sm"
+          data-src="/audio/tracks/{{ track.id }}/stream" data-title="{{ track.title }}">{{ t(key="audio-play", lang=lang | default(value='sk')) }}</button>
+        <span class="term-track-name">{{ track.title }}</span>
+      </div>
+      {% endfor %}
+    {% else %}
+      <p class="term-empty-cmd">{{ t(key="songs-no-tracks", lang=lang | default(value='sk')) }}</p>
+    {% endif %}
+  </div>
+</div>
+{% endif %}
+{% endblock content %}