230 lines
8.1 KiB
HTML
230 lines
8.1 KiB
HTML
<style>
|
|
<%- await include('/styles.css') -%>
|
|
</style>
|
|
|
|
<svg class="hidden">
|
|
<symbol
|
|
id="backward"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M8 5L5 8M5 8L8 11M5 8H13.5C16.5376 8 19 10.4624 19 13.5C19 15.4826 18.148 17.2202 17 18.188"
|
|
></path>
|
|
<path d="M5 15V19"></path>
|
|
<path
|
|
d="M8 18V16C8 15.4477 8.44772 15 9 15H10C10.5523 15 11 15.4477 11 16V18C11 18.5523
|
|
10.5523 19 10 19H9C8.44772 19 8 18.5523 8 18Z"
|
|
></path>
|
|
</symbol>
|
|
|
|
<symbol id="play" viewBox="0 0 24 24">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0
|
|
3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</symbol>
|
|
|
|
<symbol id="pause" viewBox="0 0 24 24">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0
|
|
01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0
|
|
01-.75.75H15a.75.75 0 01-.75-.75V5.25z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</symbol>
|
|
|
|
<symbol id="forward" viewBox="0 0 24 24">
|
|
<path
|
|
d="M16 5L19 8M19 8L16 11M19 8H10.5C7.46243 8 5 10.4624 5 13.5C5 15.4826 5.85204 17.2202 7 18.188"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
<path d="M13 15V19" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<path
|
|
d="M16 18V16C16 15.4477 16.4477 15 17 15H18C18.5523 15 19 15.4477 19 16V18C19 18.5523 18.5523 19 18
|
|
19H17C16.4477 19 16 18.5523 16 18Z"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
</symbol>
|
|
|
|
<symbol id="high" viewBox="0 0 24 24">
|
|
<path
|
|
d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0
|
|
001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276
|
|
2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06
|
|
8.25 8.25 0 000-11.668.75.75 0 010-1.06z"
|
|
></path>
|
|
<path
|
|
d="M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0
|
|
010-1.06z"
|
|
></path>
|
|
</symbol>
|
|
|
|
<symbol id="off" viewBox="0 0 24 24">
|
|
<path
|
|
d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0
|
|
001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276
|
|
2.561-1.06V4.06zM17.78 9.22a.75.75 0 10-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 001.06 1.06l1.72-1.72 1.72
|
|
1.72a.75.75 0 101.06-1.06L20.56 12l1.72-1.72a.75.75 0 00-1.06-1.06l-1.72 1.72-1.72-1.72z"
|
|
/>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<media-controller
|
|
audio
|
|
defaultsubtitles="{{defaultsubtitles}}"
|
|
defaultduration="{{defaultduration}}"
|
|
gesturesdisabled="{{disabled}}"
|
|
hotkeys="{{hotkeys}}"
|
|
nohotkeys="{{nohotkeys}}"
|
|
defaultstreamtype="on-demand"
|
|
class="@container block w-full shadow-xl shadow-black/5"
|
|
style="
|
|
--media-background-color: transparent;
|
|
--media-control-background: transparent;
|
|
--media-control-hover-background: transparent;
|
|
--media-tooltip-display: none;
|
|
"
|
|
>
|
|
<slot name="media" slot="media"></slot>
|
|
|
|
<media-time-range
|
|
class="block @md:hidden w-full h-2 min-h-0 p-0 bg-slate-50 focus-visible:ring-slate-700 focus-visible:ring-2"
|
|
style="
|
|
--media-range-track-background: transparent;
|
|
--media-time-range-buffered-color: rgb(0 0 0 / 0.02);
|
|
--media-range-bar-color: var(--media-accent-color, rgb(79 70 229));
|
|
--media-range-track-height: 0.5rem;
|
|
--media-range-thumb-background: var(--media-accent-color, rgb(79 70 229));
|
|
--media-range-thumb-box-shadow: 0 0 0 2px var(--media-secondary-color, rgb(255 255 255 / 0.9));
|
|
--media-range-thumb-width: 0.25rem;
|
|
--media-range-thumb-height: 1rem;
|
|
--media-preview-time-text-shadow: transparent;
|
|
"
|
|
>
|
|
<media-preview-time-display
|
|
slot="preview"
|
|
class="text-slate-600 text-xs"
|
|
></media-preview-time-display>
|
|
</media-time-range>
|
|
|
|
<media-control-bar
|
|
class="h-20 @md:h-16 px-4 w-full flex items-center justify-between @md:rounded-md @md:ring-1 @md:ring-slate-700/10 bg-secondary"
|
|
>
|
|
<media-seek-backward-button
|
|
seekoffset="10"
|
|
class="w-8 h-8 p-0 group rounded-full focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2"
|
|
>
|
|
<svg
|
|
slot="icon"
|
|
aria-hidden="true"
|
|
class="w-7 h-7 fill-none stroke-slate-500 group-hover:stroke-slate-700"
|
|
>
|
|
<use href="#backward" />
|
|
</svg>
|
|
</media-seek-backward-button>
|
|
|
|
<media-play-button
|
|
class="h-10 w-10 p-2 mx-3 rounded-full bg-slate-700 hover:bg-slate-900 focus:outline-none focus:ring-slate-700 focus:ring-2 focus:ring-offset-2"
|
|
style="--media-primary-color: #fff"
|
|
>
|
|
<svg slot="play" aria-hidden="true" class="relative left-px">
|
|
<use href="#play" />
|
|
</svg>
|
|
<svg slot="pause" aria-hidden="true">
|
|
<use href="#pause" />
|
|
</svg>
|
|
</media-play-button>
|
|
|
|
<media-seek-forward-button
|
|
seekoffset="10"
|
|
class="w-8 h-8 p-0 group relative rounded-full focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2"
|
|
>
|
|
<svg
|
|
slot="icon"
|
|
aria-hidden="true"
|
|
class="w-7 h-7 fill-none stroke-slate-500 group-hover:stroke-slate-700"
|
|
>
|
|
<use href="#forward" />
|
|
</svg>
|
|
</media-seek-forward-button>
|
|
|
|
<div class="hidden @md:block h-full border-l border-slate-700/10 mx-4"></div>
|
|
|
|
<media-time-display
|
|
class="hidden @md:block text-slate-500 text-sm rounded-md focus:outline-none focus:ring-slate-700 focus:ring-2"
|
|
></media-time-display>
|
|
|
|
<media-time-range
|
|
class="hidden @md:block h-2 min-h-0 p-0 m-2 rounded-md bg-slate-50 focus-visible:ring-slate-700 focus-visible:ring-2"
|
|
style="
|
|
--media-range-track-background: transparent;
|
|
--media-time-buffered-color: rgb(0 0 0 / 0.02);
|
|
--media-range-bar-color: var(--media-accent-color, rgb(79 70 229));
|
|
--media-range-track-border-radius: 4px;
|
|
--media-range-track-height: 0.5rem;
|
|
--media-range-thumb-background: var(--media-accent-color, rgb(79 70 229));
|
|
--media-range-thumb-box-shadow: 0 0 0 2px var(--media-secondary-color, rgb(255 255 255 / 0.9));
|
|
--media-range-thumb-width: 0.25rem;
|
|
--media-range-thumb-height: 1rem;
|
|
--media-preview-time-text-shadow: transparent;
|
|
"
|
|
>
|
|
<media-preview-time-display
|
|
slot="preview"
|
|
class="text-slate-600 text-xs"
|
|
></media-preview-time-display>
|
|
</media-time-range>
|
|
|
|
<media-duration-display
|
|
class="hidden @md:block text-slate-500 text-sm"
|
|
></media-duration-display>
|
|
|
|
<media-playback-rate-button
|
|
class="text-slate-500 rounded-md focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2"
|
|
></media-playback-rate-button>
|
|
|
|
<media-mute-button
|
|
class="group relative order-first @md:order-none rounded-md focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2"
|
|
>
|
|
<svg
|
|
slot="high"
|
|
aria-hidden="true"
|
|
class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700"
|
|
>
|
|
<use href="#high" />
|
|
</svg>
|
|
<svg
|
|
slot="medium"
|
|
aria-hidden="true"
|
|
class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700"
|
|
>
|
|
<use href="#high" />
|
|
</svg>
|
|
<svg
|
|
slot="low"
|
|
aria-hidden="true"
|
|
class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700"
|
|
>
|
|
<use href="#high" />
|
|
</svg>
|
|
<svg
|
|
slot="off"
|
|
aria-hidden="true"
|
|
class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700"
|
|
>
|
|
<use href="#off" />
|
|
</svg>
|
|
</media-mute-button>
|
|
</media-control-bar>
|
|
</media-controller>
|