@streamscloud/embeddable 2.1.1 → 2.1.3

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

@@ -0,0 +1,236 @@
+<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}
+    on={{
+      productClick: on.productClick
+    }} />
+  <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

@@ -0,0 +1,15 @@
+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;
+        productClick?: (productId: string) => void;
+    };
+};
+declare const Controls: import("svelte").Component<Props, {}, "">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,196 @@
+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

@@ -0,0 +1,35 @@
+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
+}