Move autoplay button below player to the left
Agent-Logs-Url: https://github.com/mkelvers/mal/sessions/cb3492f9-64b6-4d16-9c7b-11d9e2c647c3 Co-authored-by: melosh101 <59763532+melosh101@users.noreply.github.com>
This commit is contained in:
committed by
GitHub
parent
77be47297f
commit
03145d05b1
@@ -182,8 +182,14 @@ const initPlayer = (): void => {
|
||||
const updateAutoplayButton = (): void => {
|
||||
if (!autoplayBtn) return
|
||||
const enabled = isAutoplayEnabled()
|
||||
autoplayBtn.title = enabled ? 'Autoplay: On' : 'Autoplay: Off'
|
||||
autoplayBtn.classList.toggle('opacity-40', !enabled)
|
||||
const label = enabled ? 'Autoplay: On' : 'Autoplay: Off'
|
||||
autoplayBtn.title = label
|
||||
autoplayBtn.classList.remove('opacity-40', 'opacity-50')
|
||||
if (!enabled) autoplayBtn.classList.add('opacity-50')
|
||||
const lastChild = autoplayBtn.lastChild
|
||||
if (lastChild && lastChild.nodeType === Node.TEXT_NODE) {
|
||||
lastChild.textContent = label
|
||||
}
|
||||
}
|
||||
|
||||
const timelineBounds = (): { start: number, end: number, duration: number } => {
|
||||
|
||||
@@ -251,20 +251,6 @@ templ VideoPlayer(data shared.WatchPageData, displayTitle string) {
|
||||
<path d="M11.9894 5.45398V0L2 7.79529L11.9894 15.5914V10.3033H47.0886V40.1506H33.2442V45H52V5.45398H11.9894Z" fill="white"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
data-autoplay
|
||||
class="flex h-9 w-9 items-center justify-center text-white sm:h-10 sm:w-10"
|
||||
title="Autoplay: On"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 sm:h-6 sm:w-6"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<polygon points="5 6 16 12 5 18" fill="white" stroke="none"></polygon>
|
||||
<line x1="19" y1="6" x2="19" y2="18" stroke="white" stroke-width="2" stroke-linecap="round"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
data-fullscreen
|
||||
class="flex h-9 w-9 items-center justify-center text-white sm:h-10 sm:w-10"
|
||||
|
||||
@@ -39,7 +39,19 @@ templ WatchPage(anime jikan.Anime, data shared.WatchPageData) {
|
||||
hx-boost="true"
|
||||
>
|
||||
@watch.VideoPlayer(data, anime.DisplayTitle())
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 sm:justify-end">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
data-autoplay
|
||||
class="inline-flex h-8 items-center gap-1.5 bg-(--panel-soft) px-2 text-xs text-(--text) hover:bg-(--panel)"
|
||||
title="Autoplay: On"
|
||||
>
|
||||
<svg class="h-3.5 w-3.5 shrink-0" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<polygon points="5 6 16 12 5 18" fill="currentColor" stroke="none"></polygon>
|
||||
<line x1="19" y1="6" x2="19" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>
|
||||
</svg>
|
||||
Autoplay: On
|
||||
</button>
|
||||
<div class="ml-auto flex flex-wrap items-center gap-2">
|
||||
if shared.CanGoPrevEpisode(data.CurrentEpisode) {
|
||||
<a
|
||||
href={ templ.URL(shared.EpisodeWithOffsetURL(anime.MalID, data.CurrentEpisode, -1)) }
|
||||
@@ -75,6 +87,7 @@ templ WatchPage(anime jikan.Anime, data shared.WatchPageData) {
|
||||
anime.Airing,
|
||||
)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<h3 class="mb-3 text-lg font-semibold tracking-wide text-(--text)">
|
||||
|
||||
Reference in New Issue
Block a user