@clickview/player 0.0.0-dev.0

package/.eslintrc.json

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

package/.storybook/main.js

@@ -0,0 +1,21 @@
+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
+      },
+      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,115 @@
+import React from 'react';
+import { ClickViewPlayer } 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 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>
+  )
+}

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ClickViewPlayer, ClickViewCreateClipPlayer } from '../../src/index';
+import { mockplayerApi } from './utils/mock-playerapi';
+import { mockSetups } from './utils/mock-setup';
+
+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='basic' fetch={mockplayerApi} setup={mockSetups.clipPlayback} />;
+
+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='basic' 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='basic' fetch={mockplayerApi} autoplay={true} />;
+};
+
+export const ShortAnswer = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(13);
+  }
+
+  return <ClickViewInteractivePlayer onReady={onReady} viewKey='basic' fetch={mockplayerApi} autoplay={true} />;
+};
+
+export const Image = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(17);
+  }
+
+  return <ClickViewInteractivePlayer onReady={onReady} viewKey='basic' fetch={mockplayerApi} autoplay={true} />;
+};
+
+export const TrueOrFalse = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(5);
+  }
+
+  return <ClickViewInteractivePlayer onReady={onReady} viewKey='basic' fetch={mockplayerApi} autoplay={true} />;
+};
+
+export const MultipleChoice = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(7);
+  }
+
+  return <ClickViewInteractivePlayer onReady={onReady} viewKey='basic' fetch={mockplayerApi} autoplay={true} />;
+};
+
+export const MissingWord = () => {
+  function onReady(player: InteractivePlayer): void {
+    player.currentTime(9);
+  }
+
+  return <ClickViewInteractivePlayer onReady={onReady} viewKey='basic' 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.