Skip to content

Commit

Permalink
fix: audio player layout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@danjac
danjac committed Aug 29, 2024
1 parent 5909821 commit 7e960d9
Showing 1 changed file with 103 additions and 108 deletions.
211 changes: 103 additions & 108 deletions templates/episodes/_audio_player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,118 +3,113 @@
{% if episode and is_playing %}
{% get_media_metadata episode as metadata %}
{{ metadata|json_script:"audioplayer-metadata" }}
<div class="h-40 sm:h-28" {# djlint:off #} x-data="
audioPlayer(
csrfToken='{{ csrf_token }}',
currentTime={{ current_time|default:0 }},
metadataTag='audioplayer-metadata',
startPlayer={{ start_player|yesno:" true,false" }},
timeUpdateUrl='{% url "episodes:player_time_update" %}' , )" {# djlint:on #} @keydown.window="shortcuts">
<audio x-ref="audio"
preload="auto"
@loadedmetadata="loaded"
@ended="ended"
@timeupdate="timeUpdate"
@play="play"
@pause="pause"
@error.prevent="error">
<source src="{{ episode.media_url }}" type="{{ episode.media_type }}">
</audio>
<div class="fixed bottom-0 p-2 w-full font-semibold text-white bg-gradient-to-b from-violet-900 to-black opacity-100 duration-1000 ease-in-out transform translate-y-0 htmx-added:opacity-0 htmx-added:translate-y-24">
<div class="items-center space-y-2 w-full divide-y divide-gray-300 divide-solid sm:flex sm:space-y-0 sm:divide-y-0 sm:divide-x dark:divide-gray-600">
<div class="sm:w-1/2">
<div class="flex items-center space-x-3 cursor-pointer sm:pr-2 group"
role="link"
tabindex="0"
hx-get="{{ episode.get_absolute_url }}"
hx-push-url="true">
{% cover_image episode.get_cover_url "card" episode.cleaned_title
css_class="group-hover:opacity-75" %}
<div class="flex flex-col place-content-between h-16">
<h2 class="font-bold leading-tight break-words group-hover:text-blue-300 line-clamp-2"
aria-label="{{ episode.cleaned_title }}"
title="{{ episode.cleaned_title }}">
{{
episode.cleaned_title }}
</h2>
{% with podcast=episode.podcast %}
<h3 class="text-sm font-semibold leading-tight group-hover:text-blue-300 line-clamp-1"
aria-label="{{ podcast.cleaned_title }}"
title="{{ podcast.cleaned_title }}">
{{
podcast.cleaned_title }}
</h3>
{% endwith %}
</div>
</div>
</div>
<div class="flex flex-col place-content-end pt-3 sm:pt-0 sm:pl-2 sm:w-1/2">
<div class="grid grid-cols-3 place-content-between h-12"
:class="!isLoaded ? 'animate-pulse': ''">
<div x-text="counters.current"
aria-label="Current Time"
title="Current Time"
class="flex justify-start items-center font-mono text-sm"
:class="{'text-gray-300': !isPlaying}"></div>
{% with BUTTON_CSS="focus:outline-none hover:text-blue-300 inline-block" INACTIVE_CSS="opacity-75 cursor-not-allowed pointer-events-none" %}
<div class="flex justify-center items-center space-x-6">
<button aria-label="Skip Back 10 Seconds"
title="Skip Back 10 Seconds"
class="{{ BUTTON_CSS }}"
x-cloak
@click="skipBack"
:class="isPlaying || '{{ INACTIVE_CSS }}'">
{% heroicon_outline "backward" size=30 %}
</button>
<button aria-label="Play"
:title="isLoaded ? 'Play' : 'Loading...'"
class="{{ BUTTON_CSS }}"
x-cloak
:class="isLoaded || '{{ INACTIVE_CSS }}'"
@click="togglePlayPause"
x-show="!isPlaying">{% heroicon_outline "play-circle" size=36 %}</button>
<button aria-label="Pause"
title="Pause"
class="{{ BUTTON_CSS }}"
x-cloak
@click="togglePlayPause"
x-show="isPlaying">
{% heroicon_outline "pause-circle" size=36
%}
</button>
<button aria-label="Skip Forward 10 Seconds"
title="Skip Forward 10 Seconds"
class="{{ BUTTON_CSS }}"
x-cloak
@click="skipForward"
:class="isPlaying || '{{ INACTIVE_CSS }}'">
{% heroicon_outline "forward" size=30 %}
</button>
<div class="h-40 sm:h-28"
{# djlint:off #}
x-data="
audioPlayer(
csrfToken='{{ csrf_token }}',
currentTime={{ current_time|default:0 }},
metadataTag='audioplayer-metadata',
startPlayer={{ start_player|yesno:" true,false" }},
timeUpdateUrl='{% url "episodes:player_time_update" %}',
)"
{# djlint:on #}
@keydown.window="shortcuts">
<audio x-ref="audio"
preload="auto"
@loadedmetadata="loaded"
@ended="ended"
@timeupdate="timeUpdate"
@play="play"
@pause="pause"
@error.prevent="error">
<source src="{{ episode.media_url }}" type="{{ episode.media_type }}">
</audio>
<div class="fixed bottom-0 p-2 w-full font-semibold text-white bg-gradient-to-b from-violet-900 to-black opacity-100 duration-1000 ease-in-out transform translate-y-0 htmx-added:opacity-0 htmx-added:translate-y-24">
<div class="items-center space-y-2 w-full divide-y divide-gray-300 divide-solid sm:flex sm:space-y-0 sm:divide-y-0 sm:divide-x dark:divide-gray-600">
<div class="sm:w-1/2">
<div class="flex items-center space-x-3 cursor-pointer sm:pr-2 group"
role="link"
tabindex="0"
hx-get="{{ episode.get_absolute_url }}"
hx-push-url="true">
{% cover_image episode.get_cover_url "card" episode.cleaned_title css_class="group-hover:opacity-75" %}
<div class="flex flex-col place-content-between h-16">
<h2 class="font-bold leading-tight break-words group-hover:text-blue-300 line-clamp-2"
aria-label="{{ episode.cleaned_title }}"
title="{{ episode.cleaned_title }}">{{ episode.cleaned_title }}</h2>
{% with podcast=episode.podcast %}
<h3 class="text-sm font-semibold leading-tight group-hover:text-blue-300 line-clamp-1"
aria-label="{{ podcast.cleaned_title }}"
title="{{ podcast.cleaned_title }}">{{ podcast.cleaned_title }}</h3>
{% endwith %}
</div>
{% endwith %}
<div x-text="counters.remaining"
aria-label="Time Remaining"
title="Time Remaining"
class="flex justify-end items-center font-mono text-sm"
:class="{'text-gray-300': !isPlaying}"></div>
</div>
</div>
<div class="w-full h-4">
<input type="range"
aria-label="Progress"
class="flex items-center mx-auto w-full bg-transparent focus:outline-none"
min="0"
x-ref="range"
x-model="runtime"
@change="skip"
@mouseover="setPreviewCounter($event.offsetX)"
:title="title"
:max="duration"
:disabled="!isPlaying"
:class="{'cursor-pointer': isPlaying, 'cursor-not-allowed': !isPlaying}">
<div class="flex flex-col place-content-end pt-3 sm:pt-0 sm:pl-2 sm:w-1/2">
<div class="grid grid-cols-3 place-content-between h-12"
:class="!isLoaded ? 'animate-pulse': ''">
<div x-text="counters.current"
aria-label="Current Time"
title="Current Time"
class="flex justify-start items-center font-mono text-sm"
:class="{'text-gray-300': !isPlaying}"></div>
{% with BUTTON_CSS="focus:outline-none hover:text-blue-300 inline-block" INACTIVE_CSS="opacity-75 cursor-not-allowed pointer-events-none" %}
<div class="flex justify-center items-center space-x-6">
<button aria-label="Skip Back 10 Seconds"
title="Skip Back 10 Seconds"
class="{{ BUTTON_CSS }}"
x-cloak
@click="skipBack"
:class="isPlaying || '{{ INACTIVE_CSS }}'">
{% heroicon_outline "backward" size=30 %}
</button>
<button aria-label="Play"
:title="isLoaded ? 'Play' : 'Loading...'"
class="{{ BUTTON_CSS }}"
x-cloak
:class="isLoaded || '{{ INACTIVE_CSS }}'"
@click="togglePlayPause"
x-show="!isPlaying">{% heroicon_outline "play-circle" size=36 %}</button>
<button aria-label="Pause"
title="Pause"
class="{{ BUTTON_CSS }}"
x-cloak
@click="togglePlayPause"
x-show="isPlaying">{% heroicon_outline "pause-circle" size=36 %}</button>
<button aria-label="Skip Forward 10 Seconds"
title="Skip Forward 10 Seconds"
class="{{ BUTTON_CSS }}"
x-cloak
@click="skipForward"
:class="isPlaying || '{{ INACTIVE_CSS }}'">
{% heroicon_outline "forward" size=30 %}
</button>
</div>
{% endwith %}
<div x-text="counters.remaining"
aria-label="Time Remaining"
title="Time Remaining"
class="flex justify-end items-center font-mono text-sm"
:class="{'text-gray-300': !isPlaying}"></div>
</div>
<div class="w-full h-4">
<input type="range"
aria-label="Progress"
class="flex items-center mx-auto w-full bg-transparent focus:outline-none"
min="0"
x-ref="range"
x-model="runtime"
@change="skip"
@mouseover="setPreviewCounter($event.offsetX)"
:title="title"
:max="duration"
:disabled="!isPlaying"
:class="{'cursor-pointer': isPlaying, 'cursor-not-allowed': !isPlaying}">
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
</div>

0 comments on commit 7e960d9

Please sign in to comment.