@streamscloud/embeddable 8.0.0 → 8.1.0

package/dist/content-player/cmp.content-player.svelte

@@ -48,6 +48,13 @@ const handleContentPlayerMounted = (node) => {
     node.addEventListener('wheel', markAsTouched);
     node.addEventListener('click', markAsTouched);
     node.addEventListener('keypress', markAsTouched);
+    return {
+        destroy: () => {
+            removeListeners();
+        }
+    };
+};
+const handleSliderMounted = (node) => {
     let resizeObserver = new ResizeObserver(() => {
         const { width: playerWidth, height: playerHeight } = node.getBoundingClientRect();
         uiManager.playerTotalWidth = playerWidth;
@@ -95,7 +102,6 @@ const handleContentPlayerMounted = (node) => {
     resizeObserver.observe(node);
     return {
         destroy: () => {
-            removeListeners();
             resizeObserver.disconnect();
         }
     };
@@ -157,35 +163,37 @@ const variables = $derived.by(() => {
       </div>
     {/if}
     {#if config.playerBuffer}
-      <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
-        {#snippet children({ item })}
-          {@const postModel = config.itemAsPostViewerModel(item)}
-          <div class="content-player__content">
-            {#if postModel}
-              <PostViewer
-                model={postModel}
-                socialInteractionsHandler={config.socialInteractionsHandler}
-                enableAttachments={config.uiManager.showPostOverlayAttachments}
-                enableControls={config.uiManager.showPostOverlayControls}
-                autoplay="on-appearance"
-                locale={config.settings.locale}
-                on={{
-                  progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
-                  productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
-                  productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
-                  adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
-                  adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
-                }} />
-            {:else if nonPostItemView}
-              {@render nonPostItemView({ item })}
-            {/if}
+      <div class="content-player__slider" use:handleSliderMounted>
+        <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
+          {#snippet children({ item })}
+            {@const postModel = config.itemAsPostViewerModel(item)}
+            <div class="content-player__content">
+              {#if postModel}
+                <PostViewer
+                  model={postModel}
+                  socialInteractionsHandler={config.socialInteractionsHandler}
+                  enableAttachments={config.uiManager.showPostOverlayAttachments}
+                  enableControls={config.uiManager.showPostOverlayControls}
+                  autoplay="on-appearance"
+                  locale={config.settings.locale}
+                  on={{
+                    progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
+                    productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
+                    productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
+                    adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
+                    adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
+                  }} />
+              {:else if nonPostItemView}
+                {@render nonPostItemView({ item })}
+              {/if}
 
-            {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
-              <SwipeIndicator locale={config.settings.locale} />
-            {/if}
-          </div>
-        {/snippet}
-      </PlayerSlider>
+              {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
+                <SwipeIndicator locale={config.settings.locale} />
+              {/if}
+            </div>
+          {/snippet}
+        </PlayerSlider>
+      </div>
       <ControlsAndAttachments config={config} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />
@@ -242,6 +250,14 @@ const variables = $derived.by(() => {
     padding: 0;
   }
 }
+.content-player__slider {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
 .content-player__watermark {
   position: absolute;
   bottom: 5rem;
@@ -256,4 +272,7 @@ const variables = $derived.by(() => {
   position: relative;
   opacity: var(--content-player--elements-opacity);
   transition: opacity 0.3s ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }</style>

package/dist/media-center/categories-following/mock-categories-following-handler.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IContentCategoryFollowingHandler } from './types';
+export declare class MockCategoryFollowingProvider implements IContentCategoryFollowingHandler {
+    private categoriesMap;
+    getIsFollowed: (categoryId: string) => Promise<{
+        readonly isFollowed: boolean;
+    }>;
+    toggleFollow: (categoryId: string) => void;
+}

package/dist/media-center/categories-following/mock-categories-following-handler.svelte.js

@@ -0,0 +1,31 @@
+export class MockCategoryFollowingProvider {
+    categoriesMap = $state([]);
+    getIsFollowed = (categoryId) => {
+        const entry = this.categoriesMap.find((c) => c.id === categoryId);
+        if (entry) {
+            return Promise.resolve({
+                get isFollowed() {
+                    return entry.isFollowed;
+                }
+            });
+        }
+        else {
+            const newEntry = { id: categoryId, isFollowed: Math.random() < 0.5 };
+            this.categoriesMap.push(newEntry);
+            return Promise.resolve({
+                get isFollowed() {
+                    return newEntry.isFollowed;
+                }
+            });
+        }
+    };
+    toggleFollow = (categoryId) => {
+        const entry = this.categoriesMap.find((c) => c.id === categoryId);
+        if (entry) {
+            entry.isFollowed = !entry.isFollowed;
+        }
+        else {
+            this.categoriesMap.push({ id: categoryId, isFollowed: true });
+        }
+    };
+}

package/dist/media-center/config/internal-media-center-config.d.ts

@@ -5,6 +5,6 @@ export declare class InternalMediaCenterConfig implements IMediaCenterConfig {
     streamPlayer: IMediaCenterConfig['streamPlayer'];
     handlers: IMediaCenterConfig['handlers'];
     private graphql;
-    constructor(mediaPageId: string, graphqlOrigin?: string);
+    constructor(mediaPageId: string, graphqlOrigin?: string, testingStuff?: boolean);
     getConfig: IMediaCenterConfig['getConfig'];
 }

package/dist/media-center/config/internal-media-center-config.js

@@ -1,5 +1,7 @@
 import { PostType, Status, StreamStatus } from '../../core/enums';
 import { createLocalGQLClient } from '../../core/graphql';
+import { MockCategoryFollowingProvider } from '../categories-following/mock-categories-following-handler.svelte';
+import { MockPostSocialInteractionsHandler } from '../../posts/social-interactions/mock-post-social-interactions-handler.svelte';
 import { mapToShortVideoPlayerModel } from '../../short-videos/short-videos-player/mapper';
 import { InternalStreamPlayerDataProvider } from '../../streams/stream-player/internal-stream-player-data-provider';
 import { InternalMediaCenterAnalyticsHandler } from './internal-media-center-analytics-handler';
@@ -10,7 +12,7 @@ export class InternalMediaCenterConfig {
     streamPlayer;
     handlers;
     graphql;
-    constructor(mediaPageId, graphqlOrigin) {
+    constructor(mediaPageId, graphqlOrigin, testingStuff) {
         this.mediaPageId = mediaPageId;
         this.graphql = createLocalGQLClient(graphqlOrigin);
         this.shortVideosPlayer = {
@@ -63,7 +65,9 @@ export class InternalMediaCenterConfig {
             streamPlayerDataProvider: new InternalStreamPlayerDataProvider({ graphql: this.graphql })
         };
         this.handlers = {
-            analyticsHandler: new InternalMediaCenterAnalyticsHandler(graphqlOrigin)
+            analyticsHandler: new InternalMediaCenterAnalyticsHandler(graphqlOrigin),
+            categoriesFollowingHandler: testingStuff ? new MockCategoryFollowingProvider() : undefined,
+            socialInteractionsHandler: testingStuff ? new MockPostSocialInteractionsHandler() : undefined
         };
     }
     getConfig = async () => {

package/dist/media-center/media-center/category-following-wrapper.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Icon } from '../../ui/icon';
+import IconStarFilled from '@fluentui/svg-icons/icons/star_20_filled.svg?raw';
+import IconStar from '@fluentui/svg-icons/icons/star_20_regular.svg?raw';
+import { onMount } from 'svelte';
+let { categoryId, followingHandler, children, invertedOrientation } = $props();
+let isFollowedStore = $state.raw({
+    get isFollowed() {
+        return false;
+    }
+});
+onMount(() => __awaiter(void 0, void 0, void 0, function* () {
+    if (!followingHandler) {
+        return;
+    }
+    isFollowedStore = yield followingHandler.getIsFollowed(categoryId);
+}));
+const handleToggleFollow = (e) => __awaiter(void 0, void 0, void 0, function* () {
+    e.stopPropagation();
+    if (!followingHandler) {
+        return;
+    }
+    yield followingHandler.toggleFollow(categoryId);
+});
+</script>
+
+{#if !followingHandler}
+  {@render children()}
+{:else}
+  <div class="desktop-category-following-wrapper" class:desktop-category-following-wrapper--inverted-orientation={invertedOrientation}>
+    {@render children()}
+    <button type="button" class="desktop-category-following-wrapper__toggle-button" onclick={handleToggleFollow}>
+      <Icon src={isFollowedStore.isFollowed ? IconStarFilled : IconStar} />
+    </button>
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.desktop-category-following-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.desktop-category-following-wrapper--inverted-orientation {
+  flex-direction: row-reverse;
+}
+.desktop-category-following-wrapper__toggle-button {
+  --icon--size: 1rem;
+  --icon--color: #00b8d8;
+  height: max-content;
+  line-height: 0;
+}</style>

package/dist/media-center/media-center/category-following-wrapper.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { IContentCategoryFollowingHandler } from '..';
+import { type Snippet } from 'svelte';
+type Props = {
+    categoryId: string;
+    followingHandler?: IContentCategoryFollowingHandler;
+    children: Snippet;
+    invertedOrientation?: boolean;
+};
+declare const CategoryFollowingWrapper: import("svelte").Component<Props, {}, "">;
+type CategoryFollowingWrapper = ReturnType<typeof CategoryFollowingWrapper>;
+export default CategoryFollowingWrapper;

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -169,7 +169,10 @@ const onWidthAnchorMounted = (node) => {
   {#snippet controlsPanel()}
     {#if !isMobileView}
       <div class="media-center-controls-panel">
-        <DesktopCategoriesSelector handler={handler} on={{ categorySelected: selectCategory }} />
+        <DesktopCategoriesSelector
+          handler={handler}
+          followingHandler={config?.handlers?.categoriesFollowingHandler}
+          on={{ categorySelected: selectCategory }} />
         <button
           type="button"
           class="media-center-controls-panel__button"
@@ -251,6 +254,7 @@ const onWidthAnchorMounted = (node) => {
         <MobileControlsPanel
           mediaCenterHandler={handler}
           discoverHandler={discoverHandler}
+          followingHandler={config?.handlers?.categoriesFollowingHandler}
           localization={localization}
           extraActions={extraMobileControlsPanelActions}
           on={{ categorySelected: selectCategory, toggleDiscover, externalActionExecuted: handleExternalActionExecuted }} />

package/dist/media-center/media-center/desktop-categories-selector.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { Dropdown } from '../../ui/dropdown';
 import { Icon } from '../../ui/icon';
+import { default as ButtonWrapper } from './category-following-wrapper.svelte';
 import IconTextColumnThree from '@fluentui/svg-icons/icons/text_column_three_20_regular.svg?raw';
-let { handler, on } = $props();
+let { handler, followingHandler, on } = $props();
 </script>
 
 <Dropdown>
@@ -13,22 +14,26 @@ let { handler, on } = $props();
   <div class="desktop-categories-selector">
     {#each handler.categories as category (category.id)}
       <div>
-        <button
-          type="button"
-          class="desktop-categories-selector__category"
-          class:desktop-categories-selector__category--active={handler.selectedCategoryId === category.id}
-          title={category.name}
-          onclick={() => on.categorySelected(category.id)}>{category.name}</button>
+        <ButtonWrapper categoryId={category.id} followingHandler={followingHandler}>
+          <button
+            type="button"
+            class="desktop-categories-selector__category"
+            class:desktop-categories-selector__category--active={handler.selectedCategoryId === category.id}
+            title={category.name}
+            onclick={() => on.categorySelected(category.id)}>{category.name}</button>
+        </ButtonWrapper>
 
         {#if category.children.length > 0}
           <div class="desktop-categories-selector__sub-categories">
             {#each category.children as subcategory (subcategory.id)}
-              <button
-                type="button"
-                class="desktop-categories-selector__sub-category"
-                class:desktop-categories-selector__sub-category--active={handler.selectedCategoryId === subcategory.id}
-                title={subcategory.name}
-                onclick={() => on.categorySelected(subcategory.id)}>{subcategory.name}</button>
+              <ButtonWrapper categoryId={subcategory.id} followingHandler={followingHandler}>
+                <button
+                  type="button"
+                  class="desktop-categories-selector__sub-category"
+                  class:desktop-categories-selector__sub-category--active={handler.selectedCategoryId === subcategory.id}
+                  title={subcategory.name}
+                  onclick={() => on.categorySelected(subcategory.id)}>{subcategory.name}</button>
+              </ButtonWrapper>
             {/each}
           </div>
         {/if}

package/dist/media-center/media-center/desktop-categories-selector.svelte.d.ts

@@ -1,6 +1,8 @@
+import type { IContentCategoryFollowingHandler } from '..';
 import type { MediaCenterHandler } from './media-center-handler.svelte';
 type Props = {
     handler: MediaCenterHandler;
+    followingHandler?: IContentCategoryFollowingHandler;
     on: {
         categorySelected: (categoryId: string) => void;
     };

package/dist/media-center/media-center/mobile-controls-panel.svelte

@@ -3,12 +3,13 @@ import { compactNumber } from '../../core/utils/compact-number';
 import { Icon } from '../../ui/icon';
 import { ImageRound } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
+import { default as ButtonWrapper } from './category-following-wrapper.svelte';
 import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
 import { MediaCenterLocalization } from './media-center-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
 import { slide } from 'svelte/transition';
-let { mediaCenterHandler, discoverHandler, localization, extraActions, on } = $props();
+let { mediaCenterHandler, discoverHandler, followingHandler, localization, extraActions, on } = $props();
 const target = $derived.by(() => mediaCenterHandler.targetData);
 const generateCategoriesMap = () => {
     const expanded = {};
@@ -83,17 +84,19 @@ const handleCategoryExpaned = (e, categoryId) => {
           tabindex="0">
           {category.name}
         </div>
-        <button
-          type="button"
-          class="selector-item__collapser"
-          class:selector-item__collapser--hidden={!category.children.length}
-          onclick={(e) => handleCategoryExpaned(e, category.id)}>
-          {#if categoriesExpandedMap[category.id]}
-            <Icon src={IconChevronDown} />
-          {:else}
-            <Icon src={IconChevronRight} />
-          {/if}
-        </button>
+        <ButtonWrapper categoryId={category.id} followingHandler={followingHandler} invertedOrientation={true}>
+          <button
+            type="button"
+            class="selector-item__collapser"
+            class:selector-item__collapser--hidden={!category.children.length}
+            onclick={(e) => handleCategoryExpaned(e, category.id)}>
+            {#if categoriesExpandedMap[category.id]}
+              <Icon src={IconChevronDown} />
+            {:else}
+              <Icon src={IconChevronRight} />
+            {/if}
+          </button>
+        </ButtonWrapper>
       </div>
       {#if categoriesExpandedMap[category.id]}
         <div transition:slide|local>
@@ -108,6 +111,11 @@ const handleCategoryExpaned = (e, categoryId) => {
                 tabindex="0">
                 {subcategory.name}
               </div>
+              <ButtonWrapper categoryId={subcategory.id} followingHandler={followingHandler} invertedOrientation={true}>
+                <button type="button" class="selector-item__collapser selector-item__collapser--hidden">
+                  <Icon src={IconChevronRight} />
+                </button>
+              </ButtonWrapper>
             </div>
           {/each}
         </div>

package/dist/media-center/media-center/mobile-controls-panel.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { IContentCategoryFollowingHandler } from '..';
 import type { ExtraActionDefinition } from '../model/types';
 import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
 import type { MediaCenterHandler } from './media-center-handler.svelte';
@@ -5,6 +6,7 @@ import { MediaCenterLocalization } from './media-center-localization';
 type Props = {
     mediaCenterHandler: MediaCenterHandler;
     discoverHandler: DiscoverPanelHandler;
+    followingHandler?: IContentCategoryFollowingHandler;
     localization: MediaCenterLocalization;
     extraActions: ExtraActionDefinition[];
     on: {

package/dist/posts/social-interactions/mock-post-social-interactions-handler.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { IPostSocialInteractionsHandler } from './types';
+export declare class MockPostSocialInteractionsHandler implements IPostSocialInteractionsHandler {
+    private postsMap;
+    getIsLiked: (postId: string) => Promise<{
+        readonly isLiked: boolean;
+    }>;
+    toggleLike: (postId: string) => void;
+    share: (postId: string) => void;
+}

package/dist/posts/social-interactions/mock-post-social-interactions-handler.svelte.js

@@ -0,0 +1,34 @@
+export class MockPostSocialInteractionsHandler {
+    postsMap = $state([]);
+    getIsLiked = (postId) => {
+        const entry = this.postsMap.find((c) => c.id === postId);
+        if (entry) {
+            return Promise.resolve({
+                get isLiked() {
+                    return entry.isLiked;
+                }
+            });
+        }
+        else {
+            const newEntry = { id: postId, isLiked: Math.random() < 0.5 };
+            this.postsMap.push(newEntry);
+            return Promise.resolve({
+                get isLiked() {
+                    return newEntry.isLiked;
+                }
+            });
+        }
+    };
+    toggleLike = (postId) => {
+        const entry = this.postsMap.find((c) => c.id === postId);
+        if (entry) {
+            entry.isLiked = !entry.isLiked;
+        }
+        else {
+            this.postsMap.push({ id: postId, isLiked: true });
+        }
+    };
+    share = (postId) => {
+        console.log('onShare', postId);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",