hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-22 18:29:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

add fullscreen button to videos

Browse source
This commit is contained in:
VDawg 2023-11-14 12:21:56 +01:00
parent 8874252596
commit 8654550dcf
2 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/lib/components/Video.svelte
View file

@ -2,6 +2,7 @@
import clsx from 'clsx'
import PlayIcon from '~icons/mingcute/play-circle-line'
import { inview } from 'svelte-inview'
import IconFullscreen from '~icons/mingcute/fullscreen-fill'
import { onMount } from 'svelte'
/** @type {string} */
@ -55,6 +56,12 @@
{autoplay}
on:play={() => (isPaused = false)}
/>
<button on:click={makeFullscreen} class="absolute bottom-2 left-2 z-10">
<IconFullscreen
class="h-6 w-6 rounded bg-black/10 opacity-80 transition-all duration-75 hover:scale-105 hover:opacity-100"
/>
</button>
<div
class={clsx(
'z-20 opacity-0 transition-opacity ',

10
src/routes/PreviewRiceSlice.svelte
View file

@ -4,6 +4,7 @@
import previewRiceThumbnail from '$lib/videos/end_4_thumbnail.webp'
import PlayIcon from '~icons/mingcute/play-circle-line'
import clsx from 'clsx'
import IconFullscreen from '~icons/mingcute/fullscreen-fill'
import { onMount } from 'svelte'
/** @type HTMLVideoElement */
@ -14,7 +15,6 @@
function togglePlay() {
videoElement.paused ? videoElement.play() : videoElement.pause()
isPaused = videoElement.paused
}
function makeFullscreen() {
@ -56,11 +56,17 @@
muted
preload="auto"
autoplay
on:play={() => {}}
on:play={() => (isPaused = false)}
on:pause={() => (isPaused = true)}
poster={previewRiceThumbnail}
on:click={togglePlay}
on:dblclick={makeFullscreen}
/>
<button on:click={makeFullscreen} class="absolute bottom-0 left-0 z-10">
<IconFullscreen
class="h-8 w-8 rounded bg-black/10 p-2 opacity-60 transition-all duration-75 hover:scale-105 hover:opacity-100"
/>
</button>
<div
class={clsx(
'z-20 opacity-0 transition-opacity ',