@clickview/player 0.0.1 → 0.0.2-rc.0

package/.storybook/preview-head.html

@@ -1,3 +1,4 @@
 <!-- TODO: Link to stylesheet -->
 <!-- <link rel="stylesheet" href="player-app.css"> -->
-<link rel="stylesheet" href="https://online.clickview.com.au/Assets/css/compiled/modules/styles/cv-styles.css?v=7.35.0">
+<link rel="stylesheet" href="https://online.clickview.com.au/Assets/css/compiled/modules/styles/cv-styles.css?v=7.35.0">
+<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

package/.storybook/stories/Clips.stories.tsx

@@ -50,6 +50,23 @@ export const ClipPlayback = () =>
 
 ClipPlayback.storyName = 'Clip Playback';
 
+export const CreateClipButton = () => {
+  const [ showCreateClipPlayer, setShowCreateClipPlayer ] = React.useState(false);
+
+  if (showCreateClipPlayer)
+    return <ClipForm />;
+
+  return (
+    <ClickViewPlayer
+      viewKey='basic'
+      fetch={mockplayerApi}
+      onClickCreateClip={() => setShowCreateClipPlayer(true)}
+    />
+  );
+};
+
+CreateClipButton.storyName = 'Create Clip Button';
+
 export const CreateClip = () => <ClipForm />;
 
 CreateClip.storyName = 'Create Clip';
@@ -60,4 +77,4 @@ EditClip.storyName = 'Edit Clip';
 
 export const MinDurationClip = () => <ClipForm minDuration={30} />;
 
-MinDurationClip.storyName = 'Create Clip with 30s min duration';
+MinDurationClip.storyName = 'Create Clip with 30s min duration';

package/.storybook/stories/Interactives.stories.tsx

@@ -3,6 +3,8 @@ import { ClickViewInteractivePlayer, InteractivePlayer } from '../../src/index';
 import { InteractiveMode } from '../../src/plugins/interactive-plugin/interfaces';
 import { mockplayerApi } from './utils/mock-playerapi';
 
+const IMAGE_API_URL_STAGING = 'https://image.api.stg.cvnet.io';
+
 export default {
   title: 'Interactives'
 };
@@ -14,7 +16,8 @@ export const Create = () =>
   <ClickViewInteractivePlayer
     viewKey='basic'
     fetch={mockplayerApi}
-    mode={InteractiveMode.Create} />;
+    mode={InteractiveMode.Create}
+    imageApi={IMAGE_API_URL_STAGING} />;
 
 export const Annotation = () => {
   function onReady(player: InteractivePlayer): void {

package/.storybook/stories/Resources.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ClickViewPlayer } from '../../src';
+import { mockplayerApi } from './utils/mock-playerapi';
+
+export default {
+  title: 'Resources'
+};
+
+export const Base = () =>
+  <ClickViewPlayer
+    viewKey='basic'
+    fetch={mockplayerApi}
+    imageCdnUrl='https://image.api.stg.cvnet.io'
+    showResources
+  />;

package/.storybook/stories/utils/mock-playerapi.ts

@@ -1,4 +1,4 @@
-import { PlaybackObject, Files, Chapters, Subtitles, LocalCacheAddress } from '../../../src/interfaces/models/PlaybackObject';
+import { PlaybackObject, Files, Chapters, Subtitles, LocalCacheAddress, Resources } from '../../../src/interfaces/models/PlaybackObject';
 
 import interactive from '../assets/interactive.json';
 
@@ -82,6 +82,85 @@ const multipleSubtitles = <Subtitles> {
   }]
 };
 
+const mockResources = <Resources> {
+  list: [
+    {
+      name: "Comprehension Questions",
+      url: "https://file.api.stg.cvnet.io/v1/files/d9a638acb5e94845bde68ffcee9f268f",
+      metadata: {
+        type: 'pdf'
+      }
+    },
+    {
+      name: "Ice Cube",
+      url: "https://file.api.stg.cvnet.io/v1/files/cb537b963dd4492dbd46a7616240f704",
+      metadata: {
+        type: 'image'
+      }
+    },
+    {
+      name: "Key Concepts",
+      url: "https://file.api.stg.cvnet.io/v1/files/fee99545827647c5a833eb6d35457684"
+    },
+    {
+      name: "Classroom Activity: Who Is Centred?",
+      url: "https://file.api.stg.cvnet.io/v1/files/dffe3954b85a46019bb7f10653430aee"
+    },
+    {
+      name: "Who Is Centred?: The Geocentric Model vs Heliocentric Model",
+      url: "https://file.api.stg.cvnet.io/v1/files/ff1ac5c29d2b43a6a766e32626fdd55a"
+    },
+    {
+      name: "Endless Story Board Game: Instructions and Questions",
+      url: "https://file.api.stg.cvnet.io/v1/files/464090b8d1bc4ef78e0f3fae9b439f3e"
+    },
+    {
+      name: "Endless Story Board Game: Board Game Pieces",
+      url: "https://file.api.stg.cvnet.io/v1/files/39bbbef9b4274338afbfd5c3f11d4334"
+    },
+    {
+      name: "Outstanding Milestones in Mathematics",
+      url: "https://file.api.stg.cvnet.io/v1/files/21c3a97dbefb4c678c40ea2f302dde09"
+    },
+    {
+      name: "Classroom Experiment Activity: Imitating Galileo",
+      url: "https://file.api.stg.cvnet.io/v1/files/63b0311220514282b34fa389070ea1c1"
+    },
+    {
+      name: "Key Concepts: The Language of Science",
+      url: "https://file.api.stg.cvnet.io/v1/files/c395bb90504f44d7b082cd86178102ae"
+    },
+    {
+      name: "Classroom Activity: Who Is Centred?",
+      url: "https://file.api.stg.cvnet.io/v1/files/3f6453ade0b04ed191b1e4707c1b593c"
+    },
+    {
+      name: "Who Is Centred?: The Geocentric Model vs Heliocentric Model",
+      url: "https://file.api.stg.cvnet.io/v1/files/6b1319fcdb80425d86f7a89bc02c90f1"
+    },
+    {
+      name: "Endless Story Board Game: Instructions and Questions",
+      url: "https://file.api.stg.cvnet.io/v1/files/f8d70f5fd1f1442e9acd85fc23b02700"
+    },
+    {
+      name: "Endless Story Board Game: Board Game Pieces",
+      url: "https://file.api.stg.cvnet.io/v1/files/1c3f60c920534a129744a516c1413cf4"
+    },
+    {
+      name: "Outstanding Milestones in Mathematics",
+      url: "https://file.api.stg.cvnet.io/v1/files/cecb07e558244a39b9f0772c5938d0d7"
+    },
+    {
+      name: "Classroom Experiment Activity: Imitating Galileo",
+      url: "https://file.api.stg.cvnet.io/v1/files/5c179f615a974dccae89f6533fbda4c9"
+    },
+    {
+      name: "Maths, the Language of Science",
+      url: "https://file.api.stg.cvnet.io/v1/files/b58daa1d60d5474ba556e2a3fc4942b7"
+    }
+  ]
+};
+
 const emptyLocalCacheAddresses = <LocalCacheAddress[]> [];
 
 const sources: { [key: string]: PlaybackObject } = {
@@ -98,14 +177,16 @@ const sources: { [key: string]: PlaybackObject } = {
         mimeType: 'text/vtt'
       }]
     },
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   chapters: {
     files: basicFiles,
     mediaType: 'MasterVideo',
     chapters: mockChapters,
     subtitles: emptySubtitles,
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   vertical: {
     files: {
@@ -118,7 +199,8 @@ const sources: { [key: string]: PlaybackObject } = {
     mediaType: 'MasterVideo',
     chapters: mockChapters,
     subtitles: emptySubtitles,
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   error: {
     files: {
@@ -133,14 +215,16 @@ const sources: { [key: string]: PlaybackObject } = {
     mediaType: 'MasterVideo',
     chapters: emptyChapters,
     subtitles: emptySubtitles,
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   multipleQualities: {
     files: multipleFiles,
     mediaType: 'MasterVideo',
     chapters: emptyChapters,
     subtitles: emptySubtitles,
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   poster: {
     files: basicFiles,
@@ -148,7 +232,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: emptyChapters,
     posterUrl: 'https://image.api.stg.cvnet.io/v2/thumbnails/Q229lo',
     subtitles: emptySubtitles,
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   everything: {
     files: multipleFiles,
@@ -156,14 +241,16 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: mockChapters,
     posterUrl: 'https://image.api.stg.cvnet.io/v2/thumbnails/Q229lo',
     subtitles: multipleSubtitles,
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   multipleSubtitles: {
     files: basicFiles,
     mediaType: 'MasterVideo',
     chapters: emptyChapters,
     subtitles: multipleSubtitles,
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   multipleTracksWithDefault: {
     files: basicFiles,
@@ -188,7 +275,8 @@ const sources: { [key: string]: PlaybackObject } = {
         mimeType: 'text/vtt'
       }]
     },
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   interactive: {
     files: basicFiles,
@@ -196,7 +284,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: emptyChapters,
     additionalData: interactive,
     subtitles: emptySubtitles,
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   clip: {
     files: basicFiles,
@@ -207,7 +296,8 @@ const sources: { [key: string]: PlaybackObject } = {
       endTime: 240
     },
     subtitles: emptySubtitles,
-    localCacheAddresses: emptyLocalCacheAddresses
+    localCacheAddresses: emptyLocalCacheAddresses,
+    resources: mockResources
   },
   localcache: {
     files: multipleFiles,
@@ -218,7 +308,8 @@ const sources: { [key: string]: PlaybackObject } = {
       httpsAddress: 'https://local.clickviewlocalcache.com:9055',
       name: 'test',
       playbackProfile: '1080'
-    }]
+    }],
+    resources: mockResources
   }
 };
 

package/dist/libs/analytics/src/Analytics.d.ts

@@ -0,0 +1,10 @@
+import { AnalyticsDataPayload } from 'libs/analytics/models/AnalyticsEvent';
+import { ActionContext, EventVersion } from 'libs/analytics/interfaces';
+export declare const Analytics: {
+    /**
+     * Push/emit all events along the analytics firehose
+     * @param eventType
+     * @param data Data to be passed to AnalyticsClient
+     */
+    log<TType extends import("./interfaces").UserAction, TData extends AnalyticsDataPayload>(eventType: TType, data: TData, actionContext?: ActionContext, eventVersion?: EventVersion): void;
+};

package/dist/libs/analytics/src/AnalyticsHelper.d.ts

@@ -0,0 +1,30 @@
+import { ObjectHash } from 'backbone';
+import { Core } from 'libs/common/core';
+import { ActionContext, AnalyticsOptions, ActionDescriptor, InteractionTypeDescriptor, InteractionType } from 'libs/analytics/interfaces';
+export declare const AnalyticsHelper: {
+    logUserAction(data: ObjectHash | ObjectHash[], analyticsOptions: AnalyticsOptions): void;
+    logNavigate(appLink: Core.AppLink, options: ObjectHash): void;
+    mergeOptions(baseOptions: AnalyticsOptions, newOptions: AnalyticsOptions): AnalyticsOptions;
+    buildActionContext(options?: AnalyticsOptions): ActionContext;
+    buildUserActionEvent(options?: AnalyticsOptions): ObjectHash;
+    buildCurrentLocation(): string;
+    /**
+     * Search logging helpers
+     */
+    /**
+     * Create a search event that is depenedent on whether we page loaded into search
+     * or used the search bar directly.
+     */
+    buildSearchEvent(query: string, descriptor: ActionDescriptor): ObjectHash;
+    buildInstantSearchEvent(query: string, suggestion: ObjectHash, source: string): ObjectHash;
+    /**
+     * Resources Helpers
+     */
+    /**
+     * Map our general InteractionType to an appropriate anayltics descriptor type.
+     * The reason we do this is to maintain a seperation between analytics metadata and
+     * actual domain data.
+     * @param type
+     */
+    mapInteractionType(type: InteractionType): InteractionTypeDescriptor;
+};

package/dist/libs/analytics/src/clients/CollectionApiClient.d.ts

@@ -0,0 +1,48 @@
+import 'whatwg-fetch';
+import { IncomingEvent } from 'libs/analytics/models/CollectionEvent';
+import { HashObject } from 'libs/analytics/interfaces/HashObject';
+import { RegionalUrl } from 'libs/analytics/interfaces/RegionalUrl';
+import { User } from 'libs/analytics/interfaces/User';
+import { RegionName } from 'libs/analytics/enums/RegionName';
+interface CollectionApiClientOptions {
+    productName: string;
+    productVersion: string;
+    regionName: RegionName;
+    collectionApiUrls: RegionalUrl;
+    collectionApiClientId: string;
+    getUser: () => Promise<User>;
+    shouldLog?: (event: IncomingEvent) => boolean;
+    formatData?: (event: IncomingEvent) => HashObject | HashObject[];
+}
+/**
+ * A client for logging to CollectionApi.
+ * It should have no library dependencies and anything that it references
+ * should also have no library dependencies.
+ */
+export declare class CollectionApiClient {
+    private options;
+    constructor(options: CollectionApiClientOptions);
+    initialize(): void;
+    get name(): string;
+    log(event: IncomingEvent | IncomingEvent[]): Promise<void>;
+    private logBulk;
+    private validateOptions;
+    private shouldLog;
+    private postData;
+    private getSignatureHeader;
+    private getRegionalUrl;
+    private validateEvent;
+    private formatData;
+    private getEventData;
+    private extractData;
+    private getUserData;
+    /**
+     * Until region is added to the user Auth claims, we use countryCode to obtain region.
+     */
+    private getRegion;
+    private getPlatformMetadata;
+    private getEventMetadata;
+    private getRegionByName;
+    private normalizeYearGroup;
+}
+export {};

package/dist/libs/analytics/src/constants/CountryRegionMapping.d.ts

@@ -0,0 +1,7 @@
+import { CountryCode } from 'libs/analytics/enums/CountryCode';
+import { RegionName } from 'libs/analytics/enums/RegionName';
+export declare const CountryRegionMapping: {
+    au: RegionName;
+    nz: RegionName;
+    uk: RegionName;
+};

package/dist/libs/analytics/src/constants/EventFirehose.d.ts

@@ -0,0 +1,4 @@
+export declare enum EventFirehose {
+    Inlet = "event:inlet",
+    Outlet = "event:outlet"
+}

package/dist/libs/analytics/src/constants/GlobalChannels.d.ts

@@ -0,0 +1,3 @@
+export declare const GlobalChannels: {
+    ANALYTICS: string;
+};

package/dist/libs/analytics/src/constants/Regions.d.ts

@@ -0,0 +1,6 @@
+import { Region } from 'libs/analytics/interfaces/Region';
+export declare const Regions: {
+    CvApSoutheast1: Region;
+    CvApSoutheast2: Region;
+    CvEuWest1: Region;
+};

package/dist/libs/analytics/src/constants/Services.d.ts

@@ -0,0 +1,4 @@
+export declare enum Services {
+    Analytics = "AnalyticsService",
+    Context = "ContextService"
+}

package/dist/libs/analytics/src/enums/CountryCode.d.ts

@@ -0,0 +1,5 @@
+export declare enum CountryCode {
+    AU = "au",
+    NZ = "nz",
+    UK = "uk"
+}

package/dist/libs/analytics/src/enums/RegionName.d.ts

@@ -0,0 +1,5 @@
+export declare enum RegionName {
+    CvApSoutheast1 = "cv-ap-southeast-1",
+    CvApSoutheast2 = "cv-ap-southeast-2",
+    CvEuWest1 = "cv-eu-west-1"
+}