From 4e186d785edde316b9454e87c55d5d6807204706 Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@xored.com>
Date: Thu, 15 May 2025 20:29:55 +0700
Subject: [PATCH] fix: adjust embedded video player style

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
---
 packages/ui/src/components/HlsVideo.svelte    | 26 ++++++++++++++++---
 .../components/AttachmentImagePreview.svelte  |  2 +-
 .../src/components/AttachmentList.svelte      |  2 +-
 .../components/AttachmentVideoPreview.svelte  |  3 ++-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/HlsVideo.svelte b/packages/ui/src/components/HlsVideo.svelte
index 5fb1fe778a..be7180edaa 100644
--- a/packages/ui/src/components/HlsVideo.svelte
+++ b/packages/ui/src/components/HlsVideo.svelte
@@ -21,14 +21,23 @@
   export let src: string
   export let hlsSrc: string
   export let hlsThumbnail = ''
-  export let name: string | undefined = undefined
   export let preload = true
 
   let video: HTMLVideoElement | null = null
   let hls: HLS | null = null
   let player: Plyr | null = null
 
-  const options: Plyr.Options = {}
+  const options: Plyr.Options = {
+    controls: [
+      'play-large',
+      'play',
+      'progress',
+      'current-time',
+      'volume',
+      'settings',
+      'fullscreen'
+    ]
+  }
 
   function initialize (src: string): void {
     if (video === null) {
@@ -151,7 +160,14 @@
 </script>
 
 <!-- svelte-ignore a11y-media-has-caption -->
-<video bind:this={video} width="100%" height="100%" preload={preload ? 'auto' : 'none'} controls />
+<video
+  bind:this={video}
+  width="100%"
+  height="100%"
+  preload={preload ? 'auto' : 'none'}
+  controls
+  disablepictureinpicture
+/>
 
 <style lang="scss">
   video {
@@ -166,5 +182,9 @@
   video::-webkit-media-controls-enclosure {
     visibility: visible;
   }
+
   @import 'plyr/dist/plyr.css';
+  :global(.plyr) {
+    min-width: 10rem;
+  }
 </style>
diff --git a/plugins/attachment-resources/src/components/AttachmentImagePreview.svelte b/plugins/attachment-resources/src/components/AttachmentImagePreview.svelte
index 32cb79131d..d675283cc7 100644
--- a/plugins/attachment-resources/src/components/AttachmentImagePreview.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentImagePreview.svelte
@@ -32,7 +32,7 @@
   }
 
   const minSizeRem = 4
-  const maxSizeRem = 20
+  const maxSizeRem = 25
 
   let dimensions: Dimensions
 
diff --git a/plugins/attachment-resources/src/components/AttachmentList.svelte b/plugins/attachment-resources/src/components/AttachmentList.svelte
index 04dc1a1e4c..83cadd7927 100644
--- a/plugins/attachment-resources/src/components/AttachmentList.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentList.svelte
@@ -61,6 +61,6 @@
   .gallery {
     display: grid;
     grid-gap: 0.75rem;
-    grid-template-columns: repeat(auto-fill, 20rem);
+    grid-template-columns: repeat(auto-fill, 25rem);
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte b/plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte
index cdfa689ad7..b4daf02a59 100644
--- a/plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentVideoPreview.svelte
@@ -67,7 +67,7 @@
     {@const src = getFileUrl(file, name)}
 
     {#if meta?.hls?.source !== undefined}
-      <HlsVideo {src} {preload} hlsSrc={meta.hls.source} hlsThumbnail={meta.hls.thumbnail} {name} />
+      <HlsVideo {src} {preload} hlsSrc={meta.hls.source} hlsThumbnail={meta.hls.thumbnail} />
     {:else}
       <Video {src} {preload} {name} />
     {/if}
@@ -79,5 +79,6 @@
     min-width: 10rem;
     min-height: 10rem;
     border-radius: 0.75rem;
+    overflow: hidden;
   }
 </style>