@streamscloud/embeddable 8.0.1 → 8.2.0

package/dist/content-player/overview-panel.svelte

@@ -28,19 +28,22 @@ const buttonVariables = $derived.by(() => {
 });
 </script>
 
-{#if !uiManager.overviewCollapsed && !contentFaded}
-  <div
-    class="overview-panel"
-    transition:slideHorizontally|local
-    use:overviewAttached
-    style={panelVariables}
-    onclick={handlePanelClick}
-    onkeydown={() => {}}
-    role="none">
-    <div class="overview-panel__content" onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
-      {@render children()}
+<!--Double if for correct behavior of slideHorizontally-->
+{#if uiManager.viewInitialized}
+  {#if !uiManager.overviewCollapsed && !contentFaded}
+    <div
+      class="overview-panel"
+      transition:slideHorizontally|local
+      use:overviewAttached
+      style={panelVariables}
+      onclick={handlePanelClick}
+      onkeydown={() => {}}
+      role="none">
+      <div class="overview-panel__content" onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
+        {@render children()}
+      </div>
     </div>
-  </div>
+  {/if}
 {/if}
 
 <button

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 }} />
@@ -288,7 +292,7 @@ const onWidthAnchorMounted = (node) => {
   pointer-events: auto;
   position: relative;
   flex: 1 1 auto;
-  max-width: max-content;
+  max-width: 100%;
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
@@ -318,9 +322,11 @@ const onWidthAnchorMounted = (node) => {
   gap: 0.375rem;
   justify-content: center;
   align-items: center;
-  max-width: 12.5rem;
+  max-width: 9.375rem;
+  flex: 0 0 auto;
+  min-width: auto;
   width: auto;
-  min-width: 0;
+  white-space: nowrap;
   border-radius: 0.875rem;
   background-color: rgba(0, 0, 0, 0.6);
   color: #f2f2f2;
@@ -368,6 +374,7 @@ const onWidthAnchorMounted = (node) => {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
+  min-width: 0;
 }
 
 .media-center-overlay {

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/dist/ui/video/cmp.video.svelte

@@ -317,7 +317,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--poster--media-fit: var(--video--poster--media-fit, contain);
   height: 100%;
   min-height: 100%;
   max-height: 100%;

package/package.json

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