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

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

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