@clickview/player 0.0.3 → 0.0.4-rc.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,26 @@ const mockResources = <Resources> {
 
 const emptyLocalCacheAddresses = <LocalCacheAddress[]> [];
 
+const mockExtraData = {
+  title: 'Paralympics',
+  videoId: '',
+  viewerId: '',
+  viewerCustomerId: '',
+  region: '',
+  mediaId: '',
+  settings: {
+    showSubtitles: false,
+    playbackProfile: '',
+    playbackProfileLocalCache: '',
+    playbackSubtitleSizeDefault: ''
+  },
+  warning: 'Bloody Scenes, Violence, Alcohol Abuse and Death',
+  ratingCode: 'PG',
+  seriesName: 'Global Icons',
+  seasonNumber: 1,
+  episodeNumber: 2
+}
+
 const sources: { [key: string]: PlaybackObject } = {
   basic: {
     files: basicFiles,
@@ -178,7 +198,8 @@ const sources: { [key: string]: PlaybackObject } = {
       }]
     },
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   chapters: {
     files: basicFiles,
@@ -186,7 +207,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: mockChapters,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   vertical: {
     files: {
@@ -200,7 +222,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: mockChapters,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   error: {
     files: {
@@ -216,7 +239,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: emptyChapters,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   multipleQualities: {
     files: multipleFiles,
@@ -224,7 +248,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: emptyChapters,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   poster: {
     files: basicFiles,
@@ -233,7 +258,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 +268,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 +277,8 @@ const sources: { [key: string]: PlaybackObject } = {
     chapters: emptyChapters,
     subtitles: multipleSubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   multipleTracksWithDefault: {
     files: basicFiles,
@@ -276,7 +304,8 @@ const sources: { [key: string]: PlaybackObject } = {
       }]
     },
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   interactive: {
     files: basicFiles,
@@ -285,7 +314,8 @@ const sources: { [key: string]: PlaybackObject } = {
     additionalData: interactive,
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   clip: {
     files: basicFiles,
@@ -297,7 +327,8 @@ const sources: { [key: string]: PlaybackObject } = {
     },
     subtitles: emptySubtitles,
     localCacheAddresses: emptyLocalCacheAddresses,
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   },
   localcache: {
     files: multipleFiles,
@@ -309,7 +340,8 @@ const sources: { [key: string]: PlaybackObject } = {
       name: 'test',
       playbackProfile: '1080'
     }],
-    resources: mockResources
+    resources: mockResources,
+    ...mockExtraData
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickview/player",
-  "version": "0.0.3",
+  "version": "0.0.4-rc.0",
   "description": "ClickView Player",
   "main": "dist/player-app.js",
   "scripts": {
@@ -27,11 +27,13 @@
   "devDependencies": {
     "@babel/core": "7.11.6",
     "@clickview/eslint-config": "1.0.0",
-    "@clickview/player-font": "0.0.6",
-    "@clickview/tooling": "0.0.22",
+    "@clickview/player-font": "0.0.10",
+    "@clickview/tooling": "0.0.22-dev.1",
     "@storybook/react": "6.0.26",
+    "@types/chromecast-caf-sender": "1.0.3",
     "@types/cropperjs": "1.3.0",
     "@types/draft-js": "0.10.44",
+    "@types/node-polyglot": "0.4.34",
     "@types/react-draft-wysiwyg": "1.13.1",
     "@types/simplebar": "5.1.1",
     "@types/video.js": "7.3.11",
@@ -40,13 +42,14 @@
     "webpack-dev-server": "3.11.0"
   },
   "dependencies": {
-    "@clickview/styles": "1.0.15",
+    "@clickview/styles": "1.0.16-rc.0",
     "@microsoft/signalr": "5.0.2",
     "cropperjs": "1.5.6",
     "draft-convert": "2.1.10",
     "draft-js": "0.11.7",
     "keycode": "2.2.0",
     "react-draft-wysiwyg": "1.14.5",
+    "react-textarea-autosize": "8.3.2",
     "simplebar": "5.3.0",
     "simplebar-react": "2.3.0",
     "video.js": "7.11.2",

package/typings/utils/imports.d.ts

@@ -6,7 +6,7 @@
 declare module '*.scss';
 declare module '*.svg';
 
-declare module "*.json" {
+declare module '*.json' {
   export const value: any;
   export default value;
 }