@streamscloud/embeddable 2.2.1 → 2.2.3

package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Icon, IconColor } from '../../ui/icon';
 import { ImageRounded } from '../../ui/image';
-import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg';
+import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
 let { model } = $props();
 const attachmentsToShow = $derived.by(() => {
     const products = model.products.filter((p) => !!p.image).map((p) => ({ isAd: false, image: p.image, link: p.link }));

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte

@@ -14,12 +14,14 @@ import { GetShortVideosDocument } from './operations.generated';
 import { Loading } from '../../ui/loading';
 import { PlayerBuffer, PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
+import { SwipeIndicator } from '../../ui/swipe-indicator';
 import { default as Controls } from './controls.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 import { onMount, untrack } from 'svelte';
 let { input, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
+let everTouched = $state(false);
 let buffer = $state(input.type === 'provider' ? new PlayerBuffer(input.provider) : null);
 $effect(() => {
     if (input.type !== 'ids')
@@ -70,6 +72,19 @@ const uiManager = new ShortVideosPlayerUiManager();
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
 }));
+const contentMounted = (node) => {
+    const markAsTouched = () => {
+        everTouched = true;
+        node.removeEventListener('touchstart', markAsTouched);
+        node.removeEventListener('wheel', markAsTouched);
+        node.removeEventListener('click', markAsTouched);
+        node.removeEventListener('keypress', markAsTouched);
+    };
+    node.addEventListener('touchstart', markAsTouched);
+    node.addEventListener('wheel', markAsTouched);
+    node.addEventListener('click', markAsTouched);
+    node.addEventListener('keypress', markAsTouched);
+};
 const handleDimensionsChanged = (dimensions) => {
     uiManager.updateDimensions({
         mainViewColumnWidth: dimensions.mainSceneWidth,
@@ -88,12 +103,18 @@ const onPlayerClose = () => {
   <div class="short-videos-player" style={uiManager.globalCssVariables}>
     {#if buffer}
       <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
-        <div class="short-videos-player__content">
+        <div class="short-videos-player__content" use:contentMounted>
           <PlayerSlider buffer={buffer}>
             {#snippet children({ item })}
               <ShortVideoViewer model={item} autoplay="on-appearance" showAttachments={uiManager.showShortVideoOverlay} />
+              {#if uiManager.isMobileView && !everTouched}
+                <SwipeIndicator />
+              {/if}
             {/snippet}
           </PlayerSlider>
+          {#if uiManager.isMobileView && !everTouched}
+            <SwipeIndicator />
+          {/if}
         </div>
       </SpotlightLayout>
       <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => onPlayerClose() }} />

package/dist/streams/stream-player/cmp.stream-player.svelte

@@ -17,6 +17,7 @@ import { StreamPageViewer } from '../stream-page-viewer';
 import { Loading } from '../../ui/loading';
 import { PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
+import { SwipeIndicator } from '../../ui/swipe-indicator';
 import { default as Controls } from './controls.svelte';
 import { mapStreamPlayerModel } from './mapper';
 import { GetStreamDocument } from './operations.generated';
@@ -32,6 +33,7 @@ let model = $state(null);
 let buffer = $state.raw(null);
 let loading = $state(true);
 let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
+let everTouched = $state(false);
 let totalEngagementTimeSeconds = 0;
 let inactiveTimeSeconds = 10; // // Mark as inactive after 10 seconds of no activity
 let isActive = true;
@@ -121,6 +123,19 @@ const handleDimensionsChanged = (dimensions) => {
         viewTotalWidth: dimensions.totalWidth
     });
 };
+const contentMounted = (node) => {
+    const markAsTouched = () => {
+        everTouched = true;
+        node.removeEventListener('touchstart', markAsTouched);
+        node.removeEventListener('wheel', markAsTouched);
+        node.removeEventListener('click', markAsTouched);
+        node.removeEventListener('keypress', markAsTouched);
+    };
+    node.addEventListener('touchstart', markAsTouched);
+    node.addEventListener('wheel', markAsTouched);
+    node.addEventListener('click', markAsTouched);
+    node.addEventListener('keypress', markAsTouched);
+};
 const onPageActivated = (id) => {
     const page = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
     if (page) {
@@ -161,7 +176,7 @@ const onProgress = (pageId, videoId, progress) => {
   <div class="stream-player" style={uiManager.globalCssVariables}>
     {#if buffer && model}
       <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
-        <div class="stream-player__content">
+        <div class="stream-player__content" use:contentMounted>
           <PlayerSlider
             buffer={buffer}
             on={{
@@ -187,6 +202,9 @@ const onProgress = (pageId, videoId, progress) => {
               {/if}
             {/snippet}
           </PlayerSlider>
+          {#if uiManager.isMobileView && !everTouched}
+            <SwipeIndicator />
+          {/if}
         </div>
       </SpotlightLayout>
       {#if model}

package/dist/ui/icon/cmp.icon.svelte

@@ -1,34 +1,20 @@
 <script lang="ts">import { IconColor } from './types';
-import { inlineSvg } from '@svelte-put/inline-svg';
 let { src, color = null } = $props();
-let svgRef;
-$effect(() => {
-    if (svgRef && src) {
-        inlineSvg(svgRef, src);
-    }
-});
-const fillSvg = (node) => {
-    svgRef = node;
-    return inlineSvg(node, src);
-};
 </script>
 
-<div
-  class="icon"
-  style="display: contents"
-  class:icon--white={color === IconColor.White}
-  class:icon--text={color === IconColor.Text}
-  class:icon--gray={color === IconColor.Gray}
-  class:icon--green={color === IconColor.Green}
-  class:icon--red={color === IconColor.Red}
-  class:icon--orange={color === IconColor.Orange}
-  class:icon--blue={color === IconColor.Blue}>
-  {#if src.startsWith('<svg')}
+{#if src?.startsWith('<svg')}
+  <div
+    class="icon"
+    class:icon--white={color === IconColor.White}
+    class:icon--text={color === IconColor.Text}
+    class:icon--gray={color === IconColor.Gray}
+    class:icon--green={color === IconColor.Green}
+    class:icon--red={color === IconColor.Red}
+    class:icon--orange={color === IconColor.Orange}
+    class:icon--blue={color === IconColor.Blue}>
     {@html src}
-  {:else}
-    <svg use:fillSvg></svg>
-  {/if}
-</div>
+  </div>
+{/if}
 
 <style>@keyframes fadeIn {
   0% {
@@ -45,6 +31,7 @@ const fillSvg = (node) => {
   --_icon--color: var(--icon--color);
   --_icon--size: var(--icon--size, 1.25em);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
+  display: contents;
 }
 .icon--white {
   --_icon--color: #ffffff;

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">import { Icon } from '../icon';
+import IconArrowUp from '@fluentui/svg-icons/icons/arrow_up_20_regular.svg?raw';
+import { SwipeIndicatorLocalization } from './swipe-indicator-localization.svelte';
+let { fadeTimeout = 2000, localization: localizationInit } = $props();
+const localization = $derived(new SwipeIndicatorLocalization(localizationInit));
+let isFaded = $state(false);
+const indicatorMounted = (_) => {
+    if (fadeTimeout) {
+        const timeout = setTimeout(() => {
+            isFaded = true;
+        }, 3000);
+        return {
+            destroy() {
+                clearTimeout(timeout);
+            }
+        };
+    }
+};
+</script>
+
+<div class="swipe-indicator" class:swipe-indicator--faded={isFaded} use:indicatorMounted>
+  <div class="swipe-indicator__icon">
+    <Icon src={IconArrowUp} />
+  </div>
+  <div class="swipe-indicator__text">
+    {localization.swipe}
+  </div>
+</div>
+
+<style>@charset "UTF-8";
+@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.swipe-indicator {
+  --_swipe-indicator--color: var(--swipe-indicator--color, #ffffff);
+  --_swipe-indicator--font-size: var(--swipe-indicator--font-size, 1rem);
+  --_swipe-indicator--icon-size: var(--swipe-indicator--icon-size, var(--_swipe-indicator--font-size));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: 1.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  color: var(--_swipe-indicator--color);
+  opacity: 1;
+  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.swipe-indicator--faded {
+  opacity: 0;
+  pointer-events: none;
+}
+.swipe-indicator:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: 50%;
+  background: #000;
+  filter: blur(12px);
+  transform: scale(3);
+}
+.swipe-indicator__icon {
+  font-size: var(--_swipe-indicator--icon-size);
+  animation: bounce 2.7s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  will-change: transform;
+  z-index: 1;
+}
+.swipe-indicator__text {
+  font-size: var(--_swipe-indicator--font-size);
+  z-index: 1;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  10% {
+    transform: translateY(-24px); /* основной прыжок */
+  }
+  18% {
+    transform: translateY(0);
+  }
+  26% {
+    transform: translateY(-12px); /* первый малый отскок */
+  }
+  34% {
+    transform: translateY(0);
+  }
+  41% {
+    transform: translateY(-8px); /* второй малый отскок */
+  }
+  48% {
+    transform: translateY(0);
+  }
+  54% {
+    transform: translateY(-4px); /* третий малый отскок */
+  }
+  60% {
+    transform: translateY(0);
+  }
+  65% {
+    transform: translateY(-2px); /* почти затух */
+  }
+  70% {
+    transform: translateY(0);
+  }
+  75% {
+    transform: translateY(-1px); /* совсем маленький */
+  }
+  80% {
+    transform: translateY(0);
+  }
+}</style>

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ISwipeIndicatorLocalization } from './swipe-indicator-localization.svelte';
+type Props = {
+    fadeTimeout?: number;
+    localization?: ISwipeIndicatorLocalization;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/swipe-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SwipeIndicator } from './cmp.swipe-indicator.svelte';
+export type { ISwipeIndicatorLocalization } from './swipe-indicator-localization.svelte';

package/dist/ui/swipe-indicator/index.js

@@ -0,0 +1 @@
+export { default as SwipeIndicator } from './cmp.swipe-indicator.svelte';

package/dist/ui/swipe-indicator/swipe-indicator-localization.svelte.d.ts

@@ -0,0 +1,7 @@
+export interface ISwipeIndicatorLocalization {
+    swipe?: string;
+}
+export declare class SwipeIndicatorLocalization {
+    swipe: string;
+    constructor(init?: ISwipeIndicatorLocalization);
+}

package/dist/ui/swipe-indicator/swipe-indicator-localization.svelte.js

@@ -0,0 +1,6 @@
+export class SwipeIndicatorLocalization {
+    swipe = $state('Swipe');
+    constructor(init) {
+        this.swipe = init?.swipe || this.swipe;
+    }
+}

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

@@ -55,8 +55,13 @@ onMount(() => {
     }
 });
 onDestroy(() => {
-    PlaybackManager.unregisterPlayer(id);
-    intersectionObserver.disconnect();
+    try {
+        PlaybackManager.unregisterPlayer(id);
+        intersectionObserver.disconnect();
+    }
+    catch (_a) {
+        // ignore
+    }
 });
 let video = $state.raw(undefined);
 let showControlsOnHover = $state(false);
@@ -154,6 +159,7 @@ const stop = () => {
     video.pause();
     video.currentTime = 0;
     video.load();
+    onPause();
 };
 const togglePlay = (e) => {
     e === null || e === void 0 ? void 0 : e.stopPropagation();
@@ -234,7 +240,7 @@ const handleSeek = (percent) => {
 <div class="video" onmouseenter={() => setShowControlsOnHover(true)} onmouseleave={() => setShowControlsOnHover(false)} role="none" inert={inert}>
   <video
     class="video__video"
-    style={everActivated ? `--_video--media-fit: contain;` : ''}
+    class:video__video--not-activated={!everActivated}
     width="100%"
     controls={controls && everActivated}
     poster={poster}
@@ -250,8 +256,11 @@ const handleSeek = (percent) => {
     bind:this={video}>
     <track src="" kind="captions" />
   </video>
+  {#if !everActivated}
+    <img class="video__poster" src={poster} alt="" />
+  {/if}
   {#if !controls || !everActivated}
-    <div class="video__cover" onclick={togglePlay} onkeydown={() => ({})} role="none">
+    <div class="video__overlay" onclick={togglePlay} onkeydown={() => ({})} role="none">
       {#if isVideoPaused}
         <button type="button" aria-label="play" class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
           <Icon src={IconPlay} color={IconColor.White} />
@@ -271,20 +280,22 @@ const handleSeek = (percent) => {
         </button>
       {/if}
 
-      <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 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}
           {/if}
-        {/if}
-      </div>
+        </div>
+      {/if}
     </div>
   {/if}
 </div>
@@ -304,6 +315,7 @@ const handleSeek = (percent) => {
   --_video--background-color: var(--video--background-color, #000000);
   --_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--back-color: var(--video--progress--back-color);
   --_video--progress--front-color: var(--video--progress--front-color);
@@ -341,6 +353,13 @@ const handleSeek = (percent) => {
   font-size: 1em;
   z-index: 1;
 }
+.video__poster {
+  object-fit: var(--_video--poster--media-fit);
+  min-width: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
 .video__video {
   object-fit: var(--_video--media-fit);
   min-width: 100%;
@@ -348,7 +367,12 @@ const handleSeek = (percent) => {
   max-width: 100%;
   max-height: 100%;
 }
-.video__cover {
+.video__video--not-activated {
+  visibility: hidden;
+  height: 0;
+  min-height: 0;
+}
+.video__overlay {
   position: absolute;
   left: 0;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
@@ -92,11 +92,10 @@
   },
   "peerDependencies": {
     "@fluentui/svg-icons": "^1.1.292",
-    "@svelte-put/inline-svg": "^4.0.1",
+    "@streamscloud/streams-analytics-collector": "latest",
     "@urql/core": "^5.1.1",
     "mobile-detect": "^1.4.5",
-    "svelte": "^5.25.3",
-    "@streamscloud/streams-analytics-collector": "latest"
+    "svelte": "^5.25.3"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
@@ -111,7 +110,6 @@
     "@graphql-codegen/typescript": "^4.1.6",
     "@graphql-codegen/typescript-operations": "^4.6.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@svelte-put/inline-svg": "^4.0.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",