pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fullscreen video player

Browse Source
This commit is contained in:
Fornax
2024-01-24 14:13:46 +01:00
parent 0e2b410833
commit 0ea5a20d74
1 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -100,21 +100,19 @@ const fullscreen = () => {
{/if} {/if}
<div class="player_and_controls"> <div class="player_and_controls">
<div class="player"> <!-- svelte-ignore a11y-media-has-caption -->
<!-- svelte-ignore a11y-media-has-caption --> <video
<video bind:this={player}
bind:this={player} controls
controls playsinline
playsinline loop={loop}
loop={loop} class="player"
class="video" on:pause={() => playing = false }
on:pause={() => playing = false } on:play={() => playing = true }
on:play={() => playing = true } on:ended={() => dispatch("next", {})}
on:ended={() => dispatch("next", {})} >
> <source src={file.get_href} type={file.mime_type} />
<source src={file.get_href} type={file.mime_type} /> </video>
</video>
</div>
<div class="controls"> <div class="controls">
<div class="spacer"></div> <div class="spacer"></div>
@@ -192,8 +190,10 @@ h1 {
width: 100%; width: 100%;
} }
.player_and_controls { .player_and_controls {
flex: 1 1 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
@@ -208,6 +208,7 @@ h1 {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow: auto;
background-color: var(--shaded_background); background-color: var(--shaded_background);
padding: 0 2px 2px 2px; padding: 0 2px 2px 2px;
align-items: center; align-items: center;
@@ -218,13 +219,6 @@ h1 {
.controls > .spacer { .controls > .spacer {
flex: 1 1 auto; flex: 1 1 auto;
} }
.video {
position: relative;
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
@media(max-height: 500px) { @media(max-height: 500px) {
.player_and_controls { .player_and_controls {
flex-direction: row; flex-direction: row;