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

Fix layout in horizontal video orientation

Browse Source
This commit is contained in:
Fornax
2023-11-15 14:04:48 +01:00
parent 326e77b6bf
commit b53baa32f5
2 changed files with 113 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,11 +62,6 @@ const download = () => { dispatch("download", {}) }
const toggle_play = () => playing ? player.pause() : player.play() const toggle_play = () => playing ? player.pause() : player.play()
// let video_seeker
// const seek = () => {
// player.fastSeek(player.duration * (video_seeker.value/1000))
// }
const seek_relative = delta => { const seek_relative = delta => {
if (player.fastSeek) { if (player.fastSeek) {
player.fastSeek(player.currentTime + delta) player.fastSeek(player.currentTime + delta)
@@ -75,17 +70,10 @@ const seek_relative = delta => {
} }
} }
// let volume_seeker
// const volume_seek = () => {
// player.volume = volume_seeker.value/100
// }
const mute = () => { const mute = () => {
if (player.muted) { if (player.muted) {
// volume_seeker.disabled = false
player.muted = false player.muted = false
} else { } else {
// volume_seeker.disabled = true
player.muted = true player.muted = true
} }
} }
@@ -111,60 +99,62 @@ const fullscreen = () => {
</div> </div>
{/if} {/if}
<div class="player"> <div class="player_and_controls">
<!-- svelte-ignore a11y-media-has-caption --> <div class="player">
<video <!-- svelte-ignore a11y-media-has-caption -->
bind:this={player} <video
controls bind:this={player}
playsinline controls
autoplay playsinline
loop={loop} autoplay
class="video drop_shadow" loop={loop}
on:pause={() => playing = false } class="video"
on:play={() => playing = true } on:pause={() => playing = false }
on:ended={() => dispatch("next", {})} on:play={() => playing = true }
> on:ended={() => dispatch("next", {})}
<source src={file.get_href} type={file.mime_type} /> >
</video> <source src={file.get_href} type={file.mime_type} />
</div> </video>
</div>
<div class="controls"> <div class="controls">
<div class="spacer"></div> <div class="spacer"></div>
{#if is_list} {#if is_list}
<button on:click={() => dispatch("prev") }> <button on:click={() => dispatch("prev") }>
<i class="icon">skip_previous</i> <i class="icon">skip_previous</i>
</button> </button>
{/if}
<button on:click={() => seek_relative(-10)}>
<i class="icon">replay_10</i>
</button>
<button on:click={toggle_play} class="button_highlight">
{#if playing}
<i class="icon">pause</i>
{:else}
<i class="icon">play_arrow</i>
{/if} {/if}
</button> <button on:click={() => seek_relative(-10)}>
<button on:click={() => seek_relative(10)}> <i class="icon">replay_10</i>
<i class="icon">forward_10</i>
</button>
{#if is_list}
<button on:click={() => dispatch("next") }>
<i class="icon">skip_next</i>
</button> </button>
{/if} <button on:click={toggle_play} class="button_highlight">
<div style="width: 16px; height: 8px;"></div> {#if playing}
<button on:click={mute} class:button_red={player && player.muted}> <i class="icon">pause</i>
{#if player && player.muted} {:else}
<i class="icon">volume_off</i> <i class="icon">play_arrow</i>
{:else} {/if}
<i class="icon">volume_up</i> </button>
<button on:click={() => seek_relative(10)}>
<i class="icon">forward_10</i>
</button>
{#if is_list}
<button on:click={() => dispatch("next") }>
<i class="icon">skip_next</i>
</button>
{/if} {/if}
</button> <div style="width: 16px; height: 8px;"></div>
<button on:click={fullscreen}> <button on:click={mute} class:button_red={player && player.muted}>
<i class="icon">fullscreen</i> {#if player && player.muted}
</button> <i class="icon">volume_off</i>
<div class="spacer"></div> {:else}
<i class="icon">volume_up</i>
{/if}
</button>
<button on:click={fullscreen}>
<i class="icon">fullscreen</i>
</button>
<div class="spacer"></div>
</div>
</div> </div>
</div> </div>
@@ -202,6 +192,12 @@ h1 {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.player_and_controls {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.player { .player {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
@@ -231,7 +227,7 @@ h1 {
max-height: 100%; max-height: 100%;
} }
@media(max-height: 500px) { @media(max-height: 500px) {
.container { .player_and_controls {
flex-direction: row; flex-direction: row;
} }
.controls { .controls {

103
svelte/src/filesystem/viewers/Video.svelte
View File

@@ -60,10 +60,8 @@ const seek_relative = delta => {
const mute = () => { const mute = () => {
if (player.muted) { if (player.muted) {
// volume_seeker.disabled = false
player.muted = false player.muted = false
} else { } else {
// volume_seeker.disabled = true
player.muted = true player.muted = true
} }
} }
@@ -74,18 +72,18 @@ const fullscreen = () => {
</script> </script>
<div class="container"> <div class="container">
{#if {#if
state.base.file_type === "video/x-matroska" || state.base.file_type === "video/x-matroska" ||
state.base.file_type === "video/quicktime" || state.base.file_type === "video/quicktime" ||
state.base.file_type === "video/x-ms-asf" state.base.file_type === "video/x-ms-asf"
} }
<div class="compatibility_warning"> <div class="compatibility_warning">
This video file type is not compatible with every web This video file type is not compatible with every web
browser. If the video fails to play you can try downloading browser. If the video fails to play you can try downloading
the video and watching it locally. the video and watching it locally.
</div> </div>
{/if} {/if}
<div class="player_and_controls">
<div class="player"> <div class="player">
{#if loaded} {#if loaded}
<!-- svelte-ignore a11y-media-has-caption --> <!-- svelte-ignore a11y-media-has-caption -->
@@ -95,7 +93,7 @@ const fullscreen = () => {
playsinline playsinline
autoplay autoplay
loop={loop} loop={loop}
class="video drop_shadow" 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", {})}
@@ -105,39 +103,40 @@ const fullscreen = () => {
{/if} {/if}
</div> </div>
<div class="controls"> <div class="controls">
<div class="spacer"></div> <div class="spacer"></div>
<button on:click={() => dispatch("open_sibling", -1) }> <button on:click={() => dispatch("open_sibling", -1) }>
<i class="icon">skip_previous</i> <i class="icon">skip_previous</i>
</button> </button>
<button on:click={() => seek_relative(-10)}> <button on:click={() => seek_relative(-10)}>
<i class="icon">replay_10</i> <i class="icon">replay_10</i>
</button> </button>
<button on:click={toggle_play} class="button_highlight"> <button on:click={toggle_play} class="button_highlight">
{#if playing} {#if playing}
<i class="icon">pause</i> <i class="icon">pause</i>
{:else} {:else}
<i class="icon">play_arrow</i> <i class="icon">play_arrow</i>
{/if} {/if}
</button> </button>
<button on:click={() => seek_relative(10)}> <button on:click={() => seek_relative(10)}>
<i class="icon">forward_10</i> <i class="icon">forward_10</i>
</button> </button>
<button on:click={() => dispatch("open_sibling", 1) }> <button on:click={() => dispatch("open_sibling", 1) }>
<i class="icon">skip_next</i> <i class="icon">skip_next</i>
</button> </button>
<div style="width: 16px; height: 8px;"></div> <div style="width: 16px; height: 8px;"></div>
<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>
{:else} {:else}
<i class="icon">volume_up</i> <i class="icon">volume_up</i>
{/if} {/if}
</button> </button>
<button on:click={fullscreen}> <button on:click={fullscreen}>
<i class="icon">fullscreen</i> <i class="icon">fullscreen</i>
</button> </button>
<div class="spacer"></div> <div class="spacer"></div>
</div>
</div> </div>
</div> </div>
@@ -148,6 +147,12 @@ const fullscreen = () => {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.player_and_controls {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.player { .player {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
@@ -177,7 +182,7 @@ const fullscreen = () => {
max-height: 100%; max-height: 100%;
} }
@media(max-height: 500px) { @media(max-height: 500px) {
.container { .player_and_controls {
flex-direction: row; flex-direction: row;
} }
.controls { .controls {