@clickview/player 0.0.2-rc.2 → 0.0.2-rc.3

package/dist/projects/player/src/players/player.d.ts

@@ -10,7 +10,6 @@ import 'projects/player/plugins/next-video-plugin/next-video-plugin';
 import 'projects/player/plugins/create-clip-button-plugin/create-clip-button-plugin';
 import 'projects/player/plugins/resources-plugin/resources-plugin';
 import 'projects/player/plugins/picture-in-picture-plugin/picture-in-picture-plugin';
-import 'projects/player/plugins/favourite-plugin/favourite-plugin';
 import { PlaybackObject } from 'projects/player/interfaces/models/PlaybackObject';
 import { NextVideo } from 'projects/player/interfaces/NextVideo';
 export interface PlayerOptions extends BasePlayerOptions {
@@ -19,7 +18,6 @@ export declare class Player extends BasePlayer {
     protected options: PlayerOptions;
     constructor(id: string | Element, options: PlayerOptions);
     protected configurePlugins(): void;
-    setFavourite(isFavourited: boolean, onClickFavourite: () => void): void;
     setNextVideo(nextVideo: NextVideo, onPlayNext: () => void): void;
     enablePictureInPicture(): void;
     disablePictureInPicture(): void;

package/dist/projects/player/src/plugins/interactive-plugin/components/add-question-button/add-question-button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AddQuestionButtonProps {
+    isCreate: boolean;
+    open: boolean;
+    showTypeSelector: () => void;
+}
+export declare function AddQuestionButton(props: AddQuestionButtonProps): React.ReactElement;
+export {};

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

@@ -1,7 +1,7 @@
 import { Interaction, InteractionTypeId } from 'libs/shared/interfaces';
-import { CreateSubmissionFunction, InteractionComponent } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { CreateInteractionState, CreateSubmissionFunction, InteractionComponent } from 'projects/player/plugins/interactive-plugin/interfaces';
 export declare function getCreateComponent(typeId: InteractionTypeId): InteractionComponent;
-declare type CreateValidationFunction = (state: any, interaction: Interaction) => string;
+declare type CreateValidationFunction = (state: CreateInteractionState, interaction: Interaction) => string;
 export declare function getCreateValidation(typeId: InteractionTypeId): CreateValidationFunction;
 export declare function getCreateSubmit(typeId: InteractionTypeId): CreateSubmissionFunction;
 export {};

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Interaction } from 'libs/shared/interfaces';
-import { InteractionProps } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
 import './create-image.scss';
-import { CreateInteractionState } from '../../../interfaces/CreateInteractionState';
 interface CreateImageState extends CreateInteractionState {
     url: string;
     caption?: string;

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-interaction-buttons/create-interaction-buttons.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Interaction } from 'libs/shared/interfaces';
+import { InteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface CreateInteractionButtonsProps {
+    interaction: Interaction;
+    interactionState: InteractionState;
+    onClickContinue: () => void;
+    onClickSave: () => void;
+    onClickCancel: () => void;
+    onClickAddAnother: () => void;
+    onClickDiscard: () => void;
+}
+export declare function CreateInteractionButtons(props: CreateInteractionButtonsProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-interaction-heading/create-interaction-heading.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { InteractionTypeId } from 'libs/shared/interfaces';
 import { VideoJsPlayer } from 'video.js';
+import { InteractionTypeId } from 'libs/shared/interfaces';
 interface CreateInteractionHeadingProps {
     typeId: InteractionTypeId;
     currentIndex: number;

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { InteractionProps } from 'projects/player/plugins/interactive-plugin/interfaces';
 import { Interaction } from 'libs/shared/interfaces';
-import { CreateInteractionState } from '../../../interfaces/CreateInteractionState';
+import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
 interface Word {
     text: string;
     order: number;

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { Interaction } from 'libs/shared/interfaces';
-import { InteractionProps } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
 import './create-multiple-choice.scss';
-import { CreateInteractionState } from '../../../interfaces/CreateInteractionState';
 export interface MultipleChoiceAnswer {
     order: number;
     name: string;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Interaction } from 'libs/shared/interfaces';
+import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface CreateShortAnswerState extends CreateInteractionState {
+    question: string;
+    suggestedResponse?: string;
+}
+export declare function ValidateShortAnswer(state: CreateShortAnswerState): string;
+export declare function SubmitShortAnswer(state: CreateShortAnswerState, interaction: Interaction): Promise<void>;
+export declare function CreateShortAnswer(props: InteractionProps<CreateShortAnswerState>): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-type-selector/create-type-selector.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
-import { InteractionTypeId } from 'libs/shared/interfaces';
-import './create-type-selector.scss';
 import { VideoJsPlayer } from 'video.js';
+import { Interaction, InteractionTypeId, Timepoint } from 'libs/shared/interfaces';
+import './create-type-selector.scss';
 interface CreateTypeSelectorProps {
-    onTypeSelected: (typeId: InteractionTypeId) => void;
-    onClickCancel: () => void;
+    addInteraction: (typeId: InteractionTypeId) => void;
+    cancelTypeSelector: () => void;
     player: VideoJsPlayer;
-    addingAnother: boolean;
-    showCancel: boolean;
+    timepoint: Timepoint;
+    interaction: Interaction;
+    open: boolean;
+    isCreate: boolean;
 }
 export declare function CreateTypeSelector(props: CreateTypeSelectorProps): React.ReactElement;
 export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/interaction-actions/interaction-actions.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HtmlPortalNode } from 'react-reverse-portal';
+import { Interaction } from 'libs/shared/interfaces';
+interface InteractionActionsProps {
+    interaction: Interaction;
+    promptDelete: (id: string) => void;
+    optionsPortalNode: HtmlPortalNode;
+}
+export declare function InteractionActions(props: InteractionActionsProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/interaction-footer/interaction-footer.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Interaction, Timepoint } from 'libs/shared/interfaces';
+import { InteractionState, TimepointState } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface InteractionFooterProps {
+    isCreate: boolean;
+    interaction: Interaction;
+    timepoint: Timepoint;
+    interactionState: InteractionState;
+    timepointState: TimepointState;
+    continueInteractive: () => void;
+    saveInteraction: () => void;
+    cancel: () => void;
+    addAnotherQuestion: () => void;
+    discardChanges: (after?: () => void) => void;
+    submitInteractionAnswer: () => void;
+    skip: () => void;
+    changeIndex: (index: number) => void;
+}
+export declare function InteractionFooter(props: InteractionFooterProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/interaction-header/interaction-header.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { VideoJsPlayer } from 'video.js';
+import { Interaction, Timepoint } from 'libs/shared/interfaces';
+import { TimepointState } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface InteractionHeaderProps {
+    isCreate: boolean;
+    interaction: Interaction;
+    timepointState: TimepointState;
+    timepoint: Timepoint;
+    player: VideoJsPlayer;
+    changeIndex: (index: number) => void;
+}
+export declare function InteractionHeader(props: InteractionHeaderProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/interactive/interactive-component.d.ts

@@ -1,3 +1 @@
-import { TimepointState } from 'projects/player/plugins/interactive-plugin/components/timepoint/timepoint-component';
 import './interactive-component.scss';
-export declare const initialTimepointState: TimepointState;

package/dist/projects/player/src/plugins/interactive-plugin/components/question-list/question-list-empty-state.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function QuestionListEmptyState(): React.ReactElement;

package/dist/projects/player/src/plugins/interactive-plugin/components/question-list/question-list.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { HtmlPortalNode } from 'react-reverse-portal';
+import { Interaction, Interactive } from 'libs/shared/interfaces';
+interface QuestionListProps {
+    isCreate: boolean;
+    interactive: Interactive;
+    interaction: Interaction;
+    portalNode: HtmlPortalNode;
+    goToTimepoint: (timepointId: string, interactionId: string) => void;
+    promptDelete: (interactionId: string) => void;
+}
+export declare function QuestionList(props: QuestionListProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/seek-bar/interactive-bar-items.d.ts

@@ -4,7 +4,7 @@ import './interactive-bar-items.scss';
 declare const Component: {
     new (player: VideoJsPlayer, options?: videojs.ComponentOptions, ready?: videojs.Component.ReadyCallback): videojs.Component;
     prototype: videojs.Component;
-    getComponent(name: "button" | "Button"): {
+    getComponent(name: "Button" | "button"): {
         new (player: VideoJsPlayer, options?: videojs.ComponentOptions): videojs.Button;
         prototype: videojs.Button;
     };
@@ -16,7 +16,7 @@ declare const Component: {
         new (player: VideoJsPlayer, options?: videojs.ModalDialogOptions): videojs.ModalDialog;
         prototype: videojs.ModalDialog;
     };
-    getComponent(name: "menu" | "Menu"): {
+    getComponent(name: "Menu" | "menu"): {
         new (player: VideoJsPlayer, options?: videojs.MenuOptions): videojs.Menu;
         prototype: videojs.Menu;
     };
@@ -24,7 +24,7 @@ declare const Component: {
         new (player: VideoJsPlayer, options?: videojs.MenuButtonOptions): videojs.MenuButton;
         prototype: videojs.MenuButton;
     };
-    getComponent(name: "menuitem" | "MenuItem"): {
+    getComponent(name: "MenuItem" | "menuitem"): {
         new (player: VideoJsPlayer, options?: videojs.MenuItemOptions): videojs.MenuItem;
         prototype: videojs.MenuItem;
     };

package/dist/projects/player/src/plugins/interactive-plugin/components/timepoint/timepoint-component.d.ts

@@ -2,21 +2,19 @@ import React from 'react';
 import { HtmlPortalNode } from 'react-reverse-portal';
 import { CurrentUser, Interaction } from 'libs/shared/interfaces';
 import { InteractiveMode } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { InteractionState, TimepointState } from 'projects/player/plugins/interactive-plugin/interfaces/InteractiveState';
 import './timepoint-component.scss';
-export interface TimepointState {
-    interactionIndex: number;
-}
 interface TimepointProps {
     interaction: Interaction;
     mode: InteractiveMode;
-    state: any;
-    dispatch: React.Dispatch<any>;
     recalculateScroll: () => void;
     timepointState: TimepointState;
     imageApi: URL;
     optionsPortalNode?: HtmlPortalNode;
     immediateFeedback: boolean;
     currentUser?: CurrentUser;
+    interactionState: InteractionState;
+    userUpdateInteractionState: (value: InteractionState) => void;
 }
 export declare function TimepointComponent(props: TimepointProps): React.ReactElement;
 export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/view-components/short-answer/short-answer-interaction.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { InteractionProps, ViewInteractionState, ViewSubmissionFunction } from 'projects/player/plugins/interactive-plugin/interfaces';
 import { Interaction } from 'libs/shared/interfaces';
+import { InteractionProps, ViewInteractionState, ViewSubmissionFunction } from 'projects/player/plugins/interactive-plugin/interfaces';
 interface ShortAnswerState extends ViewInteractionState {
     [id: string]: string;
 }

package/dist/projects/player/src/plugins/interactive-plugin/components/view-components/view-components.d.ts

@@ -1,9 +1,9 @@
 import { Interaction, InteractionTypeId } from 'libs/shared/interfaces';
-import { InteractionComponent, ViewSubmissionFunction } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { InteractionComponent, ViewInteractionState, ViewSubmissionFunction } from 'projects/player/plugins/interactive-plugin/interfaces';
 declare type ShowFeedbackFunction = (interaction: Interaction) => boolean;
 export declare function getShouldShowFeedback(typeId: InteractionTypeId): ShowFeedbackFunction;
 export declare function getViewComponent(typeId: InteractionTypeId): InteractionComponent;
-declare type ViewValidationFunction = (state: any, interaction: Interaction) => string;
+declare type ViewValidationFunction = (state: ViewInteractionState, interaction: Interaction) => string;
 export declare function getViewValidation(typeId: InteractionTypeId): ViewValidationFunction;
 export declare function getViewSubmit(typeId: InteractionTypeId): ViewSubmissionFunction;
 export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/view-components/view-interaction-buttons/view-iteraction-buttons.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { InteractionTypeId } from 'libs/shared/interfaces';
+import { InteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface ViewInteractionButtonsProps {
+    typeId: InteractionTypeId;
+    interactionState: InteractionState;
+    onClickSubmit: () => void;
+    onClickSkip: () => void;
+    currentIndex: number;
+    numberOfInteractions: number;
+    changeIndex: (index: number) => void;
+}
+export declare function ViewInteractionButtons(props: ViewInteractionButtonsProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/hooks/useInteractiveState.d.ts

@@ -0,0 +1,20 @@
+import { Timepoint } from 'libs/shared/interfaces';
+import { InteractionState, InteractiveMode, TimepointState } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface UseInteractiveStateProps {
+    mode: InteractiveMode;
+    timepoint: Timepoint;
+}
+export declare const useInteractiveState: (props: UseInteractiveStateProps) => {
+    _doNotUse: import("../interfaces").InteractiveState;
+    interaction: import("../../../../../../libs/shared/src/interfaces").Interaction;
+    interactionState: InteractionState;
+    timepointState: TimepointState;
+    getTimepointState: (id: string) => TimepointState;
+    getInteractionState: (id: string) => InteractionState;
+    updateTimepointState: (id: string, value: TimepointState) => void;
+    updateInteractionState: (id: string, value: InteractionState) => void;
+    clearTimepointState: (id: string) => void;
+    clearInteractionState: (id: string) => void;
+    userUpdateInteractionState: (value: InteractionState) => void;
+};
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/hooks/useInteractiveTrack.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { VideoJsPlayer } from 'video.js';
+import { Interactive, Timepoint } from 'libs/shared/interfaces';
+import { InteractiveMode } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface useInteractiveOptions {
+    player: VideoJsPlayer;
+    track: TextTrack;
+    interactive: Interactive;
+    mode: InteractiveMode;
+}
+export declare const useInteractiveTrack: (options: useInteractiveOptions) => {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    timepoint: Timepoint;
+    continueInteractive: () => void;
+    updateCue: (oldTimepointId: string, timepointId: string) => void;
+    addCue: (timepointId: string) => void;
+    removeCue: (visibleAt: number) => void;
+};
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/hooks/useLockPlayer.d.ts

@@ -0,0 +1,15 @@
+import { VideoJsPlayer } from 'video.js';
+import { Interaction, Timepoint } from 'libs/shared/interfaces';
+import { InteractiveMode } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { InteractionState, InteractiveState } from 'projects/player/plugins/interactive-plugin/interfaces/InteractiveState';
+interface UseLockNavProps {
+    mode: InteractiveMode;
+    state: InteractiveState;
+    player: VideoJsPlayer;
+    timepoint: Timepoint;
+    interaction: Interaction;
+    interactionState: InteractionState;
+    discardChanges: (after?: () => void) => void;
+}
+export declare function useLockPlayer(props: UseLockNavProps): void;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/hooks/useStateManager.d.ts

@@ -0,0 +1,37 @@
+import { VideoJsPlayer } from 'video.js';
+import { Interaction, InteractionTypeId, Interactive, Timepoint } from 'libs/shared/interfaces';
+import { InteractiveMode } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { ResultsService } from 'projects/player/plugins/interactive-plugin/utils/ResultsService';
+interface UseStateManagerProps {
+    mode: InteractiveMode;
+    timepoint: Timepoint;
+    interactive: Interactive;
+    player: VideoJsPlayer;
+    resultsService?: ResultsService;
+    setOpen: (open: boolean) => void;
+    addCue: (timepointId: string) => void;
+    updateCue: (oldTimepointId: string, timepointId: string) => void;
+    removeCue: (visibleAt: number) => void;
+    continueInteractive: () => void;
+}
+export declare const useStateManager: (props: UseStateManagerProps) => {
+    _doNotUse: import("../interfaces").InteractiveState;
+    interaction: Interaction;
+    interactionState: import("../interfaces").InteractionState;
+    timepointState: import("../interfaces").TimepointState;
+    skip: () => void;
+    cancel: () => Promise<void>;
+    addAnotherQuestion: () => void;
+    goToTimepoint: (timepointId: string, interactionId: string) => void;
+    discardChanges: (afterDiscard?: () => void) => void;
+    changeIndex: (interactionIndex: number) => void;
+    promptDelete: (interactionId: string) => void;
+    showTypeSelector: () => void;
+    cancelTypeSelector: () => void;
+    deleteInteraction: (interactionId: string) => Promise<void>;
+    saveInteraction: () => Promise<void>;
+    addInteraction: (typeId: InteractionTypeId) => void;
+    submitInteractionAnswer: () => Promise<void>;
+    userUpdateInteractionState: (value: import("../interfaces").InteractionState) => void;
+};
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/interfaces/InteractionComponent.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { InteractionProps } from 'projects/player/plugins/interactive-plugin/interfaces';
-export declare type InteractionComponent = (props: InteractionProps<any>) => React.ReactElement;
+import { InteractionProps, InteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
+export declare type InteractionComponent = (props: InteractionProps<InteractionState>) => React.ReactElement;

package/dist/projects/player/src/plugins/interactive-plugin/interfaces/InteractiveState.d.ts

@@ -0,0 +1,26 @@
+/**
+ * When adding properties to InteractionState
+ * please make sure to omit them from ViewInteractionState below
+ * and submitInteractionAnswer() in useStateManager.tsx
+ */
+export interface InteractionState {
+    error?: string;
+    hasChanges?: boolean;
+    spinner?: boolean;
+    submitted?: boolean;
+}
+export interface ViewInteractionState extends Omit<InteractionState, 'hasChanges' | 'spinner' | 'submitted'> {
+}
+export interface CreateInteractionState extends Omit<InteractionState, 'hasChanges' | 'spinner' | 'submitted'> {
+}
+export interface TimepointState {
+    interactionIndex: number;
+}
+export interface InteractiveState {
+    interactions: {
+        [key: string]: InteractionState;
+    };
+    timepoints: {
+        [key: string]: TimepointState;
+    };
+}

package/dist/projects/player/src/plugins/interactive-plugin/interfaces/ResultSubmission.d.ts

@@ -1,2 +1,2 @@
-import { InteractionResult } from '.';
+import { InteractionResult } from 'projects/player/plugins/interactive-plugin/interfaces';
 export declare type ResultSubmission = (interactionId: string, results: InteractionResult[]) => Promise<void>;

package/dist/projects/player/src/plugins/interactive-plugin/interfaces/SubmissionFunction.d.ts

@@ -1,4 +1,4 @@
 import { Interaction } from 'libs/shared/interfaces';
-import { ResultSubmission } from './ResultSubmission';
-export declare type CreateSubmissionFunction = (state: any, interaction: Interaction) => Promise<void>;
-export declare type ViewSubmissionFunction = (state: any, interaction: Interaction, save: ResultSubmission) => Promise<void>;
+import { CreateInteractionState, ViewInteractionState, ResultSubmission } from 'projects/player/plugins/interactive-plugin/interfaces';
+export declare type CreateSubmissionFunction = (state: CreateInteractionState, interaction: Interaction) => Promise<void>;
+export declare type ViewSubmissionFunction = (state: ViewInteractionState, interaction: Interaction, save: ResultSubmission) => Promise<void>;

package/dist/projects/player/src/plugins/interactive-plugin/interfaces/index.d.ts

@@ -2,7 +2,6 @@ export * from './InteractiveMode';
 export * from './InteractionProps';
 export * from './InteractionComponent';
 export * from './SubmissionFunction';
-export * from './CreateInteractionState';
 export * from './InteractionResult';
 export * from './ResultSubmission';
-export * from './ViewInteractionState';
+export * from './InteractiveState';

package/dist/projects/player/src/plugins/interactive-plugin/utils/InteractiveReducer.d.ts

@@ -0,0 +1,14 @@
+import { InteractionState, InteractiveState, TimepointState } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface InteractionAction {
+    type: 'interaction';
+    id: string;
+    value: InteractionState;
+}
+interface TimepointAction {
+    type: 'timepoint';
+    id: string;
+    value: TimepointState;
+}
+export declare const initialState: InteractiveState;
+export declare function interactiveReducer(state: InteractiveState, action: InteractionAction | TimepointAction): InteractiveState;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickview/player",
-  "version": "0.0.2-rc.2",
+  "version": "0.0.2-rc.3",
   "description": "ClickView Player",
   "main": "dist/player-app.js",
   "scripts": {
@@ -28,7 +28,7 @@
     "@babel/core": "7.11.6",
     "@clickview/eslint-config": "1.0.0",
     "@clickview/player-font": "0.0.6",
-    "@clickview/tooling": "0.0.21-rc.2",
+    "@clickview/tooling": "0.0.21-rc.3",
     "@storybook/react": "6.0.26",
     "@types/cropperjs": "1.3.0",
     "@types/draft-js": "0.10.44",
@@ -40,7 +40,7 @@
     "webpack-dev-server": "3.11.0"
   },
   "dependencies": {
-    "@clickview/styles": "1.0.14-rc.2",
+    "@clickview/styles": "1.0.14-rc.3",
     "@microsoft/signalr": "5.0.2",
     "cropperjs": "1.5.6",
     "draft-convert": "2.1.10",