@streamscloud/embeddable 7.0.1 → 7.0.2-1759149696160

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

@@ -1,393 +0,0 @@
-<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 { handleEsc } from '../../core/document.event-handlers';
-import { preloadImage } from '../../core/image-preloader';
-import { toastrWarning } from '../../core/toastr';
-import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
-import { mapToShortVideoViewerModel } from '../layout/models';
-import { StreamPageViewer } from '../stream-page-viewer';
-import { Icon } from '../../ui/icon';
-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 { default as Overview } from './stream-overview.svelte';
-import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization';
-import { StreamPlayerUiManager } from './ui-manager.svelte';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-import { onMount, untrack } from 'svelte';
-let { streamId, dataProvider, analyticsHandler, locale = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
-const localization = $derived(new StreamPlayerLocalization(locale));
-let model = $state(null);
-let buffer = $state.raw(null);
-let bufferIsLoading = $state(false);
-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;
-let activityTimeout = null;
-let trackingInterval = null;
-let maxPageIndexViewed = 0;
-const uiManager = new StreamPlayerUiManager();
-const resetInactivityTimer = () => {
-    if (!isActive) {
-        isActive = true;
-    }
-    if (activityTimeout) {
-        clearTimeout(activityTimeout);
-    }
-    activityTimeout = setTimeout(() => {
-        isActive = false;
-    }, inactiveTimeSeconds * 1000);
-};
-$effect(() => {
-    void dataProvider;
-    untrack(() => {
-        initBuffer(dataProvider);
-    });
-});
-const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a;
-    bufferIsLoading = true;
-    const stream = yield dataProvider.getStream(streamId);
-    if (!stream) {
-        toastrWarning(localization.streamNotFound);
-        onPlayerClose();
-        return;
-    }
-    if (stream.organizationId) {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
-    }
-    (_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { title: stream.title, image: stream.cover });
-    // start tracking the stream
-    model = stream;
-    buffer = new StreamPlayerBuffer({
-        streamId,
-        dataProvider: dataProvider,
-        on: {
-            preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-                if (instance.loaded.length) {
-                    const coverUrl = instance.loaded[0].cover;
-                    if (coverUrl) {
-                        yield preloadImage(coverUrl);
-                    }
-                    uiManager.setBackgroundImageUrl(coverUrl);
-                }
-                buffer = instance;
-                bufferIsLoading = false;
-            })
-        }
-    });
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
-    startActivityTracking();
-});
-onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
-}));
-const startActivityTracking = () => {
-    trackingInterval = setInterval(() => {
-        if (isActive) {
-            totalEngagementTimeSeconds += 1;
-        }
-    }, 1000);
-    window.addEventListener('mousemove', resetInactivityTimer);
-    window.addEventListener('mousedown', resetInactivityTimer);
-    window.addEventListener('keypress', resetInactivityTimer);
-    window.addEventListener('touchstart', resetInactivityTimer);
-    window.addEventListener('scroll', resetInactivityTimer);
-    resetInactivityTimer();
-};
-const stopActivityTracking = () => {
-    window.removeEventListener('mousemove', resetInactivityTimer);
-    window.removeEventListener('mousedown', resetInactivityTimer);
-    window.removeEventListener('keypress', resetInactivityTimer);
-    window.removeEventListener('touchstart', resetInactivityTimer);
-    window.removeEventListener('scroll', resetInactivityTimer);
-    if (activityTimeout) {
-        clearTimeout(activityTimeout);
-        activityTimeout = null;
-    }
-    if (trackingInterval) {
-        clearInterval(trackingInterval);
-        trackingInterval = null;
-    }
-};
-const handleChangePage = (index) => {
-    if (!buffer) {
-        return;
-    }
-    buffer.setIndex(index);
-    if (uiManager.isMobileView) {
-        uiManager.overviewCollapsed = true;
-    }
-};
-const handleDimensionsChanged = (dimensions) => {
-    uiManager.updateDimensions({
-        mainViewColumnWidth: dimensions.mainSceneWidth,
-        viewTotalWidth: dimensions.totalWidth
-    });
-};
-const handleOverviewWidthChanged = (width) => {
-    uiManager.updateOverviewWidth(width);
-};
-const onMediaCenterHeaderMounted = (data) => {
-    uiManager.updateMediaCenterHeaderHeight(data.height);
-};
-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);
-    uiManager.setBackgroundImageUrl((page === null || page === void 0 ? void 0 : page.cover) || null);
-    if (page) {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, streamId);
-        if (page.type === 'short-video' && page.shortVideo) {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(page.shortVideo.id);
-        }
-        const currentIndex = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.findIndex((p) => p.id === id);
-        if (currentIndex !== undefined && currentIndex > maxPageIndexViewed) {
-            maxPageIndexViewed = currentIndex;
-        }
-    }
-};
-const onProductCardClick = (productId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
-};
-const onShortVideoProductClick = (productId, videoId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(productId, videoId);
-};
-const onStreamProductImpression = (productId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductImpression(productId, streamId);
-};
-const onShortVideoProductImpression = (productId, videoId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
-};
-const onPlayerClose = () => {
-    var _a;
-    stopActivityTracking();
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(streamId, totalEngagementTimeSeconds);
-    if (buffer && buffer.loaded.length > 0) {
-        let scrollDepth = Math.round(((maxPageIndexViewed + 1) / buffer.loaded.length) * 100);
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamScrollDepth(streamId, scrollDepth);
-    }
-    (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
-};
-const onPageDeactivated = (itemId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.reportPageVideoViews(itemId, streamId);
-};
-const onProgress = (pageId, videoId, progress) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProgress(pageId, videoId, progress, streamId);
-};
-</script>
-
-<svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
-
-<div
-  class="stream-player-container"
-  class:stream-player-container--background-loading={!uiManager.isMobileView}
-  class:stream-player-container--faded={fadeContent}
-  style={uiManager.globalCssVariables}>
-  {#if categoriesSwitcher}
-    {#snippet closeButton()}
-      <button type="button" class="close-button" onclick={onPlayerClose}>
-        <Icon src={IconDismiss} />
-      </button>
-    {/snippet}
-    <div class="stream-player-container__media-center">
-      {@render categoriesSwitcher({
-        maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
-        onMounted: onMediaCenterHeaderMounted,
-        closeButton: on?.playerClosed && closeButton
-      })}
-    </div>
-  {/if}
-  <div class="stream-player">
-    {#if showStreamsCloudWatermark}
-      <div class="stream-player__watermark">
-        <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
-          <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
-        </a>
-      </div>
-    {/if}
-    {#if buffer && model && !bufferIsLoading}
-      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
-        <div class="stream-player__content" use:contentMounted>
-          <PlayerSlider
-            buffer={buffer}
-            on={{
-              itemActivated: (e) => onPageActivated(e),
-              itemDeactivated: (e) => onPageDeactivated(e)
-            }}>
-            {#snippet children({ item })}
-              {#if item.type === 'general'}
-                <StreamPageViewer
-                  page={item}
-                  locale={localization.streamPageViewerLocale}
-                  on={{
-                    progress: (videoId: String, progress: Number) => onProgress(item.id, videoId, progress),
-                    productClick: (productId: String) => onProductCardClick(productId),
-                    productImpression: (productId: String) => onStreamProductImpression(productId)
-                  }} />
-              {:else if item.type === 'short-video'}
-                <ShortVideoViewer
-                  model={mapToShortVideoViewerModel(item.shortVideo)}
-                  on={{
-                    progress: (progress) => onProgress(item.id, item.shortVideo.id, progress),
-                    productClick: (productId) => onShortVideoProductClick(productId, item.shortVideo.id),
-                    productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId)
-                  }}
-                  autoplay="on-appearance"
-                  socialInteractionsHandler={postSocialInteractionsHandler}
-                  locale={localization.shortVideoViewerLocale}
-                  showAttachments={uiManager.showShortVideoOverlayAttachments}
-                  showControls={uiManager.showShortVideoOverlayControls} />
-              {/if}
-            {/snippet}
-          </PlayerSlider>
-          {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
-            <SwipeIndicator locale={localization.swipeIndicatorLocale} />
-          {/if}
-        </div>
-      </SpotlightLayout>
-      {#if model}
-        <Overview
-          model={model}
-          buffer={buffer}
-          activePageId={activePageId}
-          uiManager={uiManager}
-          localization={localization}
-          on={{
-            setCurrentItem: handleChangePage,
-            widthChanged: handleOverviewWidthChanged
-          }} />
-      {/if}
-      <Controls
-        buffer={buffer}
-        uiManager={uiManager}
-        localization={localization}
-        postSocialInteractionsHandler={postSocialInteractionsHandler}
-        playerLogo={playerLogo}
-        showCloseButton={!categoriesSwitcher}
-        on={{
-          closePlayer: () => onPlayerClose(),
-          productClick: (productId: String) => onProductCardClick(productId),
-          productImpression: (productId: String) => onStreamProductImpression(productId)
-        }} />
-    {:else}
-      <Loading positionFixedCenter={true} timeout={1000} />
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stream-player-container {
-  --stream-player--elements-opacity: 1;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  container-type: inline-size;
-  display: flex;
-  position: relative;
-}
-.stream-player-container {
-  background-color: #c1c1c1;
-  background-image: var(--stream-player--background-image-url);
-  background-size: cover;
-  background-blend-mode: multiply;
-}
-.stream-player-container--background-loading {
-  background-color: transparent;
-}
-.stream-player-container--faded {
-  --stream-player--elements-opacity: 0;
-}
-.stream-player-container__media-center {
-  position: absolute;
-  top: 0;
-  left: var(--stream-player--overview--width);
-  right: var(--stream-player--overview--width);
-  z-index: 1;
-}
-
-.stream-player {
-  display: flex;
-  flex: 1;
-  padding: var(--stream-player--padding);
-  backdrop-filter: blur(30px);
-  position: relative;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .stream-player {
-    padding: 0;
-  }
-}
-.stream-player__watermark {
-  position: absolute;
-  bottom: 5rem;
-  left: calc(var(--stream-player--overview--width) + 5rem);
-  opacity: var(--stream-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}
-.stream-player__content {
-  width: 100%;
-  height: 100%;
-  opacity: var(--stream-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}
-
-.close-button {
-  width: 3rem;
-  min-width: 3rem;
-  max-width: 3rem;
-  height: 3rem;
-  min-height: 3rem;
-  max-height: 3rem;
-  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;
-}
-.close-button:hover {
-  background-color: rgba(0, 0, 0, 0.9);
-  transition: background-color 0.5s;
-}
-.close-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}</style>

package/dist/streams/stream-player/stream-player.svelte.d.ts

@@ -1,16 +0,0 @@
-import type { StreamPlayerProps } from './types';
-import { type Snippet } from 'svelte';
-type $$ComponentProps = StreamPlayerProps & {
-    categoriesSwitcher?: Snippet<[{
-        maxItemsWidth: number;
-        onMounted: (data: {
-            height: number;
-        }) => void;
-        closeButton?: Snippet;
-    }]>;
-    playerLogo?: string | null;
-    fadeContent?: boolean;
-};
-declare const StreamPlayer: import("svelte").Component<$$ComponentProps, {}, "">;
-type StreamPlayer = ReturnType<typeof StreamPlayer>;
-export default StreamPlayer;

package/dist/streams/stream-player/ui-manager.svelte.js

@@ -1,63 +0,0 @@
-const CONTROLS_PADDING_HORIZONTAL = 28;
-const CONTROLS_PADDING_VERTICAL = 28;
-const CONTROLS_ATTACHMENTS_MAX_WIDTH = 176;
-const PLAYER_PADDING_VERTICAL = 10;
-export class StreamPlayerUiManager {
-    overviewCollapsed = $state(false);
-    showShortVideoAttachments = $state(true);
-    globalCssVariables = $derived.by(() => {
-        const values = [
-            `--stream-player--controls--attachments--max-width: ${CONTROLS_ATTACHMENTS_MAX_WIDTH}px`,
-            `--stream-player--controls--available-space: ${this._controlsAvailableSpace}px`,
-            `--stream-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
-            `--stream-player--media-center-header--height: ${this._mediaCenterHeaderHeight || 72}px`,
-            `--stream-player--overview--width: ${this._overviewWidth}px`,
-            `--stream-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
-        ];
-        if (this._backgroundImageUrl) {
-            values.push(`--stream-player--background-image-url: url(${this._backgroundImageUrl})`);
-        }
-        return values.join(';');
-    });
-    isMobileView = $derived.by(() => this._viewTotalWidth <= 576);
-    viewInitialized = $derived.by(() => !!this._viewTotalWidth && !!this._mainViewColumnWidth);
-    showShortVideoOverlayAttachments = $derived.by(() => this.viewInitialized && this._controlsAttachmentsPanelWidth < CONTROLS_ATTACHMENTS_MAX_WIDTH + 10);
-    showShortVideoOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavitagionButtonsWidth);
-    _backgroundImageUrl = $state(null);
-    _viewTotalWidth = $state(0);
-    _mainViewColumnWidth = $state(0);
-    _mediaCenterHeaderHeight = $state(0);
-    _overviewWidth = $state(0);
-    _controlsAttachmentsPanelWidth = $state(0);
-    _controlsNavitagionButtonsWidth = $state(0);
-    _controlsAvailableSpace = $derived.by(() => (this._viewTotalWidth - this._mainViewColumnWidth) / 2);
-    _controlsContentWidth = $derived.by(() => this._controlsAvailableSpace - CONTROLS_PADDING_HORIZONTAL * 2);
-    get viewTotalWidth() {
-        return this._viewTotalWidth;
-    }
-    get mainViewColumnWidth() {
-        return this._mainViewColumnWidth;
-    }
-    get backgroundImageUrl() {
-        return this._backgroundImageUrl;
-    }
-    updateDimensions = (dimensions) => {
-        this._viewTotalWidth = dimensions.viewTotalWidth;
-        this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
-    };
-    updateOverviewWidth = (width) => {
-        this._overviewWidth = width;
-    };
-    updateMediaCenterHeaderHeight = (height) => {
-        this._mediaCenterHeaderHeight = height;
-    };
-    setAttachmentsPanelWidth = (width) => {
-        this._controlsAttachmentsPanelWidth = width;
-    };
-    setNavigationButtonsBlockWidth = (width) => {
-        this._controlsNavitagionButtonsWidth = width;
-    };
-    setBackgroundImageUrl = (url) => {
-        this._backgroundImageUrl = url;
-    };
-}