@clickview/player 0.0.2 → 0.0.3-dev-us.0

package/.storybook/main.js

@@ -13,6 +13,7 @@ module.exports = {
         rules: custom.module.rules
       },
       resolve: custom.resolve,
+      resolveLoader: custom.resolveLoader,
       plugins: [
         ...config.plugins,
         ...custom.plugins

package/.storybook/stories/Base.stories.tsx

@@ -3,13 +3,14 @@ import { ClickViewPlayer, Player } from '../../src/index';
 import { mockplayerApi } from './utils/mock-playerapi';
 import { mockSetups } from './utils/mock-setup';
 
+const PLAYER_API_STAGING = 'https://player.web.au.stg.cvnet.io';
+
 export default {
   title: 'Base'
 };
 
-export const Default = () =>
-  <ClickViewPlayer viewKey='basic' fetch={mockplayerApi} />;
-
+export const Default = () => <ClickViewPlayer viewKey='basic' fetch={mockplayerApi} />;
+  
 Default.storyName = 'Default';
 
 export const Chapters = () =>
@@ -48,7 +49,7 @@ export const Error = () =>
   <ClickViewPlayer viewKey='error' fetch={mockplayerApi} />;
 
 export const PlayerApi = () =>
-  <ClickViewPlayer viewKey='camwashere' />;
+  <ClickViewPlayer viewKey='camwashere' playerApi={new URL(PLAYER_API_STAGING)} />;
 
 PlayerApi.storyName = 'Player API';
 
@@ -56,7 +57,7 @@ PlayerApi.storyName = 'Player API';
  * This story uses an intentionally invalid viewKey.
  */
 export const PlayerApiError = () =>
-  <ClickViewPlayer viewKey='camwashere_error' />;
+  <ClickViewPlayer viewKey='camwashere_error' playerApi={new URL(PLAYER_API_STAGING)} />;
 
 PlayerApiError.storyName = 'Player API Error';
 

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

@@ -1,68 +1,64 @@
 import React from 'react';
-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'
 };
 
-export const Default = () =>
-  <ClickViewInteractivePlayer viewKey='interactive' fetch={mockplayerApi} />;
+export const Default = () => <h1>Sorry no interactives</h1>;
 
-export const Create = () =>
-  <ClickViewInteractivePlayer
-    viewKey='basic'
-    fetch={mockplayerApi}
-    mode={InteractiveMode.Create}
-    imageApi={IMAGE_API_URL_STAGING} />;
+Default.storyName = 'Default';
 
-export const Annotation = () => {
-  function onReady(player: InteractivePlayer): void {
-    player.currentTime(15);
-  }
+// export const Create = () =>
+//   <ClickViewInteractivePlayer
+//     viewKey='interactive'
+//     fetch={mockplayerApi}
+//     mode={InteractiveMode.Create}
+//     imageApi={new URL(IMAGE_API_URL_STAGING)} />;
 
-  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
-};
+// export const Annotation = () => {
+//   function onReady(player: InteractivePlayer): void {
+//     player.currentTime(15);
+//   }
 
-export const ShortAnswer = () => {
-  function onReady(player: InteractivePlayer): void {
-    player.currentTime(13);
-  }
+//   return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+// };
 
-  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
-};
+// export const ShortAnswer = () => {
+//   function onReady(player: InteractivePlayer): void {
+//     player.currentTime(13);
+//   }
 
-export const Image = () => {
-  function onReady(player: InteractivePlayer): void {
-    player.currentTime(17);
-  }
+//   return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+// };
 
-  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
-};
+// export const Image = () => {
+//   function onReady(player: InteractivePlayer): void {
+//     player.currentTime(17);
+//   }
 
-export const TrueOrFalse = () => {
-  function onReady(player: InteractivePlayer): void {
-    player.currentTime(5);
-  }
+//   return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+// };
 
-  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
-};
+// export const TrueOrFalse = () => {
+//   function onReady(player: InteractivePlayer): void {
+//     player.currentTime(5);
+//   }
 
-export const MultipleChoice = () => {
-  function onReady(player: InteractivePlayer): void {
-    player.currentTime(7);
-  }
+//   return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+// };
 
-  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
-};
+// export const MultipleChoice = () => {
+//   function onReady(player: InteractivePlayer): void {
+//     player.currentTime(7);
+//   }
 
-export const MissingWord = () => {
-  function onReady(player: InteractivePlayer): void {
-    player.currentTime(9);
-  }
+//   return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+// };
 
-  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
-};
+// export const MissingWord = () => {
+//   function onReady(player: InteractivePlayer): void {
+//     player.currentTime(9);
+//   }
+
+//   return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+// };

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

@@ -163,6 +163,20 @@ const mockResources = <Resources> {
 
 const emptyLocalCacheAddresses = <LocalCacheAddress[]> [];
 
+const mockExtraData = {
+  videoId: '',
+  viewerId: '',
+  viewerCustomerId: '',
+  region: '',
+  mediaId: '',
+  settings: {
+    showSubtitles: false,
+    playbackProfile: '',
+    playbackProfileLocalCache: '',
+    playbackSubtitleSizeDefault: ''
+  }
+}
+
 const sources: { [key: string]: PlaybackObject } = {
   basic: {
     files: basicFiles,
@@ -178,7 +192,8 @@ const sources: { [key: string]: PlaybackObject } = {
       }]
     },
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   chapters: {
     files: basicFiles,
@@ -186,7 +201,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: mockChapters,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   vertical: {
     files: {
@@ -200,7 +216,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: mockChapters,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   error: {
     files: {
@@ -216,7 +233,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: emptyChapters,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   multipleQualities: {
     files: multipleFiles,
@@ -224,7 +242,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: emptyChapters,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   poster: {
     files: basicFiles,
@@ -233,7 +252,8 @@ const sources: { [key: string]: PlaybackObject } = {
     posterUrl: 'https://image.api.stg.cvnet.io/v2/thumbnails/Q229lo',
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   everything: {
     files: multipleFiles,
@@ -242,7 +262,8 @@ const sources: { [key: string]: PlaybackObject } = {
     posterUrl: 'https://image.api.stg.cvnet.io/v2/thumbnails/Q229lo',
     subtitles: multipleSubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   multipleSubtitles: {
     files: basicFiles,
@@ -250,7 +271,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: emptyChapters,
     subtitles: multipleSubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   multipleTracksWithDefault: {
     files: basicFiles,
@@ -276,7 +298,8 @@ const sources: { [key: string]: PlaybackObject } = {
       }]
     },
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   interactive: {
     files: basicFiles,
@@ -285,7 +308,8 @@ const sources: { [key: string]: PlaybackObject } = {
     additionalData: interactive,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   clip: {
     files: basicFiles,
@@ -297,7 +321,8 @@ const sources: { [key: string]: PlaybackObject } = {
     },
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   localcache: {
     files: multipleFiles,
@@ -309,7 +334,8 @@ const sources: { [key: string]: PlaybackObject } = {
       name: 'test',
       playbackProfile: '1080'
     }],
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   }
 };