@streamscloud/embeddable 3.4.2 → 5.0.0

package/dist/ui/seek-bar/cmp.seek-bar.svelte

@@ -1,30 +1,104 @@
-<script lang="ts">let { value, on } = $props();
+<script lang="ts">let { value, listenParentClicks = false, on } = $props();
+let seekBarRef;
 let progressRef;
-let valueRef;
+let isDragging = $state(false);
+const cssValue = $derived(`${100 * (value <= 1 ? value : 1)}%`);
 const handleSeek = (e) => {
+    if (!progressRef) {
+        return;
+    }
     e.stopPropagation();
     const { left, width } = progressRef.getBoundingClientRect();
     const x = e.clientX - left;
-    const percent = x / width;
-    value = percent;
-    valueRef.style.transition = 'none';
-    valueRef.style.width = `${100 * percent}%`;
-    setTimeout(() => {
-        valueRef.style.transition = '';
-    }, 0);
+    const percent = Math.max(0, Math.min(1, x / width));
     on === null || on === void 0 ? void 0 : on.seek(percent);
 };
+const handleParentClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!progressRef || !seekBarRef || isDragging) {
+        return;
+    }
+    const seekBarRect = progressRef.getBoundingClientRect();
+    if (e.clientX >= seekBarRect.left && e.clientX <= seekBarRect.right) {
+        const x = e.clientX - seekBarRect.left;
+        const percent = Math.max(0, Math.min(1, x / seekBarRect.width));
+        on === null || on === void 0 ? void 0 : on.seek(percent);
+    }
+};
+const onMouseMove = (e) => {
+    if (isDragging) {
+        handleSeek(e);
+    }
+};
+const onMouseUp = () => {
+    var _a;
+    isDragging = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    (_a = on === null || on === void 0 ? void 0 : on.dragEnd) === null || _a === void 0 ? void 0 : _a.call(on);
+};
+const onMouseDown = (e) => {
+    var _a;
+    isDragging = true;
+    (_a = on === null || on === void 0 ? void 0 : on.dragStart) === null || _a === void 0 ? void 0 : _a.call(on);
+    handleSeek(e);
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+};
+const handleScrubberKeyDown = (event) => {
+    const step = 0.05;
+    let newValue;
+    if (event.key === 'ArrowLeft') {
+        newValue = Math.max(0, value - step);
+    }
+    else if (event.key === 'ArrowRight') {
+        newValue = Math.min(1, value + step);
+    }
+    else if (event.key === 'Home') {
+        newValue = 0;
+    }
+    else if (event.key === 'End') {
+        newValue = 1;
+    }
+    if (newValue !== undefined) {
+        event.preventDefault();
+        on === null || on === void 0 ? void 0 : on.seek(newValue);
+    }
+};
+$effect(() => {
+    if (listenParentClicks && seekBarRef) {
+        const parent = seekBarRef.parentElement;
+        if (parent) {
+            parent.addEventListener('click', handleParentClick);
+            return () => {
+                parent.removeEventListener('click', handleParentClick);
+            };
+        }
+    }
+});
+$effect(() => {
+    return () => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    };
+});
 </script>
 
-<div class="seek-bar" onclick={handleSeek} onkeydown={() => ({})} role="none">
+<div class="seek-bar" onmousedown={onMouseDown} onkeydown={() => ({})} role="none" bind:this={seekBarRef}>
   <div class="seek-bar__container" bind:this={progressRef}>
-    <span
-      class="seek-bar__value"
-      class:seek-bar__value--animate={value > 0.001 && value < 0.96}
-      style="width: {`${100 * (value <= 1 ? value : 1)}%`}"
-      bind:this={valueRef}>
-      &nbsp;
-    </span>
+    <span class="seek-bar__value" style="width: {cssValue}"> &nbsp; </span>
+    <div
+      class="seek-bar__scrubber"
+      style="left: {cssValue}"
+      role="slider"
+      tabindex="0"
+      aria-valuemin="0"
+      aria-valuemax="1"
+      aria-valuenow={value}
+      aria-label="Media position slider"
+      onkeydown={handleScrubberKeyDown}>
+    </div>
   </div>
 </div>
 
@@ -40,24 +114,34 @@ const handleSeek = (e) => {
   }
 }
 .seek-bar {
-  --_seek-bar--height: var(--seek-bar--height, 0.25em);
-  --_seek-bar--back-color: var(--seek-bar--back-color, #b0b0b0);
-  --_seek-bar--front-color: var(--seek-bar--front-color, #ffffff);
   cursor: pointer;
+  position: relative;
+  --_seek-bar--container-color: var(--seek-bar--container-color, #b0b0b0);
+  --_seek-bar--value-color: var(--seek-bar--value-color, #fff);
+  --_seek-bar--scrubber-color: var(--seek-bar--scrubber-color, #fff);
 }
 .seek-bar__container {
   width: 100%;
-  background: var(--_seek-bar--back-color);
-  height: var(--_seek-bar--height);
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
-  border-radius: calc(var(--_seek-bar--height) / 2);
-  overflow: hidden;
+  background: var(--_seek-bar--container-color);
+  height: 0.3125rem;
+  position: relative;
 }
 .seek-bar__value {
-  background: var(--_seek-bar--front-color);
+  background: var(--_seek-bar--value-color);
+  border-color: var(--_seek-bar--container-color);
+  border-width: 0.0625rem;
   display: inline-block;
   height: 100%;
 }
-.seek-bar__value--animate {
-  transition: width 500ms;
+.seek-bar__scrubber {
+  position: absolute;
+  top: 50%;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--_seek-bar--scrubber-color);
+  border-color: var(--_seek-bar--container-color);
+  border-width: 0.0625rem;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
 }</style>

package/dist/ui/seek-bar/cmp.seek-bar.svelte.d.ts

@@ -3,8 +3,11 @@ type Props = {
      * 0-1
      * */
     value: number;
+    listenParentClicks?: boolean;
     on: {
         seek: (e: number) => void;
+        dragStart?: () => void;
+        dragEnd?: () => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/shadow-dom/index.d.ts

@@ -1 +1,2 @@
-export { ShadowHost } from './shadow-host';
+export { ModalShadowHost } from './modal-shadow-host';
+export { createShadowRoot } from './shadow-root-service';

package/dist/ui/shadow-dom/index.js

@@ -1 +1,2 @@
-export { ShadowHost } from './shadow-host';
+export { ModalShadowHost } from './modal-shadow-host';
+export { createShadowRoot } from './shadow-root-service';

package/dist/ui/shadow-dom/{shadow-host.d.ts → modal-shadow-host.d.ts}

@@ -1,4 +1,4 @@
-export declare class ShadowHost {
+export declare class ModalShadowHost {
     shadowRoot: ShadowRoot;
     private host;
     constructor();

package/dist/ui/shadow-dom/modal-shadow-host.js

@@ -0,0 +1,21 @@
+import { createShadowRoot } from './shadow-root-service';
+export class ModalShadowHost {
+    shadowRoot;
+    host;
+    constructor() {
+        const host = document.createElement('div');
+        this.host = host;
+        this.shadowRoot = createShadowRoot(host);
+        host.style.position = 'fixed';
+        host.style.inset = '0';
+        host.style.zIndex = '9999';
+    }
+    attachToBody() {
+        document.getElementsByTagName('html')[0].style.overflow = 'hidden';
+        document.body.appendChild(this.host);
+    }
+    remove() {
+        this.host.remove();
+        document.getElementsByTagName('html')[0].style.overflow = '';
+    }
+}

package/dist/ui/shadow-dom/shadow-root-service.d.ts

@@ -0,0 +1 @@
+export declare const createShadowRoot: (host: HTMLElement) => ShadowRoot;

package/dist/ui/shadow-dom/shadow-root-service.js

@@ -0,0 +1,23 @@
+import normalize from './_normalize.scss?raw';
+import reset from './_reset.scss?raw';
+export const createShadowRoot = (host) => {
+    prepareShadowRootHost(host);
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap';
+    shadowRoot.appendChild(link);
+    const styleElement = document.createElement('style');
+    styleElement.textContent = normalize + reset;
+    shadowRoot.appendChild(styleElement);
+    return shadowRoot;
+};
+const prepareShadowRootHost = (host) => {
+    host.style.all = 'unset';
+    host.style.lineHeight = '1.15';
+    host.style.font = '16px Inter, sans-serif, arial';
+    host.style.fontWeight = '400';
+    host.style.margin = '0';
+    host.style.boxSizing = 'border-box';
+    host.style.textAlign = 'initial';
+};

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, 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}
@@ -270,7 +269,7 @@ const handleSeek = (percent) => {
           <Icon src={IconPause} color={IconColor.White} />
         </button>
       {/if}
-      {#if showControlsOnHover || MediaVolumeManager.isMuted}
+      {#if (showControlsOnHover || MediaVolumeManager.isMuted) && !hideSpeaker}
         <button type="button" aria-label={MediaVolumeManager.isMuted ? 'mute' : 'unmute'} class="video__mute-button" onclick={toggleMute}>
           {#if MediaVolumeManager.isMuted}
             <Icon src={IconSpeakerMute} color={IconColor.White} />
@@ -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;
@@ -7,6 +8,8 @@ type Props = {
     loop?: boolean;
     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": "3.4.2",
+  "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",

package/dist/short-videos/short-video-viewer/cmp.ad.svelte

@@ -1,140 +0,0 @@
-<script lang="ts">import { Image } from '../../ui/image';
-import { LineClamp } from '../../ui/line-clamp';
-import { ProportionalContainer } from '../../ui/proportional-container';
-let { ad } = $props();
-</script>
-
-<div class="ad">
-  <ProportionalContainer ratio={234 / 277}>
-    <Image src={ad.image} alt={ad.title} />
-  </ProportionalContainer>
-  <div class="ad__info">
-    {#if ad.title}
-      <div class="ad__title">{ad.title}</div>
-    {/if}
-    {#if ad.description}
-      <div class="ad__description">
-        <LineClamp value={ad.description} maxLines={2} />
-      </div>
-    {/if}
-    {#if ad.price && ad.currency}
-      <div class="ad__price">{ad.currency} {ad.price}</div>
-    {/if}
-    {#if ad.ctaButton}
-      <div class="ad__button">
-        <a
-          href={ad.ctaButton.url}
-          target="_blank"
-          class="short-video-ad-viewer__link"
-          style="background-color: {ad.ctaButton.background}; color: {ad.ctaButton.textColor}; border: {ad.ctaButton
-            .border}; text-decoration: none; padding: 0.5em 1em; border-radius: 0.25em; display: inline-block;">
-          {ad.ctaButton.text}
-        </a>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.ad {
-  --image--border-radius: 0.25rem;
-  --image--object-fit: fit;
-  --image--width: auto;
-  --image--height: auto;
-  width: 100%;
-  height: max-content;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  container-type: inline-size;
-  aspect-ratio: 9/16;
-  background-color: #fafafa;
-  border: 0.038125rem solid #999999;
-  border-radius: 0.5rem;
-  padding: 0.75rem 0.75rem 1.125rem;
-  justify-content: space-between;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad {
-    padding: 0.5rem 0.5rem 0.75rem;
-  }
-}
-.ad__info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  margin-top: 0.1875rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad__info {
-    gap: 0.25rem;
-    margin-top: 0.125rem;
-  }
-}
-.ad__title {
-  font-weight: 700;
-  font-size: 1.125rem;
-  line-height: 1.375rem;
-  min-height: 1.375rem;
-  color: #000000;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad__title {
-    font-size: 0.75rem;
-    line-height: 0.875rem;
-    min-height: 0.875rem;
-  }
-}
-.ad__description {
-  font-weight: 400;
-  color: #6b7280;
-  font-size: 0.9375rem;
-  line-height: 1.375rem;
-  min-height: 1.375rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad__description {
-    font-size: 0.625rem;
-    line-height: 0.875rem;
-    min-height: 0.875rem;
-  }
-}
-.ad__price {
-  font-size: 1.875rem;
-  font-weight: 700;
-  text-align: right;
-  min-height: 3.53125rem;
-  color: #000000;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 230px) {
-  .ad__price {
-    font-size: 1.25rem;
-    min-height: 2.40625rem;
-  }
-}
-.ad__button {
-  display: flex;
-  justify-content: center;
-  margin-top: auto;
-  width: 100%;
-}
-:global([data-theme="dark"]) .ad {
-  background-color: #121212;
-  color: #ffffff;
-  border-color: #1e1e1e;
-}</style>