@streamscloud/embeddable 2.1.0 → 2.1.1

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

@@ -1,230 +0,0 @@
-<script lang="ts">var _a, _b;
-import { ShortVideoDetails, ShortVideoViewerAttachmentsInline, ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
-import { mapToShortVideoViewerModel } from '../layout/models';
-import { Icon } from '../../ui/icon';
-import { MediaVolumeManager } from '../../ui/media-playback';
-import { default as ActionButton } from './action-button.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization.svelte';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
-import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg';
-import IconFullScreenMaximize from '@fluentui/svg-icons/icons/full_screen_maximize_20_regular.svg';
-import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
-let { buffer, uiManager, localization, on } = $props();
-const toggleMuted = () => {
-    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
-};
-const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
-</script>
-
-<div class="stream-player-controls">
-  <div class="stream-player-controls__left">
-    {#if shortVideo && uiManager.shortVideoDetailsCollapsed && !uiManager.showShortVideoOverlay}
-      <div class="stream-player-controls__short-video-overlay">
-        <div class="stream-player-controls__short-video-attachments-inline">
-          <ShortVideoViewerAttachmentsInline model={shortVideo} />
-        </div>
-      </div>
-    {/if}
-    <div class="stream-player-controls__navigation-buttons">
-      <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
-        <Icon src={IconChevronUp} />
-      </button>
-      <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
-        <Icon src={IconChevronDown} />
-      </button>
-    </div>
-  </div>
-  <div class="stream-player-controls__right">
-    {#if shortVideo && shortVideo.products}
-      <div class="stream-player-controls__short-video-attachments">
-        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization} />
-      </div>
-    {/if}
-    <div class="stream-player-controls__controls">
-      {#if shortVideo}
-        <ActionButton on={{ click: toggleMuted }}>
-          {#if MediaVolumeManager.isMuted}
-            <Icon src={IconSpeakerMute} />
-          {:else}
-            <Icon src={IconSpeaker2} />
-          {/if}
-        </ActionButton>
-      {/if}
-      {#if !uiManager.overviewCollapsed}
-        <ActionButton on={{ click: () => (uiManager.overviewCollapsed = true) }}>
-          <Icon src={IconFullScreenMaximize} />
-        </ActionButton>
-      {/if}
-    </div>
-  </div>
-</div>
-
-{#if shortVideo && (!uiManager.isMobileView || uiManager.overviewCollapsed)}
-  <ShortVideoDetails shortVideo={shortVideo} collapsed={uiManager.shortVideoDetailsCollapsed} localization={localization.shortVideoDetailsLocalization} />
-  <div class="toggle-collapsed-button">
-    <ActionButton on={{ click: () => (uiManager.shortVideoDetailsCollapsed = !uiManager.shortVideoDetailsCollapsed) }}>
-      <Icon src={IconPanelRightGallery} />
-    </ActionButton>
-  </div>
-{/if}
-<button type="button" class="close-button navigation-button" onclick={on.closePlayer}>
-  <Icon src={IconDismiss} />
-</button>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.close-button {
-  position: absolute;
-  top: var(--stream-player--controls--offset-vertical);
-  right: var(--stream-player--controls--offset-horizontal);
-  z-index: 1;
-}
-
-.toggle-collapsed-button {
-  position: absolute;
-  bottom: var(--stream-player--controls--offset-vertical);
-  right: var(--stream-player--controls--offset-horizontal);
-  z-index: 1;
-}
-
-.stream-player-controls {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: var(--stream-player--sidebar--available-space);
-  display: flex;
-  justify-content: space-between;
-  gap: 2.5rem;
-  padding: var(--stream-player--controls--offset-vertical) var(--stream-player--controls--offset-horizontal);
-  container-type: inline-size;
-}
-.stream-player-controls__left {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-  justify-content: flex-end;
-}
-.stream-player-controls__right {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-direction: column;
-  padding-top: 3.75rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 9.375rem) {
-  .stream-player-controls__right {
-    display: none;
-  }
-}
-.stream-player-controls__short-video-overlay {
-  gap: 2.5rem;
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-end;
-  --short-video-viewer--interactions--icon--size: var(--stream-player--navigation-button--size);
-  --short-video-viewer--interactions--background--color: #1c1c1c;
-  --short-video-viewer--interactions--counter--color: #f3f4f6;
-  --short-video-viewer--interactions--icon--font-color: #f3f4f6;
-}
-.stream-player-controls__short-video-attachments-inline {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < calc(21.875rem + 3.75rem)) {
-  .stream-player-controls__short-video-attachments-inline {
-    display: contents;
-  }
-}
-.stream-player-controls__short-video-attachments {
-  flex: 1;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
-  width: 21.875rem;
-  max-width: 21.875rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.stream-player-controls__short-video-attachments::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.stream-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-.stream-player-controls__short-video-attachments:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
-}
-.stream-player-controls__short-video-attachments:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.stream-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
-}
-@container (width < calc(21.875rem + 3.75rem)) {
-  .stream-player-controls__short-video-attachments {
-    display: none;
-  }
-}
-.stream-player-controls__navigation-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 0.625rem;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 6.25rem) {
-  .stream-player-controls__navigation-buttons {
-    visibility: hidden;
-  }
-}
-.stream-player-controls__controls {
-  display: flex;
-  margin-top: auto;
-  gap: 1rem;
-  align-self: flex-start;
-}
-
-.navigation-button {
-  width: var(--stream-player--navigation-button--size);
-  min-width: var(--stream-player--navigation-button--size);
-  max-width: var(--stream-player--navigation-button--size);
-  height: var(--stream-player--navigation-button--size);
-  min-height: var(--stream-player--navigation-button--size);
-  max-height: var(--stream-player--navigation-button--size);
-  background-color: #000000;
-  border: 1px solid #1c1c1c;
-  border-radius: 50%;
-  text-align: center;
-  --icon--color: #ffffff;
-  --icon--stroke-width: 0.6;
-}
-.navigation-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}</style>

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

@@ -1,14 +0,0 @@
-import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization.svelte';
-import type { StreamPlayerUiManager } from './ui-manager.svelte';
-type Props = {
-    buffer: StreamPlayerBuffer;
-    uiManager: StreamPlayerUiManager;
-    localization: StreamPlayerLocalization;
-    on: {
-        closePlayer: () => void;
-    };
-};
-declare const Controls: import("svelte").Component<Props, {}, "">;
-type Controls = ReturnType<typeof Controls>;
-export default Controls;

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

@@ -1,37 +0,0 @@
-import type { IStreamPlayerLocalization } from './stream-player-localization.svelte';
-export type { IStreamPlayerLocalization };
-/**
- * Opens the stream player modal with the specified stream details.
- *
- * @param init - Configuration options.
- * @param {string} init.streamId - The ID of the stream to open.
- * @param {string} init.graphqlUrl - The URL of the GraphQL endpoint.
- * @param {IStreamPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
- * @param init.on - Available callbacks.
- *
- * @example
- * ```ts
- * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
- *
- * openStreamPlayer({
- *   streamId: '...',
- *   graphqlUrl: 'https://api.example.com/graphql',
- *   localization: {
- *     play: 'Play',
- *     pause: 'Pause'
- *   }
- * });
- * ```
- */
-export declare const openStreamPlayer: (init: {
-    streamId: string;
-    graphqlUrl: string;
-    localization?: IStreamPlayerLocalization;
-    on?: {
-        streamActivated?: (data: {
-            title: string;
-            image: string | null;
-        }) => void;
-        playerClosed?: () => void;
-    };
-}) => void;

package/dist/streams/stream-player/index.js

@@ -1,50 +0,0 @@
-import { createLocalGQLClient } from '../../core/graphql';
-import { ShadowHost } from '../../ui/shadow-dom';
-import { default as StreamPlayer } from './cmp.stream-player.svelte';
-import { mount } from 'svelte';
-/**
- * Opens the stream player modal with the specified stream details.
- *
- * @param init - Configuration options.
- * @param {string} init.streamId - The ID of the stream to open.
- * @param {string} init.graphqlUrl - The URL of the GraphQL endpoint.
- * @param {IStreamPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
- * @param init.on - Available callbacks.
- *
- * @example
- * ```ts
- * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
- *
- * openStreamPlayer({
- *   streamId: '...',
- *   graphqlUrl: 'https://api.example.com/graphql',
- *   localization: {
- *     play: 'Play',
- *     pause: 'Pause'
- *   }
- * });
- * ```
- */
-export const openStreamPlayer = (init) => {
-    const { streamId, graphqlUrl, localization } = init;
-    const shadowHost = new ShadowHost({ onClosed: () => init.on?.playerClosed?.() });
-    mount(StreamPlayer, {
-        target: shadowHost.shadowRoot,
-        props: {
-            streamId,
-            graphql: createLocalGQLClient(graphqlUrl),
-            localization,
-            on: {
-                streamActivated: (data) => {
-                    if (init.on?.streamActivated) {
-                        init.on.streamActivated({ title: data.title, image: data.image });
-                    }
-                },
-                closePlayer: () => {
-                    shadowHost.remove();
-                }
-            }
-        }
-    });
-    shadowHost.attachToBody();
-};

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

@@ -1,3 +0,0 @@
-import type { StreamPlayerPayloadFragment } from './operations.generated';
-import type { StreamPlayerModel } from './types';
-export declare const mapStreamPlayerModel: (payload: StreamPlayerPayloadFragment) => StreamPlayerModel;

package/dist/streams/stream-player/mapper.js

@@ -1,15 +0,0 @@
-export const mapStreamPlayerModel = (payload) => {
-    const headerDataProvider = payload.availableFrom ?? payload.ownerProfile;
-    return {
-        id: payload.id,
-        title: payload.title,
-        subTitle: payload.subTitle || null,
-        createdAt: payload.createdAt,
-        publishedAt: payload.publishedAt,
-        header: {
-            name: headerDataProvider.name,
-            image: headerDataProvider.image
-        },
-        pagesCount: payload.pagesCount
-    };
-};

package/dist/streams/stream-player/operations.generated.d.ts

@@ -1,65 +0,0 @@
-import type * as SchemaTypes from '../../../gql/types';
-import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
-export type GetStreamQueryVariables = SchemaTypes.Exact<{
-    id: SchemaTypes.Scalars['String']['input'];
-}>;
-export type GetStreamQuery = {
-    stream: {
-        id: string;
-        title: string;
-        subTitle: string | null;
-        createdAt: any;
-        publishedAt: any | null;
-        pagesCount: number;
-        cover: {
-            url: string;
-        } | null;
-        ownerProfile: {
-            image: string | null;
-            name: string;
-        };
-        availableFrom: {
-            image: string;
-            name: string;
-        } | null;
-    } | null;
-};
-export type GetStreamPagesQueryVariables = SchemaTypes.Exact<{
-    input: SchemaTypes.StreamPagesInput;
-    image_scale: SchemaTypes.ImageScale;
-}>;
-export type GetStreamPagesQuery = {
-    streamPages: {
-        continuationToken: string | null;
-        items: Array<{
-            id: string;
-            name: string | null;
-            layout: string;
-            cover: {
-                url: string;
-            } | null;
-        }>;
-    };
-};
-export type StreamPlayerPayloadFragment = {
-    id: string;
-    title: string;
-    subTitle: string | null;
-    createdAt: any;
-    publishedAt: any | null;
-    pagesCount: number;
-    cover: {
-        url: string;
-    } | null;
-    ownerProfile: {
-        image: string | null;
-        name: string;
-    };
-    availableFrom: {
-        image: string;
-        name: string;
-    } | null;
-};
-export declare const StreamPlayerPayloadFragmentDoc: DocumentNode<StreamPlayerPayloadFragment, unknown>;
-export declare const GetStreamDocument: DocumentNode<GetStreamQuery, GetStreamQueryVariables>;
-export declare const GetStreamPagesDocument: DocumentNode<GetStreamPagesQuery, GetStreamPagesQueryVariables>;

package/dist/streams/stream-player/operations.generated.js

@@ -1,196 +0,0 @@
-export const StreamPlayerPayloadFragmentDoc = {
-    kind: 'Document',
-    definitions: [
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'StreamPlayerPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Stream' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'subTitle' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'createdAt' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'publishedAt' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'cover' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
-                    },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'ownerProfile' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
-                            ]
-                        }
-                    },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'availableFrom' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
-                            ]
-                        }
-                    },
-                    { kind: 'Field', name: { kind: 'Name', value: 'pagesCount' } }
-                ]
-            }
-        }
-    ]
-};
-export const GetStreamDocument = {
-    kind: 'Document',
-    definitions: [
-        {
-            kind: 'OperationDefinition',
-            operation: 'query',
-            name: { kind: 'Name', value: 'GetStream' },
-            variableDefinitions: [
-                {
-                    kind: 'VariableDefinition',
-                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
-                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } } }
-                }
-            ],
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'stream' },
-                        arguments: [
-                            {
-                                kind: 'Argument',
-                                name: { kind: 'Name', value: 'input' },
-                                value: {
-                                    kind: 'ObjectValue',
-                                    fields: [{ kind: 'ObjectField', name: { kind: 'Name', value: 'id' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'id' } } }]
-                                }
-                            }
-                        ],
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamPlayerPayloadFragment' } }] }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'StreamPlayerPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Stream' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'subTitle' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'createdAt' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'publishedAt' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'cover' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
-                    },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'ownerProfile' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
-                            ]
-                        }
-                    },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'availableFrom' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
-                            ]
-                        }
-                    },
-                    { kind: 'Field', name: { kind: 'Name', value: 'pagesCount' } }
-                ]
-            }
-        }
-    ]
-};
-export const GetStreamPagesDocument = {
-    kind: 'Document',
-    definitions: [
-        {
-            kind: 'OperationDefinition',
-            operation: 'query',
-            name: { kind: 'Name', value: 'GetStreamPages' },
-            variableDefinitions: [
-                {
-                    kind: 'VariableDefinition',
-                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'input' } },
-                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'StreamPagesInput' } } }
-                },
-                {
-                    kind: 'VariableDefinition',
-                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } },
-                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'ImageScale' } } }
-                }
-            ],
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'streamPages' },
-                        arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'input' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'input' } } }],
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'items' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamPageViewerPayloadFragment' } }]
-                                    }
-                                },
-                                { kind: 'Field', name: { kind: 'Name', value: 'continuationToken' } }
-                            ]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'StreamPageViewerPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'StreamPage' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'cover' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
-                    },
-                    { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'layout' },
-                        arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }]
-                    }
-                ]
-            }
-        }
-    ]
-};

package/dist/streams/stream-player/operations.graphql

@@ -1,35 +0,0 @@
-query GetStream($id: String!) {
-  stream(input: { id: $id }) {
-    ...StreamPlayerPayloadFragment
-  }
-}
-
-# noinspection GraphQLSchemaValidation
-query GetStreamPages($input: StreamPagesInput!, $image_scale: ImageScale!) {
-  streamPages(input: $input) {
-    items {
-      ...StreamPageViewerPayloadFragment
-    }
-    continuationToken
-  }
-}
-
-fragment StreamPlayerPayloadFragment on Stream {
-  id
-  title
-  subTitle
-  createdAt
-  publishedAt
-  cover {
-    url
-  }
-  ownerProfile {
-    image
-    name
-  }
-  availableFrom {
-    image
-    name
-  }
-  pagesCount
-}