hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-11-17 02:45:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

pluginSlice fix fullscreen btn with sliding

Browse source
This commit is contained in:
VDawg 2023-11-14 15:45:17 +01:00
parent 8b291f8821
commit 07417aca1f
2 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,6 @@
import PlayIcon from '~icons/mingcute/play-circle-line' import PlayIcon from '~icons/mingcute/play-circle-line'
import { inview } from 'svelte-inview' import { inview } from 'svelte-inview'
import IconFullscreen from '~icons/mingcute/fullscreen-fill' import IconFullscreen from '~icons/mingcute/fullscreen-fill'
import { onMount } from 'svelte'
/** @type {string} */ /** @type {string} */
export let src export let src
@ -55,8 +54,6 @@
on:pause={() => (isPaused = true)} on:pause={() => (isPaused = true)}
{autoplay} {autoplay}
on:play={() => (isPaused = false)} on:play={() => (isPaused = false)}
on:mouseenter
on:mouseleave
/> />
<button on:click={makeFullscreen} class="absolute bottom-2 left-2 z-10"> <button on:click={makeFullscreen} class="absolute bottom-2 left-2 z-10">

35
src/routes/PluginsSlice.svelte
View file

@ -118,21 +118,26 @@
isHoveringVideo && '-translate-x-56' isHoveringVideo && '-translate-x-56'
)} )}
> >
{#each items as { src, poster }, index} <div
<Video class="h-full w-full"
{src} on:mouseenter={slideVideoIn}
{poster} on:mouseleave={slideVideoOut}
autoplay role="complementary"
bind:videoElement={videos[index]} >
class="z-10 aspect-video h-[inherit] origin-left rounded-lg object-cover object-left shadow-xl shadow-cyan-700/50 outline outline-2 outline-cyan-500 duration-500" {#each items as { src, poster }, index}
hidden={index !== activeIndex} <Video
on:pause={pauseVideos} {src}
on:play={playVideos} {poster}
videoClass="h-[inherit] aspect-video" autoplay
on:mouseenter={slideVideoIn} bind:videoElement={videos[index]}
on:mouseleave={slideVideoOut} class="z-10 aspect-video h-[inherit] origin-left rounded-lg object-cover object-left shadow-xl shadow-cyan-700/50 outline outline-2 outline-cyan-500 duration-500"
/> hidden={index !== activeIndex}
{/each} on:pause={pauseVideos}
on:play={playVideos}
videoClass="h-[inherit] aspect-video"
/>
{/each}
</div>
<div <div
class="pt-5 text-sm font-medium text-slate-300 md:text-base [&>a:hover]:text-cyan-300 [&>a:hover]:underline [&>a]:font-bold" class="pt-5 text-sm font-medium text-slate-300 md:text-base [&>a:hover]:text-cyan-300 [&>a:hover]:underline [&>a]:font-bold"
> >