@streamscloud/kit 0.0.1-1771006476137 → 0.0.1-1771075495185

package/dist/ui/player/buttons/cmp.mobile-player-buttons.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">import { Icon } from '../../icon';
+let { actions } = $props();
+</script>
+
+<div class="mobile-player-buttons">
+  {#each actions as action (action.icon)}
+    <button type="button" class="mobile-player-buttons__action" disabled={action.disabled} onclick={action.callback}>
+      <span class="mobile-player-buttons__action-icon">
+        <Icon src={action.icon} color={action.iconColor} />
+      </span>
+    </button>
+  {/each}
+</div>
+
+<style>.mobile-player-buttons {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  pointer-events: auto;
+}
+.mobile-player-buttons__action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  --sc-kit--icon--color: #ffffff;
+  --sc-kit--icon--size: 2rem;
+  --sc-kit--icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+}
+.mobile-player-buttons__action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.mobile-player-buttons__action-icon {
+  display: block;
+}</style>

package/dist/ui/player/buttons/cmp.mobile-player-buttons.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PlayerButtonDef } from './types';
+type Props = {
+    actions: PlayerButtonDef[];
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/player/buttons/cmp.player-buttons.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">import { Icon } from '../../icon';
+let { actions, scaleEffect = false, zoom = 1 } = $props();
+</script>
+
+{#if actions.length === 1}
+  {@const action = actions[0]}
+  <button
+    type="button"
+    class="player-button"
+    style:zoom={zoom}
+    class:player-button--scale-effect={scaleEffect}
+    disabled={action.disabled}
+    onclick={action.callback}>
+    <span class="player-button__icon">
+      <Icon src={action.icon} color={action.iconColor} />
+    </span>
+  </button>
+{:else if actions.length > 1}
+  <div class="player-buttons" style:zoom={zoom}>
+    {#each actions as action (action.icon)}
+      <button
+        type="button"
+        class="player-buttons__action"
+        class:player-buttons__action--scale-effect={scaleEffect}
+        disabled={action.disabled}
+        onclick={action.callback}>
+        <span class="player-buttons__action-icon">
+          <Icon src={action.icon} color={action.iconColor} />
+        </span>
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>.player-button {
+  --_player-button--color: var(--sc-kit--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
+  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));
+  --_player-button--icon-scale: 1;
+  pointer-events: auto;
+  padding: 0.625rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--_player-button--color--inactive);
+  transition: background-color 0.5s;
+  border-radius: 50%;
+  color: #ffffff;
+  --sc-kit--icon--color: #ffffff;
+  --sc-kit--icon--size: 1.75rem;
+}
+.player-button:hover:not(:disabled) {
+  background-color: var(--_player-button--color);
+}
+.player-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.player-button--scale-effect:hover:not(:disabled) {
+  --_player-button--icon-scale: 1.2;
+}
+.player-button__icon {
+  display: block;
+  transform: scale(var(--_player-button--icon-scale));
+  transition: 0.3s;
+}
+.player-button {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .player-button {
+    padding: 0.5rem;
+    --sc-kit--icon--size: 1.5rem;
+  }
+}
+
+.player-buttons {
+  --_player-button--color: var(--sc-kit--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
+  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 1.25rem;
+  background: var(--_player-button--color--inactive);
+  padding: 0.4375rem 0.0625rem;
+  pointer-events: auto;
+}
+.player-buttons__action {
+  --_player-button--icon-scale: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5625rem;
+  border-radius: 1.25rem;
+  color: #ffffff;
+  --sc-kit--icon--color: #ffffff;
+  --sc-kit--icon--size: 1.75rem;
+  transition: background-color 0.5s;
+}
+.player-buttons__action:hover:not(:disabled) {
+  background-color: var(--_player-button--color);
+}
+.player-buttons__action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.player-buttons__action--scale-effect:hover:not(:disabled) {
+  --_player-button--icon-scale: 1.2;
+  background-color: transparent;
+}
+.player-buttons__action-icon {
+  display: block;
+  transform: scale(var(--_player-button--icon-scale));
+  transition: 0.3s;
+}
+.player-buttons {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .player-buttons {
+    border-radius: 0.9375rem;
+    padding: 0.25rem 0.0625rem;
+  }
+  .player-buttons__action {
+    --sc-kit--icon--size: 1.5rem;
+  }
+}</style>

package/dist/ui/player/buttons/cmp.player-buttons.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { PlayerButtonDef } from './types';
+type Props = {
+    actions: PlayerButtonDef[];
+    scaleEffect?: boolean;
+    zoom?: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/player/buttons/cmp.responsive-player-buttons.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
+import { default as PlayerButtons } from './cmp.player-buttons.svelte';
+let { scaleEffect = false, actions } = $props();
+</script>
+
+<div class="desktop-controls">
+  <PlayerButtons actions={actions} scaleEffect={scaleEffect} />
+</div>
+
+<div class="mobile-controls">
+  <MobilePlayerButtons actions={actions} />
+</div>
+
+<style>.desktop-controls {
+  display: contents;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .desktop-controls {
+    display: none;
+  }
+}
+
+.mobile-controls {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .mobile-controls {
+    display: contents;
+  }
+}</style>

package/dist/ui/player/buttons/cmp.responsive-player-buttons.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PlayerButtonDef } from './types';
+type Props = {
+    actions: PlayerButtonDef[];
+    scaleEffect?: boolean;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/player/buttons/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
+export { default as PlayerButtons } from './cmp.player-buttons.svelte';
+export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';
+export type { PlayerButtonDef } from './types';

package/dist/ui/player/buttons/index.js

@@ -0,0 +1,3 @@
+export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
+export { default as PlayerButtons } from './cmp.player-buttons.svelte';
+export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';

package/dist/ui/player/buttons/types.d.ts

@@ -0,0 +1,7 @@
+import type { IconColor } from '../../icon';
+export type PlayerButtonDef = {
+    icon: string;
+    iconColor?: IconColor;
+    callback: () => void;
+    disabled?: boolean;
+};

package/dist/ui/player/buttons/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/player/carousel/carousel-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class CarouselLocalization {
+    get nOfM(): (n: number, m: number) => string;
+}

package/dist/ui/player/carousel/carousel-localization.js

@@ -0,0 +1,12 @@
+import { getLocale } from '../../../locale';
+export class CarouselLocalization {
+    get nOfM() {
+        return loc.nOfM[getLocale()];
+    }
+}
+const loc = {
+    nOfM: {
+        en: (n, m) => `${n} of ${m}`,
+        no: (n, m) => `${n} av ${m}`
+    }
+};

package/dist/ui/player/carousel/cmp.carousel.svelte

@@ -0,0 +1,418 @@
+<script lang="ts" generics="T">import { Utils, isBrowser } from '../../../core/utils';
+import { Icon } from '../../icon';
+import { TouchSynchronizer } from '../utils';
+import { CarouselLocalization } from './carousel-localization';
+import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
+import { onDestroy, onMount, untrack } from 'svelte';
+let { items, mode = 'arrows-with-counts', initialIndex, autoSlideMs = 0, on, dot, children } = $props();
+const localization = new CarouselLocalization();
+const itemIndices = $derived(items.map((_, index) => index));
+const animationDuration = 300;
+let previousItems = $state.raw(undefined);
+let selectedIndex = $state(untrack(() => initialIndex));
+let animationIndex = $state(null);
+let interval;
+let slidesRef;
+let sliderWidth = $state(0);
+let swipeTransition = $state(0);
+let resizeObserver;
+onMount(() => {
+    notifyIndexChanged();
+    setTimeout(() => {
+        slidesRef?.classList.toggle('animate', false);
+    });
+    let touchStartX = 0;
+    let touchStartY = 0;
+    let touchMoveX = 0;
+    let touchStartTime = 0;
+    let swipeState = 'not-initialized';
+    slidesRef.addEventListener('touchstart', (e) => {
+        TouchSynchronizer.touchStarted(slidesRef);
+        slidesRef.classList.toggle('animate', false);
+        touchStartX = e.changedTouches[0].screenX;
+        touchStartY = e.changedTouches[0].screenY;
+        touchStartTime = Date.now();
+        swipeState = 'not-initialized';
+    }, { passive: true });
+    slidesRef.addEventListener('touchmove', (e) => {
+        if (swipeState === 'horizontal') {
+            e.preventDefault();
+            e.stopPropagation();
+            TouchSynchronizer.touchMovePropagationBlocked(slidesRef);
+        }
+        else if (swipeState === 'vertical') {
+            return;
+        }
+        const touchCurrentX = e.changedTouches[0].screenX;
+        const touchCurrentY = e.changedTouches[0].screenY;
+        const diffX = Math.abs(touchCurrentX - touchStartX);
+        const diffY = Math.abs(touchCurrentY - touchStartY);
+        // Determine direction on first significant movement
+        if (diffX > 10 || diffY > 10) {
+            if (diffX > diffY) {
+                // Horizontal swipe - block vertical scroll
+                swipeState = 'horizontal';
+                e.preventDefault();
+                e.stopPropagation();
+                TouchSynchronizer.touchMovePropagationBlocked(slidesRef);
+                touchMoveX = touchCurrentX - touchStartX;
+                const basePosition = -sliderWidth * (animationIndex === null ? selectedIndex + 1 : animationIndex);
+                swipeTransition = basePosition + touchMoveX;
+            }
+            else {
+                // Vertical swipe - allow parent to handle
+                swipeState = 'vertical';
+            }
+        }
+    }, { passive: false });
+    slidesRef.addEventListener('touchend', (e) => {
+        const reset = () => {
+            swipeTransition = 0;
+            touchMoveX = 0;
+        };
+        if (swipeState !== 'horizontal') {
+            reset();
+            return;
+        }
+        // This is a horizontal swipe - block propagation
+        e.stopPropagation();
+        e.preventDefault();
+        slidesRef.classList.toggle('animate', true);
+        TouchSynchronizer.touchEndPropatationBlocked(slidesRef);
+        TouchSynchronizer.touchEnded(slidesRef);
+        const isFastSwipe = Date.now() - touchStartTime < 300;
+        if (!isFastSwipe && Math.abs(touchMoveX) < sliderWidth / 6) {
+            reset();
+            return;
+        }
+        if (touchMoveX < 0) {
+            loadNext();
+        }
+        else {
+            loadPrevious();
+        }
+        reset();
+    }, { passive: false });
+    slidesRef.addEventListener('transitionend', (e) => {
+        e.stopPropagation();
+        if (animationIndex !== null && animationIndex > items.length - 1) {
+            slidesRef.classList.toggle('animate', false);
+            animationIndex = null;
+        }
+        if (animationIndex !== null && animationIndex === 0) {
+            slidesRef.classList.toggle('animate', false);
+            animationIndex = null;
+        }
+        setTimeout(() => {
+            slidesRef?.classList.toggle('animate', true);
+        });
+    });
+    if (autoSlideMs) {
+        interval = window.setInterval(() => {
+            if (items?.length <= 1) {
+                return;
+            }
+            loadNext();
+        }, autoSlideMs);
+    }
+    sliderWidth = slidesRef.getBoundingClientRect().width;
+    let resizeTimeout = 0;
+    resizeObserver = new ResizeObserver(() => {
+        if (isBrowser() && resizeTimeout) {
+            window.clearTimeout(resizeTimeout);
+        }
+        slidesRef.classList.toggle('animate', false);
+        sliderWidth = slidesRef.getBoundingClientRect().width;
+        resizeTimeout = window.setTimeout(() => {
+            slidesRef?.classList.toggle('animate', true);
+        });
+    });
+    resizeObserver.observe(slidesRef);
+    if (isBrowser()) {
+        window.addEventListener(`keydown`, onKeyPress);
+    }
+});
+onDestroy(() => {
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+    }
+    if (isBrowser()) {
+        window.removeEventListener('keydown', onKeyPress);
+        if (interval) {
+            window.clearInterval(interval);
+        }
+    }
+});
+const onKeyPress = Utils.throttle((e) => {
+    if (e.key === 'ArrowLeft') {
+        loadPrevious();
+    }
+    if (e.key === 'ArrowRight') {
+        loadNext();
+    }
+}, animationDuration);
+const notifyIndexChanged = () => {
+    on?.indexChanged?.(selectedIndex);
+};
+notifyIndexChanged();
+const setIndex = (index) => {
+    if (index < 0) {
+        animationIndex = 0;
+        selectedIndex = items.length - 1;
+    }
+    else if (index > items.length - 1) {
+        animationIndex = index + 1;
+        selectedIndex = 0;
+    }
+    else {
+        animationIndex = null;
+        selectedIndex = index;
+    }
+    setTimeout(() => {
+        notifyIndexChanged();
+    }, 600);
+};
+const loadPrevious = Utils.throttle(() => {
+    setIndex(--selectedIndex);
+}, animationDuration);
+const loadNext = Utils.throttle(() => {
+    setIndex(++selectedIndex);
+}, animationDuration);
+$effect(() => {
+    if (previousItems && items !== previousItems) {
+        setIndex(0);
+    }
+    previousItems = items;
+});
+const slidesTranslateX = $derived(swipeTransition || (items.length > 1 ? -sliderWidth * (animationIndex === null ? selectedIndex + 1 : animationIndex) : 0));
+</script>
+
+<div
+  class="carousel"
+  class:carousel--arrows-and-dots={mode === 'arrows-and-dots'}
+  class:carousel--arrows-only={mode === 'arrows-only'}
+  class:carousel--dots-only={mode === 'dots-only'}
+  class:carousel--dots-only-below={mode === 'dots-only-below'}
+  class:carousel--arrows-with-counts={mode === 'arrows-with-counts'}
+  style:--carousel--animation="{animationDuration}ms ease-out transform">
+  <div class="carousel__slides" bind:this={slidesRef} style:transform="translateX({slidesTranslateX}px)">
+    {#if items.length > 1}
+      <div class="carousel__slide">
+        {#if children}
+          {@render children(items[items.length - 1])}
+        {/if}
+      </div>
+    {/if}
+    {#each items as item (item)}
+      <div class="carousel__slide">
+        {#if children}
+          {@render children(item)}
+        {/if}
+      </div>
+    {/each}
+    {#if items.length > 1}
+      <div class="carousel__slide" data-after>
+        {#if children}
+          {@render children(items[0])}
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  {#if items.length > 1}
+    {#if mode === 'arrows-with-counts'}
+      <div class="carousel__arrows-with-counts">
+        <button type="button" class="carousel__counts-navigation-button" onclick={loadPrevious} aria-label="none">
+          <Icon src={IconChevronLeft} />
+        </button>
+        <div class="carousel__counts">{localization.nOfM(selectedIndex + 1, items.length)}</div>
+        <button type="button" class="carousel__counts-navigation-button" onclick={loadNext} aria-label="none">
+          <Icon src={IconChevronRight} />
+        </button>
+      </div>
+    {:else}
+      <button type="button" class="carousel__navigation-button carousel__navigation-button--prev" onclick={loadPrevious} aria-label="none">
+        <Icon src={IconChevronLeft} />
+      </button>
+      <button type="button" class="carousel__navigation-button carousel__navigation-button--next" onclick={loadNext} aria-label="none">
+        <Icon src={IconChevronRight} />
+      </button>
+      <div class="carousel__dots">
+        {#each itemIndices as index (index)}
+          <button type="button" class="carousel__dot" onclick={() => setIndex(index)}>
+            {#if dot}
+              {@render dot({ active: index === selectedIndex })}
+            {:else}
+              <span class="carousel__dot-indicator" class:carousel__dot-indicator--active={index === selectedIndex}></span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>@charset "UTF-8";
+.carousel {
+  /* Public API */
+  --_carousel--button-color: var(--sc-kit--carousel--button-color, #9ca3af);
+  --_carousel--dot-color: var(--sc-kit--carousel--dot-color, #ffffff);
+  --_carousel--dot-size: var(--sc-kit--carousel--dot-size, 0.5rem);
+  --_carousel--text-color: var(--sc-kit--carousel--text-color, #ffffff);
+  --_carousel--animation: var(--carousel--animation);
+  /* Mode control — overridden by modifiers */
+  --_carousel--nav-display: block;
+  --_carousel--nav-opacity: 0;
+  --_carousel--nav-visibility: hidden;
+  --_carousel--dots-display: flex;
+  --_carousel--dots-position: absolute;
+  --_carousel--dots-margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.carousel:hover {
+  --_carousel--nav-opacity: 1;
+  --_carousel--nav-visibility: visible;
+}
+.carousel--arrows-only {
+  --_carousel--dots-display: none;
+}
+.carousel--dots-only {
+  --_carousel--nav-display: none;
+}
+.carousel--dots-only-below {
+  --_carousel--nav-display: none;
+  --_carousel--dots-position: static;
+  --_carousel--dots-margin-top: 1rem;
+}
+.carousel__slides {
+  display: flex;
+  height: 100%;
+}
+.carousel__slides:global(.animate) {
+  transition: var(--_carousel--animation);
+}
+.carousel__slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+.carousel__dots {
+  margin: 0;
+  display: var(--_carousel--dots-display);
+  justify-content: center;
+  z-index: 1;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  position: var(--_carousel--dots-position);
+  margin-top: var(--_carousel--dots-margin-top);
+  left: 0;
+  right: 0;
+  bottom: 0.625rem;
+}
+.carousel__dot {
+  cursor: pointer;
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+.carousel__dot-indicator {
+  display: block;
+  width: var(--_carousel--dot-size);
+  height: var(--_carousel--dot-size);
+  border-radius: 50%;
+  border: 1px solid var(--_carousel--dot-color);
+  background: transparent;
+  transition: background-color 0.2s;
+}
+.carousel__dot-indicator--active {
+  background: var(--_carousel--dot-color);
+}
+.carousel__navigation-button {
+  display: var(--_carousel--nav-display);
+  font-size: 0.75rem;
+  width: 1.875rem;
+  height: 1.875rem;
+  background-color: var(--_carousel--button-color);
+  border-radius: 50%;
+  text-align: center;
+  color: var(--_carousel--text-color);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: var(--_carousel--nav-opacity);
+  visibility: var(--_carousel--nav-visibility);
+  transition: opacity 0.2s, visibility 0.2s;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .carousel__navigation-button {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+.carousel__navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.carousel__navigation-button--prev {
+  left: 0.9375rem;
+}
+.carousel__navigation-button--next {
+  right: 0.9375rem;
+}
+.carousel__arrows-with-counts {
+  position: absolute;
+  bottom: 0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.625rem;
+  z-index: 1;
+}
+.carousel__counts {
+  font-size: 0.9375rem;
+  font-weight: 300;
+  width: 5.625rem;
+  text-align: center;
+  color: var(--_carousel--text-color);
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+}
+.carousel__counts-navigation-button {
+  font-size: 0.75rem;
+  width: 1.625rem;
+  height: 1.625rem;
+  background-color: var(--_carousel--button-color);
+  border-radius: 50%;
+  text-align: center;
+  color: var(--_carousel--text-color);
+  opacity: var(--_carousel--nav-opacity);
+  visibility: var(--_carousel--nav-visibility);
+  transition: opacity 0.2s, visibility 0.2s;
+}
+.carousel__counts-navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.carousel__counts-navigation-button {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .carousel__counts-navigation-button {
+    opacity: 1;
+    visibility: visible;
+  }
+}</style>