@streamscloud/embeddable 11.0.0 → 12.1.0

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

@@ -4,17 +4,18 @@ import { StreamCard } from '../../../streams/stream-card';
 import { Icon } from '../../../ui/icon';
 import { ImageRound } from '../../../ui/image';
 import { LineClamp } from '../../../ui/line-clamp';
+import { MomentsCircle } from '../moments';
 import { default as ButtonWrapper } from './category-following-wrapper.svelte';
 import { MenuLocalization } from './menu-localization';
 import IconChevronDownFilled from '@fluentui/svg-icons/icons/chevron_down_20_filled.svg?raw';
 import IconChevronRightFilled from '@fluentui/svg-icons/icons/chevron_right_20_filled.svg?raw';
 import { slide } from 'svelte/transition';
-let { context, locale, on } = $props();
+let { context, locale = 'en', on } = $props();
 const localization = $derived(new MenuLocalization(locale));
 const target = $derived.by(() => context.targetData);
 const generateCategoriesMap = () => {
     const expanded = {};
-    context.categoriesHandler.categories.forEach((c) => {
+    context.categoriesHandler.categoriesGrouped.forEach((c) => {
         const isSelfSelected = context.categoriesHandler.selectedCategoryId === c.id;
         const hasSelectedChild = c.children.some((ch) => ch.id === context.categoriesHandler.selectedCategoryId);
         expanded[c.id] = isSelfSelected || hasSelectedChild;
@@ -27,14 +28,11 @@ const handleCategoryExpaned = (e, categoryId) => {
     categoriesExpandedMap[categoryId] = !categoriesExpandedMap[categoryId];
 };
 const styles = $derived.by(() => {
-    var _a, _b;
+    var _a;
     const values = [];
     if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.menuBackground) {
         values.push(`--media-center-menu--background-color: ${context.playerColors.menuBackground}`);
     }
-    if ((_b = context.playerColors) === null || _b === void 0 ? void 0 : _b.brand) {
-        values.push(`--media-center-menu--brand-color: ${context.playerColors.brand}`);
-    }
     return values.join(';');
 });
 </script>
@@ -43,16 +41,16 @@ const styles = $derived.by(() => {
   {#if target}
     <div class="media-center-target">
       <div class="media-center-target__image">
-        <ImageRound src={target.image} />
+        <MomentsCircle context={context} />
       </div>
       <div class="media-center-target__info">
         <div class="media-center-target__name">
-          <LineClamp maxLines={1}>
+          <LineClamp maxLines={1} locale={locale}>
             {target.name}
           </LineClamp>
         </div>
         {#if target.membersCount}
-          <LineClamp maxLines={1}>
+          <LineClamp maxLines={1} locale={locale}>
             <div class="media-center-target__members">
               <span class="media-center-target__members-count">
                 {compactNumber(target.membersCount, { locale: localization.locale })}
@@ -71,61 +69,58 @@ const styles = $derived.by(() => {
       {localization.interestsSectionTitle}
     </div>
     <div class="media-center-menu__tree">
-      {#each context.categoriesHandler.categories as category (category.id)}
-        <div class="media-center-menu__tree-item">
-          <div class="selector-item">
-            <div class="selector-item__value">
-              <div class="selector-item__image">
-                <ImageRound src={category.image} noBorders={true} />
-              </div>
-              <div
-                class="selector-item__text"
-                class:selector-item__text--active={!context.discoverHandler.activated && context.categoriesHandler.selectedCategoryId === category.id}
-                onclick={() => on.categorySelected(category.id)}
-                onkeydown={() => {}}
-                role="button"
-                tabindex="0">
-                {category.name}
-              </div>
+      <div class="media-center-menu__tree-item">
+        <div class="menu-item">
+          <div class="menu-item__value">
+            <div
+              class="menu-item__text"
+              class:menu-item__text--active={!context.categoriesHandler.selectedCategoryId}
+              onclick={() => context.playRootFeed()}
+              onkeydown={() => {}}
+              role="button"
+              tabindex="0">
+              {context.mediaCenterMode === 'discover' ? localization.discoverLabel : localization.feedLabel}
+            </div>
+          </div>
+        </div>
+      </div>
+      {#snippet categoryItem(category: { type: 'main'; value: MediaCenterCategoryModel } | { type: 'child'; value: MediaCenterSubCategoryModel })}
+        <div class="menu-item" class:menu-item--child={category.type === 'child'}>
+          <div class="menu-item__value" onclick={() => on.categorySelected(category.value.id)} onkeydown={() => {}} role="button" tabindex="0">
+            <div class="menu-item__image">
+              <ImageRound src={category.value.image} noBorders={true} />
+            </div>
+            <div class="menu-item__text" class:menu-item__text--active={context.categoriesHandler.selectedCategoryId === category.value.id}>
+              {category.value.name}
             </div>
-            <ButtonWrapper categoryId={category.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
-              <button
-                type="button"
-                class="selector-item__collapser"
-                class:selector-item__collapser--hidden={!category.children.length}
-                onclick={(e) => handleCategoryExpaned(e, category.id)}>
-                {#if categoriesExpandedMap[category.id]}
-                  <Icon src={IconChevronDownFilled} />
-                {:else}
-                  <Icon src={IconChevronRightFilled} />
-                {/if}
-              </button>
-            </ButtonWrapper>
+            {#if category.value.tag}
+              <div class="menu-item__tag" style="background-color: {category.value.tag.backgroundColor}; color: {category.value.tag.fontColor};">
+                {category.value.tag.text}
+              </div>
+            {/if}
           </div>
+          <ButtonWrapper categoryId={category.value.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
+            <button
+              type="button"
+              class="menu-item__collapser"
+              class:menu-item__collapser--hidden={category.type === 'child' || !category.value.children.length}
+              onclick={(e) => handleCategoryExpaned(e, category.value.id)}>
+              {#if categoriesExpandedMap[category.value.id]}
+                <Icon src={IconChevronDownFilled} />
+              {:else}
+                <Icon src={IconChevronRightFilled} />
+              {/if}
+            </button>
+          </ButtonWrapper>
+        </div>
+      {/snippet}
+      {#each context.categoriesHandler.categoriesGrouped as category (category.id)}
+        <div class="media-center-menu__tree-item">
+          {@render categoryItem({ type: 'main', value: category })}
           {#if categoriesExpandedMap[category.id]}
             <div class="media-center-menu__tree-item" transition:slide|local>
               {#each category.children as subcategory (subcategory.id)}
-                <div class="selector-item selector-item--child">
-                  <div class="selector-item__value">
-                    <div class="selector-item__image">
-                      <ImageRound src={subcategory.image} noBorders={true} />
-                    </div>
-                    <div
-                      class="selector-item__text"
-                      class:selector-item__text--active={!context.discoverHandler.activated && context.categoriesHandler.selectedCategoryId === subcategory.id}
-                      onclick={() => on.categorySelected(subcategory.id)}
-                      onkeydown={() => {}}
-                      role="button"
-                      tabindex="0">
-                      {subcategory.name}
-                    </div>
-                  </div>
-                  <ButtonWrapper categoryId={subcategory.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
-                    <button type="button" class="selector-item__collapser selector-item__collapser--hidden">
-                      <Icon src={IconChevronRightFilled} />
-                    </button>
-                  </ButtonWrapper>
-                </div>
+                {@render categoryItem({ type: 'child', value: subcategory })}
               {/each}
             </div>
           {/if}
@@ -161,7 +156,6 @@ const styles = $derived.by(() => {
 }
 .media-center-menu {
   --_media-center-menu--background-color: var(--media-center-menu--background-color, rgb(from #000000 r g b / 95%));
-  --_media-center-menu--brand-color: var(--media-center-menu--brand-color, #00b8d8);
   background: var(--_media-center-menu--background-color);
   height: 100%;
   min-height: 100%;
@@ -213,19 +207,19 @@ const styles = $derived.by(() => {
 .media-center-menu__section-title {
   font-size: 1.125rem;
   line-height: 1.75rem;
-  font-weight: 600;
+  font-weight: 500;
   color: #ffffff;
 }
 .media-center-menu__tree {
   display: flex;
   flex-direction: column;
   flex: 1;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 .media-center-menu__tree-item {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 .media-center-menu__popular-streams-section {
   display: flex;
@@ -241,63 +235,73 @@ const styles = $derived.by(() => {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 }
 
-.selector-item {
+.menu-item {
   display: flex;
   -webkit-user-drag: none;
   user-select: none;
   height: 2.25rem;
-  --_selector-item--text--font-size: 0.9375rem;
-  --_selector-item--text--font-weight: 600;
-  --_selector-item--image--size: 1.5rem;
+  --_menu-item--text--font-size: 0.9375rem;
+  --_menu-item--image--size: 1.5rem;
 }
-.selector-item :global([contenteditable]) {
+.menu-item :global([contenteditable]) {
   user-select: text;
 }
-.selector-item--child {
+.menu-item--child {
   height: 2.125rem;
   padding-left: 1.25rem;
-  --_selector-item--text--font-size: 0.875rem;
-  --_selector-item--text--font-weight: 500;
-  --_selector-item--image--size: 1.375rem;
+  --_menu-item--text--font-size: 0.875rem;
+  --_menu-item--image--size: 1.375rem;
 }
-.selector-item__value {
+.menu-item__value {
   display: flex;
   align-items: center;
   flex: 1;
-  gap: 0.75rem;
   min-width: 0;
   cursor: pointer;
 }
-.selector-item__image {
-  width: var(--_selector-item--image--size);
-  min-width: var(--_selector-item--image--size);
-  max-width: var(--_selector-item--image--size);
-  height: var(--_selector-item--image--size);
-  min-height: var(--_selector-item--image--size);
-  max-height: var(--_selector-item--image--size);
+.menu-item__image {
+  width: var(--_menu-item--image--size);
+  min-width: var(--_menu-item--image--size);
+  max-width: var(--_menu-item--image--size);
+  height: var(--_menu-item--image--size);
+  min-height: var(--_menu-item--image--size);
+  max-height: var(--_menu-item--image--size);
+  margin-right: 0.75rem;
 }
-.selector-item__text {
-  flex: 1;
+.menu-item__text {
   max-width: 100%;
   color: #ffffff;
-  font-size: var(--_selector-item--text--font-size);
-  font-weight: var(--_selector-item--text--font-weight);
+  font-size: var(--_menu-item--text--font-size);
+  font-weight: 400;
   text-align: left;
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
-  transition: text-shadow 120ms ease;
 }
-.selector-item__text:hover, .selector-item__text--active {
-  text-shadow: 0.001em 0 0 currentColor, -0.001em 0 0 currentColor, 0 0.001em 0 currentColor, 0 -0.001em 0 currentColor;
+.menu-item__text {
+  width: max-content;
+}
+.menu-item__text:hover, .menu-item__text--active {
+  font-weight: 600;
+  letter-spacing: -0.5px;
+}
+.menu-item__tag {
+  height: min-content;
+  width: min-content;
+  border-radius: 0.25rem;
+  padding: 0.3125rem 0.375rem;
+  font-size: 0.5rem;
+  font-weight: 600;
+  margin-top: -1rem;
+  margin-left: 0.25rem;
 }
-.selector-item__collapser {
+.menu-item__collapser {
   --icon--color: #ffffff;
   --icon--size: 1rem;
   padding: 0.5rem;
 }
-.selector-item__collapser--hidden {
+.menu-item__collapser--hidden {
   visibility: hidden;
 }
 
@@ -313,9 +317,6 @@ const styles = $derived.by(() => {
   height: 3.5rem;
   min-height: 3.5rem;
   max-height: 3.5rem;
-  --image--rounded--inner--border-width: 1px;
-  --image--rounded--outer--border-color: var(--_media-center-menu--brand-color);
-  --image--rounded--outer--border-width: 2px;
 }
 .media-center-target__info {
   display: flex;

package/dist/media-center/media-center/menu/menu.svelte.d.ts

@@ -3,7 +3,7 @@ import type { StreamPlayerModel } from '../../../streams/streams-player';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    locale: Locale;
+    locale?: Locale;
     on: {
         categorySelected: (categoryId: string) => void;
         streamSelected: (stream: StreamPlayerModel) => void;

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.d.ts

@@ -4,7 +4,7 @@ export declare class PopularStreamsPanelHandler {
     private readonly config;
     private _state;
     private _streams;
-    constructor(config: IMediaCenterConfig | null);
+    constructor(config: IMediaCenterConfig);
     get streamSectionItems(): StreamPlayerModel[];
     init: () => Promise<void>;
 }

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.js

@@ -9,9 +9,6 @@ export class PopularStreamsPanelHandler {
         return this._streams;
     }
     init = async () => {
-        if (!this.config) {
-            return;
-        }
         if (this._state === 'not-initialized') {
             this._state = 'loading';
             try {

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

@@ -0,0 +1,41 @@
+<script lang="ts">import { ImageRound } from '../../../ui/image';
+let { context } = $props();
+const styles = $derived.by(() => {
+    var _a;
+    const values = [];
+    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.brand) {
+        values.push(`--moments-circle--brand-color: ${context.playerColors.brand}`);
+    }
+    return values.join(';');
+});
+</script>
+
+<div class="moments-circle" style={styles}>
+  {#if context.targetData}
+    <ImageRound src={context.targetData.image} />
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.moments-circle {
+  --_moments-circle--brand-color: var(--moments-circle--brand-color, #00b8d8);
+  width: 6.25%rem;
+  min-width: 6.25%rem;
+  max-width: 6.25%rem;
+  height: 6.25%rem;
+  min-height: 6.25%rem;
+  max-height: 6.25%rem;
+  --image--rounded--inner--border-width: 1px;
+  --image--rounded--outer--border-color: var(--_moments-circle--brand-color);
+  --image--rounded--outer--border-width: 2px;
+}</style>

package/dist/media-center/media-center/moments/cmp.moments-circle.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/media-center/media-center/moments/index.d.ts

@@ -0,0 +1 @@
+export { default as MomentsCircle } from './cmp.moments-circle.svelte';

package/dist/media-center/media-center/moments/index.js

@@ -0,0 +1 @@
+export { default as MomentsCircle } from './cmp.moments-circle.svelte';

package/dist/media-center/media-center/streams-in-category/streams-in-category-panel-handler.svelte.d.ts

@@ -8,7 +8,7 @@ export declare class StreamsInCategoryPanelHandler {
     private _categoryId;
     private _categoryName;
     private _streams;
-    constructor(config: IMediaCenterConfig | null);
+    constructor(config: IMediaCenterConfig);
     get streamSectionItems(): StreamPlayerModel[];
     get categoryId(): string;
     get categoryName(): string;

package/dist/media-center/media-center/streams-in-category/streams-in-category-panel-handler.svelte.js

@@ -27,7 +27,7 @@ export class StreamsInCategoryPanelHandler {
         return this._activated && this._state === 'loading';
     }
     activate = async (categoryData) => {
-        if (!this.config || !categoryData) {
+        if (!categoryData || this.categoryId === categoryData.id) {
             return;
         }
         this._activated = true;

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

@@ -1,7 +1,50 @@
-export type MediaCenterMode = 'streams-feed' | 'posts-feed' | 'discover';
+import type { Locale } from '../../core/locale';
+import type { IMediaCenterConfig } from '../config/types';
+import type { PostPlayerModel, PostsPlayerProps } from '../../posts/posts-player/types';
+import type { IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamsPlayerProps } from '../../streams/streams-player/types';
+import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { IPlayerDataProvider } from '../../ui/player/providers';
+export type MediaCenterMode = 'feed' | 'discover';
 export type MediaCenterCategoryData = {
     id: string;
     name: string;
     parentId: string | undefined;
     parentName: string | undefined;
 };
+export type MediaCenterProps = {
+    config: IMediaCenterConfig;
+    settings?: MediaCenterSettings;
+    modeProps: MediaCenterModeProps;
+    closeOrchestrator: ICloseOrchestrator;
+};
+export type MediaCenterModeProps = {
+    mode: 'posts';
+    props: {
+        dataProvider: IPlayerDataProvider<PostPlayerModel>;
+        onPostActivated?: (id: string) => void;
+    };
+} | {
+    mode: 'streams';
+    props: {
+        dataProvider: IStreamsPlayerDataProvider;
+        amplificationParameters?: StreamAmplificationParameters;
+        onStreamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+    };
+} | {
+    mode: 'discover';
+};
+export type PlayerProps = {
+    type: 'posts';
+    props: PostsPlayerProps;
+} | {
+    type: 'streams';
+    props: StreamsPlayerProps;
+};
+export type MediaCenterSettings = {
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    disableBackground?: boolean;
+};

package/dist/media-page/index.d.ts

@@ -0,0 +1,121 @@
+import type { Locale } from '../core/locale';
+import { type IMediaCenterConfig } from '../media-center/config/types';
+export type { IMediaCenterConfig };
+export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
+/**
+ * Opens the media page modal.
+ *
+ * Two overloads (mutually exclusive; enforced by TypeScript):
+ * - Config mode: openMediaPageModal({ mediaCenterConfig, viewerSettings?, on? })
+ * - Internal config mode: openMediaPageModal({ id, initiator, graphqlOrigin?, viewerSettings?, on? })
+ *
+ * @param init Configuration options.
+ *
+ * Config mode (overload 1)
+ * @param {IMediaCenterConfig} init.mediaCenterConfig
+ *   Configuration for the media center.
+ *
+ * Internal config mode (overload 2)
+ * @param {string} init.id
+ *   Media page ID, used to construct an internal media-center config.
+ * @param {string} init.initiator
+ *   Initiator identifier (used for tracking/analytics and GraphQL).
+ * @param {string} [init.graphqlOrigin]
+ *   Optional GraphQL origin (base URL). If omitted, the default origin is determined internally.
+ *
+ * Common (optional)
+ * @param {MediaPageViewerSettings} [init.viewerSettings]
+ *   Viewer UI and behavior settings.
+ *
+ *   Fields of MediaPageViewerSettings:
+ *   - {boolean} [disableBackground]
+ *       If true , hides the viewer background image.
+ *   - {Locale} [locale='en']
+ *       Localization for the viewer UI. Supported values: 'en' | 'no'.
+ *       If omitted, the default locale 'en' is used.
+ *   - {boolean} [showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {boolean} [hideCloseButton]
+ *       If true, hides the close button.
+ *
+ * Events
+ * @param {{ closed?: () => void }} [init.on]
+ *   Optional event handlers.
+ * @param {() => void} [init.on.closed]
+ *   Called after the modal is fully closed (after unmount and removal from the DOM).
+ *
+ * Notes
+ * - If neither mediaCenterConfig nor id is specified, a warning is shown and the modal is not opened.
+ *
+ * @returns {void}
+ *
+ * @example <caption>Config mode</caption>
+ * ```ts
+ * import {
+ *   openMediaPageModal,
+ *   type IMediaCenterConfig,
+ * } from '@streamscloud/embeddable/media-page';
+ *
+ * const mediaCenterConfig: IMediaCenterConfig = {
+ *   // ...your media center configuration
+ * };
+ *
+ * openMediaPageModal({
+ *   mediaCenterConfig,
+ *   viewerSettings: {
+ *     // Locale defaults to 'en'; set 'no' to switch to Norwegian:
+ *     locale: 'no',
+ *     disableBackground: false,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: true,
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ *
+
+
+ * @example <caption>Internal config mode</caption>
+ * ```ts
+ * import { openMediaPageModal } from '@streamscloud/embeddable/media-page';
+ *
+ * openMediaPageModal({
+ *   id: 'media-page-123',
+ *   initiator: 'marketing-campaign',
+ *   graphqlOrigin: 'https://api.example.com',
+ *   viewerSettings: {
+ *     locale: 'en',
+ *     disableBackground: true,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: false,
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ */
+export declare function openMediaPageModal(init: {
+    mediaCenterConfig: IMediaCenterConfig;
+    viewerSettings?: MediaPageViewerSettings;
+    on?: {
+        closed?: () => void;
+    };
+}): void;
+export declare function openMediaPageModal(init: {
+    id: string;
+    initiator: string;
+    graphqlOrigin?: string;
+    viewerSettings?: MediaPageViewerSettings;
+    on?: {
+        closed?: () => void;
+    };
+}): void;
+export type MediaPageViewerSettings = {
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    hideCloseButton?: boolean;
+};

package/dist/media-page/index.js

@@ -0,0 +1,43 @@
+import { toastrWarning } from '../core/toastr';
+import { InternalMediaCenterConfig } from '../media-center/config/internal-media-center-config';
+import {} from '../media-center/config/types';
+import { MediaCenter } from '../media-center/media-center';
+import { CloseOrchestrator } from '../ui/player/close-orchestrator';
+import { ModalShadowHost } from '../ui/shadow-dom';
+import { mount, unmount } from 'svelte';
+export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
+export function openMediaPageModal(init) {
+    const { id, graphqlOrigin, initiator, viewerSettings, on } = init;
+    let mediaCenterConfig = init.mediaCenterConfig;
+    if (!mediaCenterConfig && id) {
+        mediaCenterConfig = new InternalMediaCenterConfig({ mediaPageId: id, graphqlOrigin, initiator });
+    }
+    if (!mediaCenterConfig) {
+        toastrWarning('Config is not specified.');
+        return;
+    }
+    const shadowHost = new ModalShadowHost();
+    let mounted = null;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.closed) {
+                on.closed();
+            }
+        },
+        canClose: !viewerSettings?.hideCloseButton
+    });
+    mounted = mount(MediaCenter, {
+        target: shadowHost.shadowRoot,
+        props: {
+            config: mediaCenterConfig,
+            settings: viewerSettings,
+            modeProps: {
+                mode: 'discover'
+            },
+            closeOrchestrator: makeCloseOrchestrator()
+        }
+    });
+    shadowHost.attachToBody();
+}

package/dist/posts/attachments/cmp.attachments.svelte

@@ -22,6 +22,7 @@ const trackingParams = $derived.by(() => {
           ad={ad}
           colors={colors}
           trackingParams={trackingParams}
+          locale={locale}
           on={{
             click: on?.adClick,
             impression: on?.adImpression