@streamscloud/embeddable 6.0.0 → 6.0.1

package/dist/core/browser.d.ts

@@ -0,0 +1 @@
+export declare const runningInBrowser: () => boolean;

package/dist/core/browser.js

@@ -0,0 +1 @@
+export const runningInBrowser = () => !import.meta.env.SSR;

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

@@ -10,13 +10,15 @@
 import { Utils } from '../../core/utils';
 import { default as ShortVideosPlayerView } from '../../short-videos/short-videos-player/short-videos-player-view.svelte';
 import { default as StreamPlayer } from '../../streams/stream-player/stream-player.svelte';
-import { Icon } from '../../ui/icon';
+import { Dropdown } from '../../ui/dropdown';
+import { Icon, IconColor } from '../../ui/icon';
 import { Loading } from '../../ui/loading';
 import { MediaCenterLocalization } from './media-center-localization';
 import { default as Overview } from './overview.svelte';
 import { makeShortVideosProvider } from './short-video-resources-generator';
 import { MediaCenterMode } from './types';
 import IconTextColumnThree from '@fluentui/svg-icons/icons/text_column_three_20_regular.svg?raw';
+import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
 import { onMount } from 'svelte';
 import { fade } from 'svelte/transition';
 let { dataProvider, playerProps, localization: localizationInit = 'en' } = $props();
@@ -139,21 +141,21 @@ const uniqueById = (arr) => {
     }
     return res;
 };
-let wrapperRef = null;
 let scrollRef = null;
 let scrollHasLeft = $state(false);
 let scrollHasRight = $state(false);
 const mounted = (node, callback) => {
-    wrapperRef = node;
-    requestAnimationFrame(() => {
+    const scrollResizeObserver = new ResizeObserver(updateScrollShadows);
+    scrollResizeObserver.observe(node);
+    const heightResizeObserver = new ResizeObserver(() => {
         headerHeight = node.clientHeight;
         callback({ height: headerHeight });
     });
-    const ro = new ResizeObserver(updateScrollShadows);
-    ro.observe(wrapperRef);
+    heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            ro.disconnect();
+            scrollResizeObserver.disconnect();
+            heightResizeObserver.disconnect();
         }
     };
 };
@@ -182,7 +184,6 @@ const onScrollMounted = (node) => {
         <button type="button" class="media-center__overview-button" onclick={toggleOverview}>
           <Icon src={IconTextColumnThree} />
         </button>
-
         <div
           class="media-center__scroll"
           class:media-center__scroll--has-left={scrollHasLeft}
@@ -202,6 +203,28 @@ const onScrollMounted = (node) => {
           </div>
         </div>
       </div>
+      <div class="media-center__overview-dropdown">
+        <Dropdown>
+          {#snippet trigger()}
+            <div class="media-center__overview-dropdown-trigger">
+              <Icon src={IconLineHorizontal3} color={IconColor.White}></Icon>
+            </div>
+          {/snippet}
+          <div class="media-center__overview-dropdown-content">
+            <button type="button" class="media-center__category-button media-center__category-button--dropdown" onclick={toggleOverview}>
+              {localization.overviewLabel}
+            </button>
+            {#each categories as category (category.id)}
+              <button
+                type="button"
+                class="media-center__category-button media-center__category-button--dropdown"
+                class:media-center__category-button--active={selectedCategoryId === category.id}
+                title={category.name}
+                onclick={() => selectCategory(category.id)}>{category.name}</button>
+            {/each}
+          </div>
+        </Dropdown>
+      </div>
     </div>
   {/snippet}
   {#if shortVideoProps}
@@ -246,12 +269,6 @@ const onScrollMounted = (node) => {
   right: 0;
   z-index: 1;
   pointer-events: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .media-center {
-    padding-left: 1.25rem;
-  }
 }
 .media-center__row {
   pointer-events: auto;
@@ -260,6 +277,12 @@ const onScrollMounted = (node) => {
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .media-center__row {
+    display: none;
+  }
 }
 .media-center__scroll {
   pointer-events: auto;
@@ -329,8 +352,82 @@ const onScrollMounted = (node) => {
   background-color: rgba(255, 255, 255, 0.9);
   color: #000000;
 }
+.media-center__category-button--dropdown {
+  width: max-content;
+}
+.media-center__overview-dropdown {
+  display: none;
+  pointer-events: auto;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .media-center__overview-dropdown {
+    display: block;
+    position: absolute;
+    top: 0.9375rem;
+    left: 0.625rem;
+    z-index: 1;
+  }
+}
+.media-center__overview-dropdown-trigger {
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--size: 1.75rem;
+}
+.media-center__overview-dropdown-trigger:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
+.media-center__overview-dropdown-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
 
 .media-center-overview {
   position: absolute;
   inset: 0;
+  container-type: inline-size;
+  overflow-y: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+}
+.media-center-overview::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.media-center-overview::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+.media-center-overview:hover {
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
+  scrollbar-width: thin;
+}
+.media-center-overview:hover::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.media-center-overview:hover::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
+}
+@media (max-width: 576px) {
+  .media-center-overview {
+    top: 5rem !important;
+  }
 }</style>

package/dist/media-center/media-center/media-center-localization.d.ts

@@ -2,10 +2,12 @@ import { type Locale } from '../../core/locale';
 import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
 export interface IMediaCenterLocalization {
     shortVideosSectionTitle?: string;
+    overviewLabel?: string;
     productLocalization?: IProductCardLocalization | Locale;
 }
 export declare class MediaCenterLocalization {
     shortVideosSectionTitle: string;
+    overviewLabel: string;
     productLocalization: IProductCardLocalization | Locale;
     constructor(init: IMediaCenterLocalization | Locale);
 }

package/dist/media-center/media-center/media-center-localization.js

@@ -1,9 +1,11 @@
 import { isLocale } from '../../core/locale';
 export class MediaCenterLocalization {
     shortVideosSectionTitle;
+    overviewLabel;
     productLocalization;
     constructor(init) {
         this.shortVideosSectionTitle = isLocale(init) ? loc.shortVideosSectionTitle[init] : init.shortVideosSectionTitle || loc.shortVideosSectionTitle.en;
+        this.overviewLabel = isLocale(init) ? loc.overviewLabel[init] : init.overviewLabel || loc.overviewLabel.en;
         this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
     }
 }
@@ -11,5 +13,9 @@ const loc = {
     shortVideosSectionTitle: {
         en: 'Popular Short Videos',
         no: 'Populære korte videoer'
+    },
+    overviewLabel: {
+        en: 'Overview',
+        no: 'Oversikt'
     }
 };

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

@@ -81,6 +81,12 @@ const shortVideoSectionItems = $derived.by(() => {
   display: flex;
   justify-content: center;
   padding: 1.25rem 1.875rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .media-center-overview {
+    padding: 0.625rem 0.9375rem;
+  }
 }
 .media-center-overview__content {
   width: 100%;
@@ -121,20 +127,23 @@ const shortVideoSectionItems = $derived.by(() => {
   display: grid;
   gap: 2rem 1.25rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
 }
-@media (max-width: 768px) {
+@container (width < 992px) {
   .media-center-overview__section-content {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
-@media (max-width: 576px) {
+@container (width < 768px) {
   .media-center-overview__section-content {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
-@media (max-width: 480px) {
+@container (width < 576px) {
   .media-center-overview__section-content {
-    grid-template-columns: 2fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 .media-center-overview__card-wrapper {

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

@@ -13,7 +13,7 @@ const changeShowAttachments = () => {
 </script>
 
 {#if uiManager.viewInitialized && !uiManager.showShortVideoOverlay}
-  <div class="short-videos-player-controls">
+  <div class="short-videos-player-controls" class:short-videos-player-controls--with-logo={!!playerLogo}>
     <div class="short-videos-player-controls__left">
       {#if shortVideo}
         <div class="short-videos-player-controls__short-video-hub">
@@ -86,6 +86,9 @@ const changeShowAttachments = () => {
   padding: var(--short-videos-player--controls--padding);
   container-type: inline-size;
 }
+.short-videos-player-controls--with-logo {
+  padding-top: 0;
+}
 .short-videos-player-controls__left {
   display: flex;
   flex-direction: column;
@@ -145,6 +148,7 @@ const changeShowAttachments = () => {
   height: var(--short-videos-player--media-center-header--height);
   min-height: var(--short-videos-player--media-center-header--height);
   max-height: var(--short-videos-player--media-center-header--height);
+  min-height: 4.375rem;
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">import { runningInBrowser } from '../../core/browser';
+import { isIgnored } from './dropdown-ignore';
+import { Icon } from '../icon';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import { createPopper } from '@popperjs/core';
+import { onDestroy } from 'svelte';
+let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 8, boundaryMargin = 8, on, children, trigger, isOpenRequested } = $props();
+$effect(() => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.mounted) === null || _a === void 0 ? void 0 : _a.call(on, {
+        toggleOpen: (value) => {
+            if (value === undefined) {
+                if (opened) {
+                    close();
+                }
+                else {
+                    open();
+                }
+            }
+            else {
+                if (!value) {
+                    close();
+                }
+                else {
+                    open();
+                }
+            }
+        }
+    });
+});
+const id = Math.random();
+let opened = $state(false);
+$effect(() => {
+    var _a, _b;
+    if (opened) {
+        (_a = on === null || on === void 0 ? void 0 : on.opened) === null || _a === void 0 ? void 0 : _a.call(on);
+    }
+    else {
+        (_b = on === null || on === void 0 ? void 0 : on.closed) === null || _b === void 0 ? void 0 : _b.call(on);
+    }
+});
+$effect(() => {
+    popper === null || popper === void 0 ? void 0 : popper.setOptions({ placement: position });
+});
+$effect(() => {
+    if (isOpenRequested) {
+        open();
+    }
+});
+let triggerRef = $state(null);
+let dropdownRef;
+let popper;
+onDestroy(() => {
+    removeWindowClickListener();
+});
+const open = () => {
+    opened = true;
+    window.addEventListener('click', close);
+};
+const close = () => {
+    opened = false;
+    removeWindowClickListener();
+};
+const removeWindowClickListener = () => {
+    if (runningInBrowser()) {
+        window.removeEventListener('click', close);
+    }
+};
+const handleClick = (event) => {
+    event.stopPropagation();
+    if (disabled) {
+        return;
+    }
+    if (!opened) {
+        open();
+        return;
+    }
+    const checkCanClose = (node) => {
+        if (keepDropdownOpen) {
+            return false;
+        }
+        while (node && node !== dropdownRef) {
+            if (isIgnored(node) || node.classList.contains('flatpickr-calendar')) {
+                return false;
+            }
+            node = node.parentElement;
+        }
+        return true;
+    };
+    if (checkCanClose(event.target)) {
+        close();
+    }
+};
+const initPopper = (node, _triggerEl) => {
+    popper = createPopper(_triggerEl, node, {
+        placement: position,
+        strategy: fixedPosition ? 'fixed' : 'absolute',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: () => {
+                        return [0, offset];
+                    }
+                }
+            },
+            { name: 'eventListeners', enabled: opened },
+            { name: 'flip' },
+            {
+                name: 'preventOverflow',
+                options: {
+                    boundary: document.body,
+                    padding: boundaryMargin
+                }
+            }
+        ]
+    });
+    return {
+        update(_triggerEl) {
+            popper.state.elements.reference = _triggerEl;
+            popper.update();
+        },
+        destroy() {
+            popper.destroy();
+        }
+    };
+};
+</script>
+
+<div class="dropdown" class:dropdown--disabled={disabled} onclick={handleClick} onkeydown={() => ({})} bind:this={dropdownRef} role="none">
+  <button type="button" class="dropdown__trigger" bind:this={triggerRef}>
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <Icon src={IconChevronDown} />
+    {/if}
+  </button>
+  {#if opened}
+    <div use:initPopper={triggerRef} class="dropdown__content" role="tooltip" tabindex="-1">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.dropdown {
+  --_dropdown--width: var(--dropdown--width, auto);
+  --_dropdown--content--background-color: var(--dropdown--content--background-color, transparent);
+  --_dropdown--content--box-shadow: var(--dropdown--content--box-shadow, none);
+  height: 100%;
+  width: var(--_dropdown--width);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.dropdown :global([contenteditable]) {
+  user-select: text;
+}
+.dropdown__trigger {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+.dropdown--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.dropdown__content {
+  box-shadow: var(--_dropdown--content--box-shadow);
+  background: var(--_dropdown--content--background-color);
+  width: max-content;
+  z-index: 999;
+}
+.dropdown :global([data-popper-escaped]) {
+  visibility: hidden !important;
+}</style>

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

@@ -0,0 +1,23 @@
+import type { DropdownPosition } from './index';
+import { type Snippet } from 'svelte';
+type Props = {
+    position?: DropdownPosition;
+    disabled?: boolean;
+    keepDropdownOpen?: boolean;
+    fixedPosition?: boolean;
+    offset?: number;
+    boundaryMargin?: number;
+    on?: {
+        opened?: () => void;
+        closed?: () => void;
+        mounted?: (callbacks: {
+            toggleOpen: (value?: boolean) => void;
+        }) => void;
+    };
+    children: Snippet;
+    trigger?: Snippet;
+    isOpenRequested?: boolean;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/dropdown/dropdown-ignore.d.ts

@@ -0,0 +1,6 @@
+/** @type {import('svelte/action').Action}  */
+export declare const dropdownIgnore: (node: HTMLElement, value?: boolean) => {
+    destroy(): void;
+};
+export declare const ignoreAttribute = "dropdownIgnore";
+export declare const isIgnored: (node: HTMLElement) => boolean;

package/dist/ui/dropdown/dropdown-ignore.js

@@ -0,0 +1,11 @@
+/** @type {import('svelte/action').Action}  */
+export const dropdownIgnore = (node, value = true) => {
+    node.dataset[ignoreAttribute] = value.toString();
+    return {
+        destroy() {
+            // the node has been removed from the DOM
+        }
+    };
+};
+export const ignoreAttribute = 'dropdownIgnore';
+export const isIgnored = (node) => node.dataset[ignoreAttribute] === 'true';

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

@@ -0,0 +1,3 @@
+export { default as Dropdown } from './cmp.dropdown.svelte';
+export type DropdownPosition = import('@popperjs/core').Placement;
+export { dropdownIgnore } from './dropdown-ignore';

package/dist/ui/dropdown/index.js

@@ -0,0 +1,2 @@
+export { default as Dropdown } from './cmp.dropdown.svelte';
+export { dropdownIgnore } from './dropdown-ignore';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
@@ -152,5 +152,8 @@
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8"
   }
 }