@clickview/player 0.0.8-dev.1 → 0.0.8-dev.3

package/dist/projects/player/src/plugins/engagement-overlay-plugin/components/timepoint-interactions/timepoint-interactions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Interactive } from 'libs/shared/interfaces';
 interface TimepointInteractionsProps {
     interactive: Interactive;

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-annotation/create-annotation-link.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface LinkState {
     link: string;
     selectionText: string;

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-image/create-image-cropper.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface CreateImageCropperProps {
     image: HTMLImageElement;
     imageAlt: string;

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-image/upload-image-icon.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function UploadImageIcon(): JSX.Element;

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-missing-word/create-missing-word.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Interaction } from 'libs/shared/interfaces';
 import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
 interface Word {

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-multiple-choice/create-multiple-choice.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Interaction } from 'libs/shared/interfaces';
 import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
 import './create-multiple-choice.scss';

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-multiple-choice/multiple-choice-answer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MultipleChoiceAnswer } from './create-multiple-choice';
 interface MultipleChoiceAnswerProps {
     answer: MultipleChoiceAnswer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickview/player",
-  "version": "0.0.8-dev.1",
+  "version": "0.0.8-dev.3",
   "description": "ClickView Player",
   "main": "dist/player-app.js",
   "scripts": {
@@ -28,7 +28,7 @@
     "@babel/core": "7.11.6",
     "@clickview/eslint-config": "1.0.1",
     "@clickview/player-font": "0.0.12",
-    "@clickview/tooling": "0.0.26-dev.1",
+    "@clickview/tooling": "0.0.26-dev.3",
     "@storybook/react": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.3",
     "@types/cropperjs": "1.3.0",
@@ -42,7 +42,7 @@
     "webpack-dev-server": "3.11.0"
   },
   "dependencies": {
-    "@clickview/styles": "1.0.19-dev.1",
+    "@clickview/styles": "1.0.19-dev.3",
     "@microsoft/signalr": "5.0.2",
     "cropperjs": "1.5.6",
     "draft-convert": "2.1.10",

package/.storybook/main.js

@@ -1,23 +0,0 @@
-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,
-      resolveLoader: custom.resolveLoader,
-      plugins: [
-        ...config.plugins,
-        ...custom.plugins
-      ]
-    };
-  },
-};

package/.storybook/preview-head.html

@@ -1,4 +0,0 @@
-<!-- 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">
-<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

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

@@ -1,133 +0,0 @@
-import React from 'react';
-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} />;
-  
-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={new URL(PLAYER_API_STAGING)} />;
-
-PlayerApi.storyName = 'Player API';
-
-/**
- * This story uses an intentionally invalid viewKey.
- */
-export const PlayerApiError = () =>
-  <ClickViewPlayer viewKey='camwashere_error' playerApi={new URL(PLAYER_API_STAGING)} />;
-
-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

@@ -1,80 +0,0 @@
-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 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';
-
-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

@@ -1,64 +0,0 @@
-import React from 'react';
-
-export default {
-  title: 'Interactives'
-};
-
-export const Default = () => <h1>Sorry no interactives</h1>;
-
-Default.storyName = 'Default';
-
-// export const Create = () =>
-//   <ClickViewInteractivePlayer
-//     viewKey='interactive'
-//     fetch={mockplayerApi}
-//     mode={InteractiveMode.Create}
-//     imageApi={new URL(IMAGE_API_URL_STAGING)} />;
-
-// 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/Resources.stories.tsx

@@ -1,15 +0,0 @@
-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/Subtitles.stories.tsx

@@ -1,22 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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.