@streamscloud/embeddable 4.0.0 → 5.0.0

package/dist/ui/video/cmp.video.svelte

@@ -12,13 +12,14 @@ import { Icon, IconColor } from '../icon';
 import { MediaVolumeManager, PlaybackManager } from '../media-playback';
 import { Progress } from '../progress';
 import { SeekBar } from '../seek-bar';
+import { ScrubberPosition } from './types';
 import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
 import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
 import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
 import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 import { onDestroy, onMount, untrack } from 'svelte';
-import { slide } from 'svelte/transition';
-let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, hideSpeaker = false, intersectionContainer, on } = $props();
+import { fade } from 'svelte/transition';
+let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, hideSpeaker = false, intersectionContainer, scrubberPosition = ScrubberPosition.Bottom, on } = $props();
 onMount(() => {
     var _a;
     PlaybackManager.registerMountedPlayer(id, {
@@ -29,12 +30,10 @@ onMount(() => {
             pause();
         },
         onStop: (inRespectToNewlyActivatedVideo) => {
-            if (inRespectToNewlyActivatedVideo && autoplay === 'on-appearance') {
-                pause();
-            }
-            else {
-                stop();
+            if (autoplay === 'on-appearance' && inRespectToNewlyActivatedVideo) {
+                return;
             }
+            stop();
         },
         onToggle: () => {
             togglePlay();
@@ -50,8 +49,8 @@ onMount(() => {
         }
     });
     (_a = on === null || on === void 0 ? void 0 : on.loaded) === null || _a === void 0 ? void 0 : _a.call(on, { id, src });
-    if (video) {
-        intersectionObserver.observe(video);
+    if (videoContainerRef) {
+        intersectionObserver.observe(videoContainerRef);
     }
 });
 onDestroy(() => {
@@ -64,8 +63,8 @@ onDestroy(() => {
     }
 });
 let video = $state.raw(undefined);
+let videoContainerRef = $state.raw(undefined);
 let showControlsOnHover = $state(false);
-let needShowProgress = $state(false);
 let isVideoPaused = $state(true);
 let percentageCompleted = $state(0);
 let everActivated = $state(false);
@@ -187,9 +186,7 @@ const onTimeUpdate = (e) => {
     percentageCompleted = video.currentTime / video.duration || 0;
     notifyProgress();
 };
-const onLoaded = (e) => __awaiter(void 0, void 0, void 0, function* () {
-    const video = e.target;
-    needShowProgress = video.duration >= 8;
+const onLoaded = () => __awaiter(void 0, void 0, void 0, function* () {
     setVolume(MediaVolumeManager.volumeLevel);
     setMuted(MediaVolumeManager.isMuted);
 });
@@ -233,11 +230,13 @@ const notifyProgress = () => {
 const handleSeek = (percent) => {
     if (video) {
         video.currentTime = video.duration * percent;
+        percentageCompleted = percent;
+        notifyProgress();
     }
 };
 </script>
 
-<div class="video" onmouseenter={() => setShowControlsOnHover(true)} onmouseleave={() => setShowControlsOnHover(false)} role="none" inert={inert}>
+<div class="video" role="none" inert={inert} bind:this={videoContainerRef}>
   <video
     class="video__video"
     class:video__video--not-activated={!everActivated}
@@ -281,18 +280,24 @@ const handleSeek = (percent) => {
       {/if}
 
       {#if everActivated}
-        <div class="video__progress-container">
-          {#if needShowProgress}
-            {#if showControlsOnHover}
-              <div class="video__seek-bar" onclick={(e) => e.stopPropagation()} onkeydown={() => ({})} role="none" transition:slide>
-                <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
-              </div>
-            {/if}
-            {#if !showControlsOnHover}
-              <div class="video__progress" in:slide>
-                <Progress value={percentageCompleted} />
-              </div>
-            {/if}
+        <div
+          class="video__progress-container"
+          class:video__progress-container--top={scrubberPosition === ScrubberPosition.Top}
+          class:video__progress-container--bottom={scrubberPosition === ScrubberPosition.Bottom}
+          onmouseenter={() => setShowControlsOnHover(true)}
+          onmouseleave={() => setShowControlsOnHover(false)}
+          onclick={(e) => e.stopPropagation()}
+          onkeydown={() => ({})}
+          role="none">
+          {#if !showControlsOnHover && isVideoPaused}
+            <div class="video__progress">
+              <Progress value={percentageCompleted} />
+            </div>
+          {/if}
+          {#if showControlsOnHover}
+            <div class="video__progress" transition:fade={{ duration: isVideoPaused ? 0 : 300 }}>
+              <SeekBar value={percentageCompleted} listenParentClicks={true} on={{ seek: handleSeek }} />
+            </div>
           {/if}
         </div>
       {/if}
@@ -316,7 +321,7 @@ const handleSeek = (percent) => {
   --_video--border-radius: var(--video--border-radius, 0);
   --_video--media-fit: var(--video--media-fit, contain);
   --_video--poster--media-fit: var(--video--poster--media-fit, cover);
-  --_video--progress--background-color: var(--video--progress--background-color, hsla(0, 0%, 0%, 0.5));
+  --_video--progress--background-color: var(--video--progress--background-color, transparent);
   --_video--progress--back-color: var(--video--progress--back-color);
   --_video--progress--front-color: var(--video--progress--front-color);
   height: 100%;
@@ -382,20 +387,23 @@ const handleSeek = (percent) => {
 }
 .video__progress-container {
   position: absolute;
-  bottom: 0;
   left: 0;
   right: 0;
+  z-index: 1;
+  min-height: 1.5625rem;
+  padding: 0 0.25rem;
+}
+.video__progress-container--top {
+  top: 0.5625rem;
+  bottom: auto;
+}
+.video__progress-container--bottom {
+  top: auto;
+  bottom: 0;
 }
 .video__progress {
-  margin-bottom: 1px;
-  --progress--height: 0.125em;
+  --progress--height: 0.3125em;
   --progress--back-color: var(--_video--progress--back-color);
   --progress--front-color: var(--_video--progress--front-color);
-}
-.video__seek-bar {
-  padding: 0.625em 0.5em;
-  background: var(--_video--progress--background-color);
-  cursor: default;
-  --seek-bar--back-color: var(--_video--progress--back-color);
-  --seek-bar--front-color: var(--_video--progress--front-color);
+  padding: 0.625rem 0;
 }</style>

package/dist/ui/video/cmp.video.svelte.d.ts

@@ -1,3 +1,4 @@
+import { ScrubberPosition } from './types';
 type Props = {
     src: string;
     poster: string | null;
@@ -8,6 +9,7 @@ type Props = {
     intersectionContainer?: HTMLElement;
     inert?: boolean;
     hideSpeaker?: boolean;
+    scrubberPosition?: ScrubberPosition;
     on?: {
         loaded?: (data: {
             id: string;

package/dist/ui/video/index.d.ts

@@ -1 +1,2 @@
 export { default as Video } from './cmp.video.svelte';
+export { ScrubberPosition } from './types';

package/dist/ui/video/index.js

@@ -1 +1,2 @@
 export { default as Video } from './cmp.video.svelte';
+export { ScrubberPosition } from './types';

package/dist/ui/video/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum ScrubberPosition {
+    Top = 0,
+    Bottom = 1
+}

package/dist/ui/video/types.js

@@ -0,0 +1,5 @@
+export var ScrubberPosition;
+(function (ScrubberPosition) {
+    ScrubberPosition[ScrubberPosition["Top"] = 0] = "Top";
+    ScrubberPosition[ScrubberPosition["Bottom"] = 1] = "Bottom";
+})(ScrubberPosition || (ScrubberPosition = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
@@ -36,6 +36,10 @@
       "types": "./dist/short-videos/short-videos-player/index.d.ts",
       "svelte": "./dist/short-videos/short-videos-player/index.js"
     },
+    "./short-video-viewer": {
+      "types": "./dist/short-videos/short-video-viewer/index.d.ts",
+      "svelte": "./dist/short-videos/short-video-viewer/index.js"
+    },
     "./stream-layout": {
       "types": "./dist/streams/layout/index.d.ts",
       "import": "./dist/streams/layout/index.js",