fix: adjust embedded video player style

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

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>

plugins/attachment-resources/src/components/AttachmentImagePreview.svelte

@@ -32,7 +32,7 @@
   }
 
   const minSizeRem = 4
-  const maxSizeRem = 20
+  const maxSizeRem = 25
 
   let dimensions: Dimensions
 

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>

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>