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

Move video controls on small screens

Browse Source 
Fixes #3
This commit is contained in:
Fornax
2022-04-14 18:56:14 +02:00
parent d0d5822930
commit 13eed9f125
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -131,8 +131,7 @@ const fullscreen = () => {
<button on:click={() => dispatch("next") }> <button on:click={() => dispatch("next") }>
<i class="icon">skip_next</i> <i class="icon">skip_next</i>
</button> </button>
<div style="width: 16px;"></div> <div style="width: 16px; height: 8px;"></div>
<!-- <input bind:this={video_seeker} on:input={seek} class="seeker" type="range" min="0" max="1000" value="0"> -->
<button on:click={mute} class:button_red={player && player.muted}> <button on:click={mute} class:button_red={player && player.muted}>
{#if player && player.muted} {#if player && player.muted}
<i class="icon">volume_off</i> <i class="icon">volume_off</i>
@@ -140,7 +139,6 @@ const fullscreen = () => {
<i class="icon">volume_up</i> <i class="icon">volume_up</i>
{/if} {/if}
</button> </button>
<!-- <input bind:this={volume_seeker} on:input={volume_seek} class="volume_control" type="range" min="0" max="100" value="100"> -->
<button on:click={fullscreen}> <button on:click={fullscreen}>
<i class="icon">fullscreen</i> <i class="icon">fullscreen</i>
</button> </button>
@@ -206,12 +204,6 @@ h1 {
.controls > .spacer { .controls > .spacer {
flex: 1 1 auto; flex: 1 1 auto;
} }
/* .controls > .seeker {
flex: 1 1 80%;
}
.controls > .volume_control {
flex: 1 1 20%;
} */
.video { .video {
position: relative; position: relative;
display: block; display: block;
@@ -227,4 +219,12 @@ h1 {
vertical-align: middle; vertical-align: middle;
border-radius: 8px; border-radius: 8px;
} }
@media(max-height: 600px) {
.container {
flex-direction: row;
}
.controls {
flex-direction: column;
}
}
</style> </style>