@clickview/player 0.0.0-rc.4 → 0.0.0

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@clickview/eslint-config"]
+}

package/.storybook/main.js

@@ -0,0 +1,22 @@
+const custom = require('../tooling/webpack.config');
+
+module.exports = {
+  stories: [
+    './**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  webpackFinal: (config) => {
+    return { 
+      ...config,
+      context: custom.context,
+      module: {
+        ...config.module,
+        rules: custom.module.rules
+      },
+      resolve: custom.resolve,
+      plugins: [
+        ...config.plugins,
+        ...custom.plugins
+      ]
+    };
+  },
+};

package/.storybook/preview-head.html

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

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

@@ -0,0 +1,132 @@
+import React from 'react';
+import { ClickViewPlayer, Player } from '../../src/index';
+import { mockplayerApi } from './utils/mock-playerapi';
+import { mockSetups } from './utils/mock-setup';
+
+export default {
+  title: 'Base'
+};
+
+export const Default = () =>
+  <ClickViewPlayer viewKey='basic' fetch={mockplayerApi} />;
+
+Default.storyName = 'Default';
+
+export const Chapters = () =>
+  <ClickViewPlayer viewKey='chapters' fetch={mockplayerApi} />;
+
+Chapters.storyName = 'Chapters';
+
+export const Thumbnails = () =>
+  <ClickViewPlayer viewKey='chapters' fetch={mockplayerApi} setup={mockSetups.thumbnails} />;
+
+Thumbnails.storyName = 'Thumbnails';
+
+export const Vertical = () => (
+  <div style={{ width: '300px' }}>
+    <ClickViewPlayer viewKey='vertical' fetch={mockplayerApi} />
+  </div>
+);
+
+Vertical.storyName = 'Vertical';
+
+export const NoControls = () =>
+  <ClickViewPlayer viewKey='basic' fetch={mockplayerApi} controls={false} />;
+
+NoControls.storyName = 'No Controls';
+
+export const OpenExternally = () =>
+  <ClickViewPlayer
+    viewKey='basic'
+    fetch={mockplayerApi}
+    getExternalLink={(options: any) => `https://online.clickview.com.au/share?sharecode=1ef15209&t=${options.currentTime}`}
+  />;
+
+OpenExternally.storyName = 'Open Externally';
+
+export const Error = () =>
+  <ClickViewPlayer viewKey='error' fetch={mockplayerApi} />;
+
+export const PlayerApi = () =>
+  <ClickViewPlayer viewKey='camwashere' />;
+
+PlayerApi.storyName = 'Player API';
+
+/**
+ * This story uses an intentionally invalid viewKey.
+ */
+export const PlayerApiError = () =>
+  <ClickViewPlayer viewKey='camwashere_error' />;
+
+PlayerApiError.storyName = 'Player API Error';
+
+export const MultipleQualities = () =>
+  <ClickViewPlayer viewKey='multipleQualities' fetch={mockplayerApi} />;
+
+export const Poster = () =>
+  <ClickViewPlayer viewKey='poster' fetch={mockplayerApi} />;
+
+export const Everything = () =>
+  <ClickViewPlayer
+      viewKey='everything'
+      fetch={mockplayerApi}
+      setup={mockSetups.everything}
+      getExternalLink={(options: any) => `https://online.clickview.com.au/share?sharecode=1ef15209&t=${options.currentTime}`}
+    />;
+
+export const LocalCache = () => <ClickViewPlayer viewKey='localcache' fetch={mockplayerApi} />;
+
+export const StyleGuideline = () => {
+  const [ hidden, setHidden ] = React.useState(false);
+
+  function onClick(): void {
+    setHidden(!hidden);
+  }
+
+  return (
+    <div
+      style={{
+        width: '1100px',
+        height: '619px',
+        position: 'relative'
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          right: '0px',
+          bottom: '0px',
+          backgroundImage: 'url(https://i.imgur.com/nqKupnk.png)',
+          zIndex: 2,
+          display: hidden ? 'none' : 'block'
+        }}
+      ></div>
+      <div style={{ position: 'relative', zIndex: 1 }}>
+        <ClickViewPlayer
+          viewKey='everything'
+          fetch={mockplayerApi}
+          setup={mockSetups.everything}
+        />
+      </div>
+
+    <button onClick={onClick}>Toggle</button>
+    </div>
+  )
+}
+
+export const PlayNextVideo = () => {
+  return <ClickViewPlayer 
+    // viewKey='basic'
+    viewKey='chapters'
+    fetch={mockplayerApi}
+    onReady={(player: Player) => {
+      player.setNextVideo({
+        name: 'The Equalizer',
+        thumbnailUrl: 'https://image.api.stg.cvnet.io/v2/thumbnails/Q229lo'
+      }, () => {
+        console.log('playNextVideo')
+      });
+    }} />;
+}

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ClickViewPlayer, ClickViewCreateClipPlayer } from '../../src/index';
+import { mockplayerApi } from './utils/mock-playerapi';
+
+interface ClipFormProps {
+  startTime?: number;
+  endTime?: number;
+  minDuration?: number;
+}
+
+function ClipForm(props: ClipFormProps): JSX.Element {
+  const [ startTime, setStartTime ] = React.useState(props.startTime);
+  const [ endTime, setEndTime ] = React.useState(props.endTime);
+
+  const getInputValue = (time?: number) => {
+    return isNaN(time)
+      ? ''
+      : time;
+  };
+
+  return (
+    <>
+      <ClickViewCreateClipPlayer
+        viewKey='basic'
+        fetch={mockplayerApi}
+        startTime={startTime}
+        onChangeStartTime={setStartTime}
+        endTime={endTime}
+        onChangeEndTime={setEndTime}
+        minDuration={props.minDuration}
+      />
+      <div style={{ marginTop: '15px' }}>
+        <label>Start Time (s)</label>
+        <input type='number' value={getInputValue(startTime)} onChange={e => setStartTime(+e.target.value)} />
+        <label>End Time (s)</label>
+        <input type='number' value={getInputValue(endTime)} onChange={e => setEndTime(+e.target.value)} />
+        <label>Duration (s)</label>
+        <input type='number' value={getInputValue(endTime - startTime)} readOnly />
+      </div>
+    </>
+  );
+}
+
+export default {
+  title: 'Clips'
+};
+
+export const ClipPlayback = () =>
+  <ClickViewPlayer viewKey='clip' fetch={mockplayerApi} />;
+
+ClipPlayback.storyName = 'Clip Playback';
+
+export const CreateClip = () => <ClipForm />;
+
+CreateClip.storyName = 'Create Clip';
+
+export const EditClip = () => <ClipForm startTime={100} endTime={200} />;
+
+EditClip.storyName = 'Edit Clip';
+
+export const MinDurationClip = () => <ClipForm minDuration={30} />;
+
+MinDurationClip.storyName = 'Create Clip with 30s min duration';

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { ClickViewInteractivePlayer, InteractivePlayer } from '../../src/index';
+import { InteractiveMode } from '../../src/plugins/interactive-plugin/interfaces';
+import { mockplayerApi } from './utils/mock-playerapi';
+
+export default {
+  title: 'Interactives'
+};
+
+export const Default = () =>
+  <ClickViewInteractivePlayer viewKey='interactive' fetch={mockplayerApi} />;
+
+export const Create = () =>
+  <ClickViewInteractivePlayer
+    viewKey='basic'
+    fetch={mockplayerApi}
+    mode={InteractiveMode.Create} />;
+
+export const Annotation = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(15);
+  }
+
+  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+};
+
+export const ShortAnswer = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(13);
+  }
+
+  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+};
+
+export const Image = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(17);
+  }
+
+  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+};
+
+export const TrueOrFalse = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(5);
+  }
+
+  return <ClickViewInteractivePlayer onReady={onReady} viewKey='interactive' fetch={mockplayerApi} autoplay={true} />;
+};
+
+export const MultipleChoice = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(7);
+  }
+
+  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/Subtitles.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ClickViewPlayer } from '../../src/index';
+import { mockplayerApi } from './utils/mock-playerapi';
+
+export default {
+  title: 'Subtitles'
+};
+
+export const SingleTrack = () =>
+  <ClickViewPlayer viewKey='basic' fetch={mockplayerApi} />;
+
+SingleTrack.storyName = 'Single Track';
+
+export const MultipleTracksWithDefault = () =>
+  <ClickViewPlayer viewKey='multipleTracksWithDefault' fetch={mockplayerApi} />;
+
+MultipleTracksWithDefault.storyName = 'Multiple Tracks with default';
+
+export const MultipleTracks = () =>
+  <ClickViewPlayer viewKey='multipleSubtitles' fetch={mockplayerApi} />;
+
+MultipleTracks.storyName = 'Multiple Tracks';

package/.storybook/stories/assets/chapters.vtt

@@ -0,0 +1,19 @@
+WEBVTT
+
+00:00.000 --> 00:05.000
+Waves
+
+00:05.000 --> 00:11.000
+Some More Waves
+
+00:11.000 --> 00:13.000
+Waves hitting Rocks
+
+00:13.000 --> 00:20.000
+Rocky Rocks
+
+00:20.000 --> 00:26.000
+More Rocks
+
+00:26.000 --> 00:28.000
+End of waves

package/.storybook/stories/assets/en.vtt

@@ -0,0 +1,8 @@
+WEBVTT
+
+00:01.000 --> 00:15.000
+- Never drink liquid nitrogen.
+
+00:17.000 --> 00:25.000
+- It will perforate your stomach.
+- You could die.

package/.storybook/stories/assets/es.vtt

@@ -0,0 +1,8 @@
+WEBVTT
+
+00:01.000 --> 00:15.000
+- Nunca beba nitrógeno líquido.
+
+00:17.000 --> 00:25.000
+- Perforará tu estómago.
+- Podrías morir.

package/.storybook/stories/assets/fr.vtt

@@ -0,0 +1,8 @@
+WEBVTT
+
+00:01.000 --> 00:15.000
+- Ne buvez jamais d'azote liquide.
+
+00:17.000 --> 00:25.000
+- Il perforera votre estomac.
+- Tu pourrais mourir.

package/.storybook/stories/assets/interactive.json

@@ -0,0 +1,451 @@
+{
+  "timepoints": [{
+      "interactions": [{
+          "data": {
+              "sentence": "A news website keeping track of the number of clicks stories receive is an example of a {17} tool used to gather information."
+          },
+          "actionableItems": [{
+              "name": "digital",
+              "order": 17,
+              "isCorrect": true,
+              "interactionId": 704598,
+              "id": 1560253,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:27:03",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "A news website keeping track of the number of clicks stories receive is an example of a _______ tool used to gather information.",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709577,
+          "typeId": 6,
+          "type": {
+              "name": "Missing word",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/missing-word-v2.png",
+              "colour": "51ada3",
+              "id": 6,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704598,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 2500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709577,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {},
+          "actionableItems": [{
+              "name": "True",
+              "order": 0,
+              "isCorrect": false,
+              "interactionId": 704603,
+              "id": 1560263,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:27:41",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "False",
+              "order": 1,
+              "isCorrect": true,
+              "interactionId": 704603,
+              "id": 1560262,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:27:41",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "A 'cookie' is term used to describe personalised, targeted advertisements.",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709582,
+          "typeId": 3,
+          "type": {
+              "name": "True or False",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/true-or-false-v2.png",
+              "colour": "b18cbb",
+              "id": 3,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704603,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 4500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709582,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {},
+          "actionableItems": [{
+              "name": "Advertising",
+              "order": 0,
+              "isCorrect": true,
+              "interactionId": 704604,
+              "id": 1560270,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:28:33",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "Social media",
+              "order": 1,
+              "isCorrect": true,
+              "interactionId": 704604,
+              "id": 1560269,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:28:33",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "News and 'fake news'",
+              "order": 2,
+              "isCorrect": true,
+              "interactionId": 704604,
+              "id": 1560271,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:28:33",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "Election campaigns",
+              "order": 3,
+              "isCorrect": true,
+              "interactionId": 704604,
+              "id": 1560268,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:28:33",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "Select all that apply. In what contexts might 'hyper-nudging' occur?",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709583,
+          "typeId": 1,
+          "type": {
+              "name": "Multiple Choice",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/multiple-choice-v2.png",
+              "colour": "629fc9",
+              "id": 1,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704604,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 6500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709583,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {
+              "sentence": "Cambridge Analytica had access not only to their own data, but also data made available to them by {18}."
+          },
+          "actionableItems": [{
+              "name": "Facebook",
+              "order": 18,
+              "isCorrect": true,
+              "interactionId": 704608,
+              "id": 1560286,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:29:22",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "Cambridge Analytica had access not only to their own data, but also data made available to them by _________.",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709587,
+          "typeId": 6,
+          "type": {
+              "name": "Missing word",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/missing-word-v2.png",
+              "colour": "51ada3",
+              "id": 6,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704608,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 8500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709587,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {},
+          "actionableItems": [{
+              "name": "True",
+              "order": 0,
+              "isCorrect": true,
+              "interactionId": 704613,
+              "id": 1560300,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:30:27",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "False",
+              "order": 1,
+              "isCorrect": false,
+              "interactionId": 704613,
+              "id": 1560301,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:30:27",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "Companies can combine information from multiple different digital sources to draw conclusions about people's behaviour.",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709592,
+          "typeId": 3,
+          "type": {
+              "name": "True or False",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/true-or-false-v2.png",
+              "colour": "b18cbb",
+              "id": 3,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704613,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 10500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709592,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {},
+          "actionableItems": [{
+              "name": "Answer",
+              "order": 0,
+              "isCorrect": null,
+              "interactionId": 704616,
+              "id": 1560311,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:32:59",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "Think of a form of social media or an app that you use regularly. What personal details or other data do you think it has about you?",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709595,
+          "typeId": 2,
+          "type": {
+              "name": "Short Answer",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/short-answer-v2.png",
+              "colour": "73b18c",
+              "id": 2,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704616,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 12500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709595,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  },{
+    "interactions": [{
+        "data": {
+            "annotation": "\n        Discussion Time!<br><br>Can you think of a choice you have made that felt like the RIGHT thing to do?&nbsp;<br><br>What were the consequences?<br><br>"
+        },
+        "actionableItems": [{
+            "name": "Answer",
+            "order": 0,
+            "isCorrect": null,
+            "interactionId": 702581,
+            "id": 1556100,
+            "deleted": false,
+            "dateCreated": "2020-11-03T21:34:21",
+            "dateDeleted": null,
+            "dateModified": null
+        }],
+        "name": "Annotation",
+        "order": 0,
+        "description": null,
+        "errorMessage": null,
+        "isRequired": false,
+        "interactiveId": 189978,
+        "timepointId": 707559,
+        "typeId": 4,
+        "type": {
+            "name": "Annotation",
+            "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/annotation-v2.png",
+            "colour": "f07e7e",
+            "id": 4,
+            "deleted": false,
+            "dateCreated": "2015-10-19T09:01:50",
+            "dateDeleted": null,
+            "dateModified": null
+        },
+        "id": 702581,
+        "deleted": false,
+        "dateCreated": "0001-01-01T00:00:00",
+        "dateDeleted": null,
+        "dateModified": null
+    }],
+    "visibleAt": 14500,
+    "visibleFor": null,
+    "shouldPause": 1,
+    "interactiveId": 189978,
+    "id": 707559,
+    "deleted": false,
+    "dateCreated": "0001-01-01T00:00:00",
+    "dateDeleted": null,
+    "dateModified": null
+  },{
+    "interactions":[
+       {
+          "data":{
+             "url":"https://api-image.clickviewapp.com/v1/thumbnails/5920179",
+             "caption":"The dark green area on this map shows how large the Murray-Darling Basin is. This area alone is responsible for growing one third of Australia's entire food supply!"
+          },
+          "actionableItems":[
+             {
+                "name":"Viewed",
+                "order":0,
+                "isCorrect":true,
+                "interactionId":664721,
+                "id":1476619,
+                "deleted":false,
+                "dateCreated":"2020-09-24T05:31:04",
+                "dateDeleted":null,
+                "dateModified":null
+             }
+          ],
+          "name":"The dark green area on this map shows how large the Murray-Darling Basin is. This area alone is responsible for growing one third of Australia's entire food supply!",
+          "order":0,
+          "description":null,
+          "errorMessage":null,
+          "isRequired":false,
+          "interactiveId":183569,
+          "timepointId":669510,
+          "typeId":5,
+          "type":{
+             "name":"Image",
+             "icon":"//static.clickview.com.au/cv-online/images/interactions/icons/image-v2.png",
+             "colour":"f8981d",
+             "id":5,
+             "deleted":false,
+             "dateCreated":"2015-10-19T09:01:50",
+             "dateDeleted":null,
+             "dateModified":null
+          },
+          "id":664721,
+          "deleted":false,
+          "dateCreated":"0001-01-01T00:00:00",
+          "dateDeleted":null,
+          "dateModified":null
+       }
+    ],
+    "visibleAt":16500,
+    "visibleFor":null,
+    "shouldPause":1,
+    "interactiveId":183569,
+    "id":669510,
+    "deleted":false,
+    "dateCreated":"0001-01-01T00:00:00",
+    "dateDeleted":null,
+    "dateModified":null
+  }],
+  "immediateFeedback": true,
+  "id": 190303,
+  "name": "How Your Online Data is Used",
+  "duration": 0,
+  "posterImage": null,
+  "dateCreated": "2020-11-04T23:25:34",
+  "dateModified": null,
+  "dateDeleted": null,
+  "deleted": false
+}

package/.storybook/stories/assets/thumbnails.vtt

@@ -0,0 +1,62 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+/sample_1280x720.mp4.vtx#xywh=6,77,160,90
+
+00:00:01.000 --> 00:00:02.000
+/sample_1280x720.mp4.vtx#xywh=171,77,160,90
+
+00:00:02.000 --> 00:00:04.000
+/sample_1280x720.mp4.vtx#xywh=336,77,160,90
+
+00:00:04.000 --> 00:00:05.000
+/sample_1280x720.mp4.vtx#xywh=501,77,160,90
+
+00:00:05.000 --> 00:00:06.000
+/sample_1280x720.mp4.vtx#xywh=666,77,160,90
+
+00:00:06.000 --> 00:00:08.000
+/sample_1280x720.mp4.vtx#xywh=6,172,160,90
+
+00:00:08.000 --> 00:00:09.000
+/sample_1280x720.mp4.vtx#xywh=171,172,160,90
+
+00:00:09.000 --> 00:00:10.000
+/sample_1280x720.mp4.vtx#xywh=336,172,160,90
+
+00:00:10.000 --> 00:00:12.000
+/sample_1280x720.mp4.vtx#xywh=501,172,160,90
+
+00:00:12.000 --> 00:00:13.000
+/sample_1280x720.mp4.vtx#xywh=666,172,160,90
+
+00:00:13.000 --> 00:00:14.000
+/sample_1280x720.mp4.vtx#xywh=6,267,160,90
+
+00:00:14.000 --> 00:00:16.000
+/sample_1280x720.mp4.vtx#xywh=171,267,160,90
+
+00:00:16.000 --> 00:00:17.000
+/sample_1280x720.mp4.vtx#xywh=336,267,160,90
+
+00:00:17.000 --> 00:00:18.000
+/sample_1280x720.mp4.vtx#xywh=501,267,160,90
+
+00:00:18.000 --> 00:00:20.000
+/sample_1280x720.mp4.vtx#xywh=666,267,160,90
+
+00:00:20.000 --> 00:00:21.000
+/sample_1280x720.mp4.vtx#xywh=6,362,160,90
+
+00:00:21.000 --> 00:00:22.000
+/sample_1280x720.mp4.vtx#xywh=171,362,160,90
+
+00:00:22.000 --> 00:00:24.000
+/sample_1280x720.mp4.vtx#xywh=336,362,160,90
+
+00:00:24.000 --> 00:00:25.000
+/sample_1280x720.mp4.vtx#xywh=501,362,160,90
+
+00:00:25.000 --> 00:00:29.000
+/sample_1280x720.mp4.vtx#xywh=666,362,160,90
+

package/.storybook/stories/utils/Wrap.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface WrapProps {
+  el: HTMLElement;
+}
+
+export function Wrap(props: WrapProps): React.ReactElement {
+  const ref = React.useRef<HTMLDivElement>();
+
+  React.useEffect(() => {
+    if (ref.current)
+      ref.current.appendChild(props.el);
+  }, []);
+
+  return (
+    <div ref={ref}></div>
+  );
+}

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

@@ -0,0 +1,238 @@
+import { PlaybackObject, Files, Chapters, Subtitles, LocalCacheAddress } from '../../../src/interfaces/models/PlaybackObject';
+
+import interactive from '../assets/interactive.json';
+
+const basicFiles = <Files> {
+  progressive: [{
+    url: 'https://static.clickview.com.au/testvideos/vpsbenchmark.mp4',
+    mimeType: 'video/mp4',
+    profile: '720'
+  }]
+};
+
+const multipleFiles = <Files> {
+  progressive: [{
+    mimeType: 'video/mp4',
+    profile: '240',
+    url: 'https://static.clickview.com.au/testvideos/vpsbenchmark.mp4?quality=240'
+  },{
+    mimeType: 'video/mp4',
+    profile: '720',
+    url: 'https://static.clickview.com.au/testvideos/vpsbenchmark.mp4?quality=720'
+  }]
+}
+
+const emptyChapters = <Chapters> {
+  list: []
+};
+
+const mockChapters = <Chapters> {
+  list: [{
+    name: 'Waves',
+    timestamp: 0,
+    endTimestamp: 5
+  },
+  {
+    name: 'Some More Waves',
+    timestamp: 5,
+    endTimestamp: 11
+  },
+  {
+    name: 'Waves hitting Rocks',
+    timestamp: 11,
+    endTimestamp: 13
+  },
+  {
+    name: 'Rocky Rocks',
+    timestamp: 13,
+    endTimestamp: 20
+  },
+  {
+    name: 'End of waves',
+    timestamp: 20,
+    endTimestamp: 28
+  },
+  {
+    name: 'Credits',
+    timestamp: 28,
+    endTimestamp: 600
+  }]
+};
+
+const emptySubtitles = <Subtitles> {
+  list: []
+};
+
+const multipleSubtitles = <Subtitles> {
+  list: [{
+    label: 'English',
+    language: 'en',
+    url: './en.vtt',
+    mimeType: 'text/vtt'
+  }, {
+    label: 'Spanish',
+    language: 'es',
+    url: './es.vtt',
+    mimeType: 'text/vtt'
+  },{
+    label: 'French',
+    language: 'fr',
+    url: './fr.vtt',
+    mimeType: 'text/vtt'
+  }]
+};
+
+const emptyLocalCacheAddresses = <LocalCacheAddress[]> [];
+
+const sources: { [key: string]: PlaybackObject } = {
+  basic: {
+    files: basicFiles,
+    mediaType: 'MasterVideo',
+    chapters: emptyChapters,
+    subtitles: {
+      list: [{
+        isDefault: false,
+        label: 'English',
+        language: 'en-au',
+        url: './en.vtt',
+        mimeType: 'text/vtt'
+      }]
+    },
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  chapters: {
+    files: basicFiles,
+    mediaType: 'MasterVideo',
+    chapters: mockChapters,
+    subtitles: emptySubtitles,
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  vertical: {
+    files: {
+      progressive: [{
+        mimeType: 'video/mp4',
+        profile: '720',
+        url: './vertical.mp4'
+      }]
+    },
+    mediaType: 'MasterVideo',
+    chapters: mockChapters,
+    subtitles: emptySubtitles,
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  error: {
+    files: {
+      progressive: [{
+        mimeType: 'video/mp4',
+        profile: '240',
+
+        // This is intentionally not a video url
+        url: 'https://clickview.com.au'
+      }]
+    },
+    mediaType: 'MasterVideo',
+    chapters: emptyChapters,
+    subtitles: emptySubtitles,
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  multipleQualities: {
+    files: multipleFiles,
+    mediaType: 'MasterVideo',
+    chapters: emptyChapters,
+    subtitles: emptySubtitles,
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  poster: {
+    files: basicFiles,
+    mediaType: 'MasterVideo',
+    chapters: emptyChapters,
+    posterUrl: 'https://image.api.stg.cvnet.io/v2/thumbnails/Q229lo',
+    subtitles: emptySubtitles,
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  everything: {
+    files: multipleFiles,
+    mediaType: 'MasterVideo',
+    chapters: mockChapters,
+    posterUrl: 'https://image.api.stg.cvnet.io/v2/thumbnails/Q229lo',
+    subtitles: multipleSubtitles,
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  multipleSubtitles: {
+    files: basicFiles,
+    mediaType: 'MasterVideo',
+    chapters: emptyChapters,
+    subtitles: multipleSubtitles,
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  multipleTracksWithDefault: {
+    files: basicFiles,
+    mediaType: 'MasterVideo',
+    chapters: emptyChapters,
+    subtitles: {
+      list: [{
+        label: 'English',
+        language: 'en',
+        url: './en.vtt',
+        mimeType: 'text/vtt'
+      }, {
+        label: 'Spanish',
+        language: 'es',
+        url: './es.vtt',
+        isDefault: true,
+        mimeType: 'text/vtt'
+      },{
+        label: 'French',
+        language: 'fr',
+        url: './fr.vtt',
+        mimeType: 'text/vtt'
+      }]
+    },
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  interactive: {
+    files: basicFiles,
+    mediaType: 'MasterInteractive',
+    chapters: emptyChapters,
+    additionalData: interactive,
+    subtitles: emptySubtitles,
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  clip: {
+    files: basicFiles,
+    mediaType: 'MasterClip',
+    chapters: emptyChapters,
+    additionalData: {
+      startTime: 60,
+      endTime: 240
+    },
+    subtitles: emptySubtitles,
+    localCacheAddresses: emptyLocalCacheAddresses
+  },
+  localcache: {
+    files: multipleFiles,
+    mediaType: 'MasterVideo',
+    chapters: emptyChapters,
+    subtitles: emptySubtitles,
+    localCacheAddresses: [{
+      httpsAddress: 'https://local.clickviewlocalcache.com:9055',
+      name: 'test',
+      playbackProfile: '1080'
+    }]
+  }
+};
+
+export function mockplayerApi(viewKey: string): Promise<PlaybackObject> {
+  const playbackObject = sources[viewKey];
+
+  if (!playbackObject)
+    throw Error('Unknown viewKey: ' + viewKey);
+
+  return new Promise<PlaybackObject>(resolve => {
+
+    // 200ms Timeout is just simulating an async api call to fetch tech info
+    window.setTimeout(() => {
+      resolve(playbackObject);
+    }, 200);
+  });
+}

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

@@ -0,0 +1,16 @@
+import { VideoJsPlayer } from 'video.js';
+import { BasePlayerOptions } from '../../../src/players/base-player';
+
+export const mockSetups: any = {
+  thumbnails: function(options: BasePlayerOptions, player: VideoJsPlayer): void {
+    player.addRemoteTextTrack({
+      kind: 'metadata',
+      src: './thumbnails.vtt',
+      label: 'thumbnails'
+    }, true);
+  },
+
+  everything: function(options: BasePlayerOptions, player: VideoJsPlayer): void {
+    mockSetups.thumbnails(options, player);
+  }
+};

package/jest.config.js

@@ -0,0 +1,13 @@
+const getBaseConfig = require('../../libs/testing/jest.base.config');
+const { compilerOptions } = require('./tsconfig');
+
+const paths = { ...compilerOptions.paths };
+
+delete paths['*'];
+
+const baseConfig = getBaseConfig(paths);
+
+module.exports = {
+  ...baseConfig,
+  setupFilesAfterEnv: [...baseConfig.setupFilesAfterEnv, './test/setupTests.ts'],
+};

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@clickview/player",
-  "version": "0.0.0-rc.4",
+  "version": "0.0.0",
   "description": "ClickView Player",
   "main": "dist/player-app.js",
   "scripts": {
     "start": "set NODE_ENV=development&& webpack -w --config ./tooling/webpack.config.js",
-    "build": "set NODE_ENV=production&& webpack --config ./tooling/webpack.config.js",
+    "build": "set NODE_ENV=production&&  webpack --config ./tooling/webpack.config.js",
+    "build-font": "set NODE_ENV=development&& npm run start",
     "dev-build": "set NODE_ENV=development&& webpack --config ./tooling/webpack.config.js",
-    "dev-server": "set NODE_ENV=development&& webpack-dev-server --config ./tooling/webpack.config.js"
+    "storybook": "start-storybook -s ./.storybook/stories/assets -p 6006",
+    "build-storybook": "build-storybook",
+    "test": "jest",
+    "test-watch": "jest --watch",
+    "webpack-dev-server": "set NODE_ENV=development&& webpack-dev-server --config ./tooling/webpack.config.js"
   },
   "repository": {
     "type": "git",
@@ -20,13 +25,24 @@
   "author": "Matt Trengrove, Cameron Hill, Shale Kuzmanovski",
   "license": "ISC",
   "devDependencies": {
-    "@clickview/tooling": "0.0.18",
+    "@babel/core": "7.11.6",
+    "@clickview/eslint-config": "1.0.0",
+    "@clickview/player-font": "0.0.1",
+    "@clickview/tooling": "0.0.19",
+    "@storybook/react": "6.0.26",
+    "@types/simplebar": "5.1.1",
     "@types/video.js": "7.3.11",
+    "jest": "26.1.0",
+    "ts-jest": "26.1.4",
     "webpack-dev-server": "3.11.0"
   },
   "dependencies": {
-    "@clickview/styles": "1.0.9",
-    "video.js": "7.8.4"
+    "@clickview/styles": "1.0.12",
+    "keycode": "2.2.0",
+    "simplebar": "5.3.0",
+    "simplebar-react": "2.3.0",
+    "video.js": "7.8.4",
+    "videojs-contrib-quality-levels": "2.0.9"
   },
   "babel": {
     "presets": [

package/test/players/test-player.ts

@@ -0,0 +1,31 @@
+import { VideoJsPlayer } from 'video.js';
+import { BasePlayer, BasePlayerOptions } from '../../src/players/base-player';
+
+export interface TestPlayerOptions extends BasePlayerOptions {
+  configurePlugins?: (player: VideoJsPlayer) => void;
+}
+
+export class TestPlayer extends BasePlayer {
+  protected options: TestPlayerOptions;
+
+  public player: VideoJsPlayer;
+
+  constructor(id: string | Element, options: TestPlayerOptions) {
+    super(id, options);
+  }
+
+  /**
+   * TODO: Look at reimplementing this. At the moment it's causing
+   * problems because the test will dispose of the player before the
+   * fetch has completed.
+   */
+  protected async fetch(): Promise<void> {
+  }
+
+  protected configurePlugins(): void {
+    if (!(typeof this.options.configurePlugins === 'function'))
+      return;
+
+    this.options.configurePlugins(this.player);
+  }
+}

package/test/setupTests.ts

@@ -0,0 +1,8 @@
+/**
+ * Media playback isn't supported by the DOM provided by Jest
+ * so we mock the following functions.
+ */
+window.HTMLMediaElement.prototype.load = () => { };
+window.HTMLMediaElement.prototype.play = (() => { }) as any;
+window.HTMLMediaElement.prototype.pause = () => { };
+window.HTMLMediaElement.prototype.addTextTrack = (() => { }) as any;

package/test/utils/test-helpers.ts

@@ -0,0 +1,22 @@
+import { TestPlayer, TestPlayerOptions } from '../players/test-player';
+
+interface PlayerOptions extends Omit<TestPlayerOptions, 'viewKey'> { }
+
+export const TestHelpers = {
+  makeEl(): HTMLElement {
+    const el = document.createElement('div');
+    el.id = 'test-player';
+    return el;
+  },
+
+  makePlayer(playerOptions?: PlayerOptions, containerEl?: HTMLElement): TestPlayer {
+    containerEl = containerEl || TestHelpers.makeEl();
+
+    document.body.innerHTML = '';
+    document.body.appendChild(containerEl);
+
+    playerOptions = playerOptions || {};
+
+    return new TestPlayer(containerEl, playerOptions as TestPlayerOptions);
+  }
+};

package/typings/libs/videojs-contrib-quality-levels.d.ts

@@ -0,0 +1,29 @@
+import videojs from 'video.js';
+
+declare module 'video.js' {
+  export interface VideoJsPlayer {
+    qualityLevels(): QualityLevelList;
+  }
+}
+
+declare module 'videojs-contrib-quality-levels' {
+  export interface QualityLevelList extends videojs.EventTarget {
+    [id: string]: QualityLevel;
+    selectedIndex: number;
+    length: number;
+    addQualityLevel(representation: Representation): QualityLevel;
+    removeQualityLevel(qualityLevel: QualityLevel): QualityLevel;
+    getQualityLevelById(id: string): QualityLevel;
+  }
+
+  export interface QualityLevel {
+    id: string;
+    label: string;
+    enabled: boolean;
+  }
+
+  export interface Representation {
+    id: string;
+    enabled(enabled: boolean): boolean;
+  }
+}

package/dist/index.html

@@ -1,19 +0,0 @@
-<html>
-
-<head>
-  <script src="./player-app.js"></script>
-  <link rel="stylesheet" href="player-app.css" />
-</head>
-
-<body>
-  <video id="my-player" class="video-js" data-setup='{"controls": true, "autoplay": true, "inactivityTimeout": 10000 }' width="600">
-    <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
-  </video>
-
-  <script>
-    const CVPlayer = window['@clickview/player'];
-    CVPlayer.CVPlayer.start('my-player');
-  </script>
-</body>
-
-</html>