diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
index a61e3bf55..70f6bd1e2 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
@@ -3,6 +3,13 @@ import PropTypes from 'prop-types';
import { Collapsible } from '@edx/paragon';
+/**
+ * Simple Wrapper for a Form Widget component in the Video Settings modal
+ * Takes a title element and children, and produces a collapsible widget container
+ * My Title}>
+ * My Widget
+ *
+ */
export const CollapsibleFormWidget = ({
title,
children,
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
index 513bebf32..5043b0d52 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
@@ -2,18 +2,49 @@ import React from 'react';
import { useDispatch } from 'react-redux';
// import PropTypes from 'prop-types';
+import {
+ FormControl,
+ FormGroup,
+} from '@edx/paragon';
+
+import { keyStore } from '../../../../../utils';
import CollapsibleFormWidget from './CollapsibleFormWidget';
import hooks from './hooks';
+/**
+ * Collapsible Form widget controlling video start and end times
+ * Also displays the total run time of the video.
+ */
export const DurationWidget = () => {
const dispatch = useDispatch();
- const duration = hooks.widgetValue(hooks.selectorKeys.duration, dispatch);
+ const { duration } = hooks.widgetValues({
+ dispatch,
+ fields: { [hooks.selectorKeys.duration]: hooks.durationWidget },
+ });
+ const timeKeys = keyStore(duration.formValue);
return (
- Duration Widget
- Start: {duration.formValue.startTime}
- Stop: {duration.formValue.stopTime}
- Total: {duration.formValue.total}
+
+
+
+
+
+
+ Total: {duration.formValue.total}
+
+
);
};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget.jsx
index 573176a43..0aca58d38 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget.jsx
@@ -5,9 +5,15 @@ import { useDispatch } from 'react-redux';
import hooks from './hooks';
import CollapsibleFormWidget from './CollapsibleFormWidget';
+/**
+ * Collapsible Form widget controlling video handouts
+ */
export const HandoutWidget = () => {
const dispatch = useDispatch();
- const handout = hooks.widgetValue(hooks.selectorKeys.handout, dispatch);
+ const { handout } = hooks.widgetValues({
+ dispatch,
+ fields: { [hooks.selectorKeys.handout]: hooks.genericWidget },
+ });
return (
{handout.formValue}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget.jsx
index 9540a5b5a..f32840b84 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget.jsx
@@ -5,10 +5,18 @@ import { useDispatch } from 'react-redux';
import hooks from './hooks';
import CollapsibleFormWidget from './CollapsibleFormWidget';
+/**
+ * Collapsible Form widget controlling videe licence type and details
+ */
export const LicenseWidget = () => {
const dispatch = useDispatch();
- const licenseType = hooks.widgetValue(hooks.selectorKeys.licenseType, dispatch);
- const licenseDetails = hooks.widgetValue(hooks.selectorKeys.licenseDetails, dispatch);
+ const { licenseType, licenseDetails } = hooks.widgetValues({
+ dispatch,
+ fields: {
+ [hooks.selectorKeys.licenseType]: hooks.genericWidget,
+ [hooks.selectorKeys.licenseDetails]: hooks.objectWidget,
+ },
+ });
return (
License Widget
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget.jsx
index 9760d06e6..94e5d95d1 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget.jsx
@@ -5,9 +5,15 @@ import { useDispatch } from 'react-redux';
import hooks from './hooks';
import CollapsibleFormWidget from './CollapsibleFormWidget';
+/**
+ * Collapsible Form widget controlling video thumbnail
+ */
export const ThumbnailWidget = () => {
const dispatch = useDispatch();
- const thumbnail = hooks.widgetValue(hooks.selectorKeys.thumbnail, dispatch);
+ const { thumbnail } = hooks.widgetValues({
+ dispatch,
+ fields: { [hooks.selectorKeys.thumbnail]: hooks.genericWidget },
+ });
return (
{thumbnail.formValue}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptsWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptsWidget.jsx
index 5f07dc6fd..a36de6d18 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptsWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptsWidget.jsx
@@ -5,17 +5,24 @@ import { useDispatch } from 'react-redux';
import hooks from './hooks';
import CollapsibleFormWidget from './CollapsibleFormWidget';
+/**
+ * Collapsible Form widget controlling video transcripts
+ */
export const TranscriptWidget = () => {
const dispatch = useDispatch();
- const transcripts = hooks.widgetValue(hooks.selectorKeys.transcripts, dispatch);
- const allowDownload = hooks.widgetValue(
- hooks.selectorKeys.allowTranscriptDownloads,
+ const values = hooks.widgetValues({
dispatch,
- );
- const showByDefault = hooks.widgetValue(
- hooks.selectorKeys.showTranscriptByDefault,
- dispatch,
- );
+ fields: {
+ [hooks.selectorKeys.transcripts]: hooks.objectWidget,
+ [hooks.selectorKeys.allowTranscriptDownloads]: hooks.genericWidget,
+ [hooks.selectorKeys.showTranscriptByDefault]: hooks.genericWidget,
+ },
+ });
+ const {
+ transcripts,
+ allowTranscriptDownloads: allowDownload,
+ showTranscriptByDefault: showByDefault,
+ } = values;
return (
Transcripts
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget.jsx
index 8fb7f26e5..512e6551d 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget.jsx
@@ -2,20 +2,81 @@ import React from 'react';
import { useDispatch } from 'react-redux';
// import PropTypes from 'prop-types';
+import {
+ FormCheck,
+ FormControl,
+ FormGroup,
+ FormLabel,
+ IconButton,
+ Icon,
+} from '@edx/paragon';
+import { Delete } from '@edx/paragon/icons';
+
import hooks from './hooks';
import CollapsibleFormWidget from './CollapsibleFormWidget';
+/**
+ * Collapsible Form widget controlling video source as well as fallback sources
+ */
export const VideoSourceWidget = () => {
const dispatch = useDispatch();
- const source = hooks.widgetValue(hooks.selectorKeys.videoSource, dispatch);
- const fallbackVideos = hooks.widgetValue(hooks.selectorKeys.fallbackVideos, dispatch);
- const allowDownload = hooks.widgetValue(hooks.selectorKeys.allowVideoDownloads, dispatch);
+ const {
+ videoSource: source,
+ fallbackVideos,
+ allowVideoDownloads: allowDownload,
+ } = hooks.widgetValues({
+ dispatch,
+ fields: {
+ [hooks.selectorKeys.videoSource]: hooks.genericWidget,
+ [hooks.selectorKeys.fallbackVideos]: hooks.arrayWidget,
+ [hooks.selectorKeys.allowVideoDownloads]: hooks.genericWidget,
+ },
+ });
+
return (
- Video Source Widget
- Video Source: {source.formValue}
- Fallback Videos: {fallbackVideos.formValue.join(', ')}
- Video Source: {allowDownload.formValue ? 'True' : 'False'}
+
+
+ Video ID or URL
+
+
+ Fallback videos
+
+ {`
+ To be sure all learners can access the video, edX
+ recommends providing additional videos in both .mp4 and
+ .webm formats. The first listed video compatible with the
+ learner's device will play.
+ `}
+
+ {[0, 1].map((index) => (
+
+
+
+
+ ))}
+
+
);
};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/duration.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/duration.js
new file mode 100644
index 000000000..b55bdf87a
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/duration.js
@@ -0,0 +1,81 @@
+import { useCallback } from 'react';
+import * as module from './duration';
+
+const durationMatcher = /^(\d+)?:?(\d+)?:?(\d+)?$/i;
+
+/**
+ * durationFromValue(value)
+ * Returns a duration string in 'hh:mm:ss' format from the given ms value
+ * @param {number} value - duration (in milliseconds)
+ * @return {string} - duration in 'hh:mm:ss' format
+ */
+export const durationFromValue = (value) => {
+ const seconds = Math.floor((value / 1000) % 60);
+ const minutes = Math.floor((value / 60000) % 60);
+ const hours = Math.floor((value / 3600000) % 24);
+ const zeroPad = (num) => String(num).padStart(2, '0');
+ return [hours, minutes, seconds].map(zeroPad).join(':');
+};
+
+/**
+ * valueFromDuration(duration)
+ * Returns a millisecond duration value from the given 'hh:mm:ss' format string
+ * @param {string} duration - duration in 'hh:mm:ss' format
+ * @return {number} - duration in milliseconds. Returns null if duration is invalid.
+ */
+export const valueFromDuration = (duration) => {
+ let matches = duration.trim().match(durationMatcher);
+ if (!matches) {
+ return null;
+ }
+ matches = matches.slice(1).filter(v => v !== undefined);
+ if (matches.length < 3) {
+ for (let i = 0; i <= 3 - matches.length; i++) {
+ matches.unshift(0);
+ }
+ }
+ const [hours, minutes, seconds] = matches.map(x => parseInt(x, 10) || 0);
+ return ((hours * 60 + minutes) * 60 + seconds) * 1000;
+};
+
+/**
+ * durationValue(duration)
+ * Returns the display value for embedded start and stop times
+ * @param {object} duration - object containing startTime and stopTime millisecond values
+ * @return {object} - start and stop time from incoming object mapped to duration strings.
+ */
+export const durationValue = (duration) => ({
+ startTime: module.durationFromValue(duration.startTime),
+ stopTime: module.durationFromValue(duration.stopTime),
+});
+
+/**
+ * updateDuration({ formValue, local, setLocal, setFormValue })
+ * Returns a memoized callback based on inputs that updates local value and form value
+ * if the new string is valid (formValue stores a number, local stores a string).
+ * If the duration string is invalid, resets the local value to the latest good value.
+ * @param {object} formValue - redux-stored durations in milliseconds
+ * @param {object} local - hook-stored duration in 'hh:mm:ss' format
+ * @param {func} setFormValue - set form value
+ * @param {func} setLocal - set local object
+ * @return {func} - callback to update duration locally and in redux
+ * updateDuration(args)(index, durationString)
+ */
+export const updateDuration = ({
+ formValue,
+ local,
+ setFormValue,
+ setLocal,
+}) => useCallback(
+ (index, durationString) => {
+ const newValue = module.valueFromDuration(durationString);
+ if (newValue !== null) {
+ setLocal({ ...local, [index]: durationString });
+ setFormValue({ ...formValue, [index]: newValue });
+ } else {
+ // If invalid duration string, reset to last valid value
+ setLocal({ ...local, [index]: module.durationFromValue(formValue[index]) });
+ }
+ },
+ [formValue, local, setLocal, setFormValue],
+);
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/duration.test.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/duration.test.js
new file mode 100644
index 000000000..13affb448
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/duration.test.js
@@ -0,0 +1,134 @@
+import { keyStore } from '../../../../../utils';
+import * as duration from './duration';
+
+jest.mock('react', () => ({
+ ...jest.requireActual('react'),
+ useCallback: (cb, prereqs) => ({ useCallback: { cb, prereqs } }),
+}));
+
+let hook;
+const durationKeys = keyStore(duration);
+const [h, m, s] = [3600000, 60000, 1000];
+const durationPairs = [
+ [0, '00:00:00'],
+ [5000, '00:00:05'],
+ [60000, '00:01:00'],
+ [3600000, '01:00:00'],
+ [3665000, '01:01:05'],
+];
+const trickyDurations = [
+ ['10:00', 600000],
+ ['23', 23000],
+ ['100:100:100', 100 * (m + s + h)],
+ ['23:42:781', 23 * h + 42 * m + 781 * s],
+];
+let spies = {};
+let props;
+let cb;
+let prereqs;
+let oldDuration;
+describe('Video Settings Modal duration hooks', () => {
+ beforeEach(() => {
+ spies = {};
+ oldDuration = { ...jest.requireActual('./duration') };
+ });
+ afterEach(() => {
+ Object.keys(oldDuration).forEach((key) => {
+ duration[key] = oldDuration[key];
+ });
+ Object.keys(spies).forEach((key) => {
+ spies[key].mockRestore();
+ });
+ });
+
+ describe('durationFromValue', () => {
+ it('translates milliseconds into hh:mm:ss format', () => {
+ durationPairs.forEach(
+ ([val, dur]) => expect(duration.durationFromValue(val)).toEqual(dur),
+ );
+ });
+ });
+ describe('valueFromDuration', () => {
+ beforeEach(() => {
+ hook = duration.valueFromDuration;
+ });
+ it('returns null if given a bad duration string', () => {
+ const badChecks = ['a', '00:00:1f', '0adg:00:04'];
+ badChecks.forEach(dur => expect(hook(dur)).toEqual(null));
+ });
+ it('returns simple durations', () => {
+ durationPairs.forEach(([val, dur]) => expect(hook(dur)).toEqual(val));
+ });
+ it('returns tricky durations, prepending zeros and expanding out sections', () => {
+ trickyDurations.forEach(([dur, val]) => expect(hook(dur)).toEqual(val));
+ });
+ });
+ describe('durationValue', () => {
+ const mock = jest.fn(v => ({ duration: v }));
+ beforeEach(() => {
+ jest.spyOn(duration, durationKeys.durationFromValue).mockImplementation(mock);
+ });
+ it('returns an object that maps durationFromValue to the passed duration keys', () => {
+ const testDuration = { startTime: 1, stopTime: 2, other: 'values' };
+ expect(duration.durationValue(testDuration)).toEqual({
+ startTime: mock(testDuration.startTime),
+ stopTime: mock(testDuration.stopTime),
+ });
+ });
+ });
+ describe('updateDuration', () => {
+ const testDuration = 'myDuration';
+ const testIndex = 'startTime';
+ const mockValueFromDuration = (dur) => ({ value: dur });
+ const mockDurationFromValue = (value) => ({ duration: value });
+ beforeEach(() => {
+ props = {
+ formValue: { startTime: 230000, stopTime: 0 },
+ local: { startTime: '00:00:23', stopTime: '00:00:00' },
+ setLocal: jest.fn(),
+ setFormValue: jest.fn(),
+ };
+ spies.valueFromDuration = jest.spyOn(duration, durationKeys.valueFromDuration)
+ .mockImplementation(mockValueFromDuration);
+ hook = duration.updateDuration;
+ ({ cb, prereqs } = hook(props).useCallback);
+ });
+ it('returns a useCallback field based on the passed args', () => {
+ expect(prereqs).toEqual([
+ props.formValue,
+ props.local,
+ props.setLocal,
+ props.setFormValue,
+ ]);
+ });
+ describe('callback', () => {
+ describe('if the passed durationString is valid', () => {
+ it('sets the local value to updated strings and form value to new timestamp value', () => {
+ cb(testIndex, testDuration);
+ expect(duration.valueFromDuration).toHaveBeenCalledWith(testDuration);
+ expect(props.setLocal).toHaveBeenCalledWith({
+ ...props.local,
+ [testIndex]: testDuration,
+ });
+ expect(props.setFormValue).toHaveBeenCalledWith({
+ ...props.formValue,
+ [testIndex]: mockValueFromDuration(testDuration),
+ });
+ });
+ });
+ describe('if the passed durationString is not valid', () => {
+ it('updates local back to the string for the form-stored timestamp value', () => {
+ spies.valueFromDuration.mockReturnValue(null);
+ spies.durationFromValue = jest.spyOn(duration, durationKeys.durationFromValue)
+ .mockImplementationOnce(mockDurationFromValue);
+ hook(props).useCallback.cb(testIndex, testDuration);
+ expect(props.setLocal).toHaveBeenCalledWith({
+ ...props.local,
+ [testIndex]: mockDurationFromValue(props.formValue[testIndex]),
+ });
+ expect(props.setFormValue).not.toHaveBeenCalled();
+ });
+ });
+ });
+ });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.js
new file mode 100644
index 000000000..7386d50ab
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.js
@@ -0,0 +1,48 @@
+/**
+ * handleIndexEvent({ handler, transform })
+ * return a method that takes an index and returns an event handler of the given type
+ * that calls a transform with the given index and the incoming value.
+ * @param {func} handler - event handler (onValue, onChecked, etc)
+ * @param {func} transform - transform method taking an index and a new value
+ * @return {func} - event handler creator for index-tied values
+ */
+export const handleIndexEvent = ({ handler, transform }) => (index) => (
+ handler(val => transform(index, val))
+);
+
+/**
+ * handleIndexTransformEvent({ handler, setter, local, transform })
+ * return a method that takes an index and returns an event handler of the given type
+ * that calls a transform with the given index and the incoming value.
+ * @param {func} handler - event handler (onValue, onChecked, etc)
+ * @param {string|number|object} local - local hook values
+ * @param {func} setter - method that updates models based on event
+ * @param {func} transform - transform method taking an index and a new value
+ * @return {func} - event handler creator for index-tied values with separate setter and transforms
+ */
+export const handleIndexTransformEvent = ({
+ handler,
+ local,
+ setter,
+ transform,
+}) => (index) => (
+ handler(val => setter(transform(local, index, val)))
+);
+
+/**
+ * onValue(handler)
+ * returns an event handler that calls the given method with the event target value
+ * Intended for most basic input types.
+ * @param {func} handler - callback to receive the event value
+ * @return - event handler that calls passed handler with event.target.value
+ */
+export const onValue = (handler) => (e) => handler(e.target.value);
+
+/**
+ * onValue(handler)
+ * returns an event handler that calls the given method with the event target value
+ * Intended for checkbox input types.
+ * @param {func} handler - callback to receive the event value
+ * @return - event handler that calls passed handler with event.target.value
+ */
+export const onChecked = (handler) => (e) => handler(e.target.checked);
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.test.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.test.js
new file mode 100644
index 000000000..208b581d0
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.test.js
@@ -0,0 +1,50 @@
+import * as handlers from './handlers';
+
+const handler = jest.fn(cb => ({ handler: cb }));
+const transform = jest.fn((...args) => ({ transform: args }));
+const setter = jest.fn(val => ({ setter: val }));
+const index = 'test-index';
+const val = 'TEST value';
+const local = 'local-test-value';
+describe('Video Settings Modal event handler methods', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+ describe('handleIndexEvent', () => {
+ describe('returned method', () => {
+ it('takes index and calls handler with transform handler based on index', () => {
+ expect(
+ handlers.handleIndexEvent({ handler, transform })(index).handler(val),
+ ).toEqual(transform(index, val));
+ });
+ });
+ });
+ describe('handleIndexTransformEvent', () => {
+ describe('returned method', () => {
+ it('takes index and calls handler with setter(transform(local, index, val))', () => {
+ expect(
+ handlers.handleIndexTransformEvent({
+ handler,
+ setter,
+ local,
+ transform,
+ })(index).handler(val),
+ ).toEqual(setter(transform(local, index, val)));
+ });
+ });
+ });
+ describe('onValue', () => {
+ describe('returned method', () => {
+ it('calls handler with event.target.value', () => {
+ expect(handlers.onValue(handler)({ target: { value: val } })).toEqual(handler(val));
+ });
+ });
+ });
+ describe('onChecked', () => {
+ describe('returned method', () => {
+ it('calls handler with event.target.checked', () => {
+ expect(handlers.onChecked(handler)({ target: { checked: val } })).toEqual(handler(val));
+ });
+ });
+ });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.js
index 6a9b5f0fa..6b961a4a0 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.js
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.js
@@ -1,16 +1,333 @@
+import {
+ useCallback,
+ useState,
+ useEffect,
+ useMemo,
+} from 'react';
import { useSelector } from 'react-redux';
-import { keyStore } from '../../../../../utils';
+import { StrictDict, keyStore } from '../../../../../utils';
import { actions, selectors } from '../../../../../data/redux';
+import {
+ updateDuration,
+ durationValue,
+} from './duration';
+
+import {
+ handleIndexEvent,
+ handleIndexTransformEvent,
+ onValue,
+ onChecked,
+} from './handlers';
+import * as module from './hooks';
+
export const selectorKeys = keyStore(selectors.video);
-export const widgetValue = (key, dispatch) => ({
- formValue: useSelector(selectors.video[key]),
- setFormValue: (val) => dispatch(actions.video.load({ [key]: val })),
-});
+export const state = StrictDict(
+ [
+ selectorKeys.videoSource,
+ selectorKeys.fallbackVideos,
+ selectorKeys.allowVideoDownloads,
+
+ selectorKeys.thumbnail,
+
+ selectorKeys.transcripts,
+ selectorKeys.allowTranscriptDownloads,
+ selectorKeys.showTranscriptByDefault,
+
+ selectorKeys.duration,
+
+ selectorKeys.handout,
+
+ selectorKeys.licenseType,
+ selectorKeys.licenseDetails,
+ ].reduce(
+ (obj, key) => ({ ...obj, [key]: (val) => useState(val) }),
+ {},
+ ),
+);
+
+/**
+ * updateArray(array, index, val)
+ * Returns a new array with the element at replaced with
+ * @param {any[]} array - array of values
+ * @param {number} index - array index to replace
+ * @param {any} val - new value
+ * @return {any[]} - new array with element at index replaced with val
+ */
+export const updatedArray = (array, index, val) => {
+ const newArray = [...array];
+ newArray.splice(index, 1, val);
+ return newArray;
+};
+
+/**
+ * updateObject(object, index, val)
+ * Returns a new object with the element at replaced with
+ * @param {object} object - object of values
+ * @param {string} index - object index to replace
+ * @param {any} val - new value
+ * @return {any[]} - new object with element at index replaced with val
+ */
+export const updatedObject = (obj, index, val) => ({ ...obj, [index]: val });
+
+/**
+ * updateFormField({ dispatch, key })(val)
+ * Creates a callback to update a given form field based on an incoming value.
+ * @param {func} dispatch - redux dispatch method
+ * @param {string} key - form key
+ * @return {func} - callback taking a value and updating the video redux field
+ */
+export const updateFormField = ({ dispatch, key }) => useCallback(
+ (val) => dispatch(actions.video.updateField({ [key]: val })),
+ [],
+);
+
+/**
+ * currentValue({ key, formValue })
+ * Returns the current display value based on the form value.
+ * If duration, uses durationValue to transform the formValue
+ * @param {string} key - redux video state key
+ * @param {any} formValue - current value in the redux
+ * @return {any} - to-local translation of formValue
+ */
+export const currentValue = ({ key, formValue }) => {
+ if (key === selectorKeys.duration) {
+ return durationValue(formValue);
+ }
+ return formValue;
+};
+
+/**
+ * valueHooks({ dispatch, key })
+ * returns local and redux state associated with the given data key, as well as methods
+ * to update either or both of those.
+ * @param {string} key - redux video state key
+ * @param {func} dispatch - redux dispatch method
+ * @return {object} - hooks based on the local and redux value associated with the given key
+ * formValue - value state in redux
+ * setFormValue - sets form field in redux
+ * local - value state in hook
+ * setLocal - sets form field in hook
+ * setAll - sets form field in hook AND redux
+ */
+export const valueHooks = ({ dispatch, key }) => {
+ const formValue = useSelector(selectors.video[key]);
+ const initialValue = useMemo(() => module.currentValue({ key, formValue }), []);
+ const [local, setLocal] = module.state[key](initialValue);
+ const setFormValue = module.updateFormField({ dispatch, key });
+
+ useEffect(() => {
+ if (key === selectorKeys.duration) {
+ setLocal(durationValue(formValue));
+ } else {
+ setLocal(formValue);
+ }
+ }, [formValue]);
+
+ const setAll = useCallback(
+ (val) => {
+ setLocal(val);
+ setFormValue(val);
+ },
+ [setLocal, setFormValue],
+ );
+ return {
+ formValue,
+ local,
+ setLocal,
+ setFormValue,
+ setAll,
+ };
+};
+
+/**
+ * genericWidget({ dispatch, key })
+ * Returns the value-tied hooks for inputs associated with a flat value in redux
+ * Tied to redux video shape based on data key
+ * includes onChange, onBlur, and onCheckedChange methods. blur and checked change
+ * instantly affect both redux and local, while change (while typing) only affects
+ * the local component.
+ * @param {func} dispatch - redux dispatch method
+ * @param {string} key - redux video shape key
+ * @return {object} - state hooks
+ * formValue - value state in redux
+ * setFormValue - sets form field in redux
+ * local - value state in hook
+ * setLocal - sets form field in hook
+ * setAll - sets form field in hook AND redux
+ * onChange - handle input change by updating local state
+ * onCheckedChange - handle checked change by updating local and redux state
+ * onBlur - handle input blur by updating local and redux states
+ */
+export const genericWidget = ({ dispatch, key }) => {
+ const {
+ formValue,
+ local,
+ setLocal,
+ setFormValue,
+ setAll,
+ } = module.valueHooks({ dispatch, key });
+ return {
+ formValue,
+ local,
+ setLocal,
+ setAll,
+ setFormValue,
+ onChange: onValue(setLocal),
+ onCheckedChange: onChecked(setAll),
+ onBlur: onValue(setAll),
+ };
+};
+
+/**
+ * arrayWidget({ dispatch, key })
+ * Returns the value-tied hooks for inputs associated with a value in an array in the
+ * video redux shape.
+ * Tied to redux video shape based on data key
+ * includes onChange, onBlur, and onClear methods. blur changes local and redux state,
+ * on change affects only local state, and onClear sets both to an empty string.
+ * The creators from this widget will require an index to provide the final event-handler.
+ * @param {func} dispatch - redux dispatch method
+ * @param {string} key - redux video shape key
+ * @return {object} - state hooks
+ * formValue - value state in redux
+ * setFormValue - sets form field in redux
+ * local - value state in hook
+ * setLocal - sets form field in hook
+ * setAll - sets form field in hook AND redux
+ * onChange(index) - handle input change by updating local state
+ * onBlur(index) - handle input blur by updating local and redux states
+ * onClear(index) - handle clear event by setting value to empty string
+ */
+export const arrayWidget = ({ dispatch, key }) => {
+ const widget = module.valueHooks({ dispatch, key });
+ return {
+ ...widget,
+ onChange: handleIndexTransformEvent({
+ handler: onValue,
+ setter: widget.setLocal,
+ transform: module.updatedArray,
+ local: widget.local,
+ }),
+ onBlur: handleIndexTransformEvent({
+ handler: onValue,
+ setter: widget.setAll,
+ transform: module.updatedArray,
+ local: widget.local,
+ }),
+ onClear: (index) => () => widget.setAll(module.updatedArray(widget.local, index, '')),
+ };
+};
+
+/**
+ * objectWidget({ dispatch, key })
+ * Returns the value-tied hooks for inputs associated with a value in an object in the
+ * video redux shape.
+ * Tied to redux video shape based on data key
+ * includes onChange and onBlur methods. blur changes local and redux state,
+ * on change affects only local state.
+ * The creators from this widget will require an index to provide the final event-handler.
+ * @param {func} dispatch - redux dispatch method
+ * @param {string} key - redux video shape key
+ * @return {object} - state hooks
+ * formValue - value state in redux
+ * setFormValue - sets form field in redux
+ * local - value state in hook
+ * setLocal - sets form field in hook
+ * setAll - sets form field in hook AND redux
+ * onChange(index) - handle input change by updating local state
+ * onBlur(index) - handle input blur by updating local and redux states
+ * onClear(index) - handle clear event by setting value to empty string
+ */
+export const objectWidget = ({ dispatch, key }) => {
+ const widget = module.valueHooks({ dispatch, key });
+ return {
+ ...widget,
+ onChange: handleIndexTransformEvent({
+ handler: onValue,
+ setter: widget.setLocal,
+ transform: module.updatedObject,
+ local: widget.local,
+ }),
+ onBlur: handleIndexTransformEvent({
+ handler: onValue,
+ setter: widget.setAll,
+ transform: module.updatedObject,
+ local: widget.local,
+ }),
+ };
+};
+
+/**
+ * durationWidget({ dispatch, key })
+ * Returns the value-tied hooks for the video duration widget.
+ * Includes onChange, and onBlur. blur changes local and redux state, on-change affects
+ * only local state.
+ * The creators from this widget will require an index to provide the final event-handler.
+ * @param {func} dispatch - redux dispatch method
+ * @param {string} key - redux video shape key
+ * @return {object} - state hooks
+ * formValue - value state in redux
+ * setFormValue - sets form field in redux
+ * local - value state in hook
+ * setLocal - sets form field in hook
+ * setAll - sets form field in hook AND redux
+ * onChange(index) - handle input change by updating local state
+ * onBlur(index) - handle input blur by updating local and redux states
+ * onClear(index) - handle clear event by setting value to empty string
+ */
+export const durationWidget = ({ dispatch }) => {
+ const widget = module.valueHooks({ dispatch, key: selectorKeys.duration });
+ const {
+ formValue,
+ local,
+ setFormField,
+ setLocal,
+ } = widget;
+ return {
+ ...widget,
+ onBlur: useCallback(
+ handleIndexEvent({
+ handler: onValue,
+ transform: updateDuration(widget),
+ }),
+ [formValue, local, setFormField],
+ ),
+ onChange: useCallback(
+ handleIndexTransformEvent({
+ handler: onValue,
+ setter: setLocal,
+ transform: module.updatedObject,
+ local,
+ }),
+ [local],
+ ),
+ };
+};
+
+/**
+ * widgetValues({ fields, dispatch })
+ * widget value populator, that takes a fields mapping (dataKey: widgetFn) and dispatch
+ * method, and returns object of widget values.
+ * @param {object} fields - object with video data keys for keys and widget methods for values
+ * @param {func} dispatch - redux dispatch method
+ * @return {object} - { : }
+ */
+export const widgetValues = ({ fields, dispatch }) => Object.keys(fields).reduce(
+ (obj, key) => ({
+ ...obj,
+ [key]: fields[key]({ key, dispatch }),
+ }),
+ {},
+);
export default {
+ arrayWidget,
+ durationWidget,
+ genericWidget,
+ objectWidget,
selectorKeys,
- widgetValue,
+ widgetValues,
};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.test.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.test.js
new file mode 100644
index 000000000..405737d46
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.test.js
@@ -0,0 +1,377 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { keyStore } from '../../../../../utils';
+import { actions, selectors } from '../../../../../data/redux';
+import { MockUseState } from '../../../../../../testUtils';
+
+import * as duration from './duration';
+import * as handlers from './handlers';
+import * as hooks from './hooks';
+
+jest.mock('react', () => ({
+ ...jest.requireActual('react'),
+ useState: (val) => ({ useState: val }),
+ useEffect: jest.fn(),
+ useCallback: jest.fn((cb, prereqs) => ({ useCallback: { cb, prereqs } })),
+ useMemo: jest.fn((cb, prereqs) => ({ useMemo: { cb, prereqs } })),
+}));
+
+jest.mock('./duration', () => ({
+ updateDuration: jest.fn(value => ({ updateDuration: value })),
+ durationValue: jest.fn(value => ({ durationValue: value })),
+}));
+
+jest.mock('./handlers', () => ({
+ handleIndexEvent: jest.fn(args => ({ handleIndexEvent: args })),
+ handleIndexTransformEvent: jest.fn(args => ({ handleIndexTransformEvent: args })),
+ onValue: jest.fn(cb => ({ onValue: cb })),
+ onChecked: jest.fn(cb => ({ onChecked: cb })),
+}));
+
+jest.mock('../../../../../data/redux', () => ({
+ actions: {
+ video: {
+ updateField: (val) => ({ updateField: val }),
+ },
+ },
+ selectors: {
+ video: {
+ videoSource: (state) => ({ videoSource: state }),
+ fallbackVideos: (state) => ({ fallbackVideos: state }),
+ allowVideoDownloads: (state) => ({ allowVideoDownloads: state }),
+ thumbnail: (state) => ({ thumbnail: state }),
+ transcripts: (state) => ({ transcripts: state }),
+ allowTranscriptDownloads: (state) => ({ allowTranscriptDownloads: state }),
+ showTranscriptByDefault: (state) => ({ showTranscriptByDefault: state }),
+ duration: (state) => ({ duration: state }),
+ handout: (state) => ({ handout: state }),
+ licenseType: (state) => ({ licenseType: state }),
+ licenseDetails: (state) => ({ licenseDetails: state }),
+ },
+ },
+}));
+
+const keys = {
+ duration: keyStore(duration),
+ handlers: keyStore(handlers),
+ hooks: keyStore(hooks),
+ selectors: hooks.selectorKeys,
+};
+
+const state = new MockUseState(hooks);
+const testValue = 'my-test-value';
+const testValue2 = 'my-test-value-2';
+const testKey = keys.selectors.handout;
+const dispatch = jest.fn(val => ({ dispatch: val }));
+
+let out;
+
+describe('Video Settings modal hooks', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+ describe('state hooks', () => {
+ state.testGetter(state.keys.videoSource);
+ state.testGetter(state.keys.fallbackVideos);
+ state.testGetter(state.keys.allowVideoDownloads);
+
+ state.testGetter(state.keys.thumbnail);
+
+ state.testGetter(state.keys.transcripts);
+ state.testGetter(state.keys.allowTranscriptDownloads);
+ state.testGetter(state.keys.showTranscriptByDefault);
+
+ state.testGetter(state.keys.duration);
+
+ state.testGetter(state.keys.handout);
+
+ state.testGetter(state.keys.licenseType);
+ state.testGetter(state.keys.licenseDetails);
+ });
+ describe('non-state hooks', () => {
+ beforeEach(() => state.mock());
+ afterEach(() => state.restore());
+ describe('updatedArray', () => {
+ it('returns a new array with the given index replaced', () => {
+ const testArray = ['0', '1', '2', '3', '4'];
+ const oldArray = [...testArray];
+ expect(hooks.updatedArray(testArray, 3, testValue)).toEqual(
+ ['0', '1', '2', testValue, '4'],
+ );
+ expect(testArray).toEqual(oldArray);
+ });
+ });
+ describe('updatedObject', () => {
+ it('returns a new object with the given index replaced', () => {
+ const testObj = { some: 'data', [testKey]: testValue };
+ const oldObj = { ...testObj };
+ expect(hooks.updatedObject(testObj, testKey, testValue2)).toEqual(
+ { ...testObj, [testKey]: testValue2 },
+ );
+ expect(testObj).toEqual(oldObj);
+ });
+ });
+ describe('updateFormField', () => {
+ it('returns a memoized callback that is only created once', () => {
+ expect(hooks.updateFormField({ dispatch, key: testKey }).useCallback.prereqs).toEqual([]);
+ });
+ it('returns memoized callback that dispaches updateField with val on the given key', () => {
+ hooks.updateFormField({ dispatch, key: testKey }).useCallback.cb(testValue);
+ expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({
+ [testKey]: testValue,
+ }));
+ });
+ });
+ describe('currentValue', () => {
+ it('returns duration display of form value if is duration key', () => {
+ expect(
+ hooks.currentValue({ key: keys.selectors.duration, formValue: testValue }),
+ ).toEqual(duration.durationValue(testValue));
+ });
+ it('returns the raw formValue by default', () => {
+ expect(
+ hooks.currentValue({ key: testKey, formValue: testValue }),
+ ).toEqual(testValue);
+ });
+ });
+ describe('valueHooks', () => {
+ let formValue;
+ beforeEach(() => {
+ formValue = useSelector(selectors.video[testKey]);
+ });
+ describe('behavior', () => {
+ describe('initialization', () => {
+ test('useEffect memoized on formValue', () => {
+ hooks.valueHooks({ dispatch, key: testKey });
+ expect(useEffect).toHaveBeenCalled();
+ expect(useEffect.mock.calls[0][1]).toEqual([formValue]);
+ });
+ test('calls setLocal with durationValue(formValue) if is duration', () => {
+ hooks.valueHooks({ dispatch, key: keys.selectors.duration });
+ useEffect.mock.calls[0][0]();
+ expect(state.setState[keys.selectors.duration]).toHaveBeenCalledWith(
+ duration.durationValue(useSelector(selectors.video.duration)),
+ );
+ });
+ test('calls setLocal with formValue by default', () => {
+ hooks.valueHooks({ dispatch, key: testKey });
+ useEffect.mock.calls[0][0]();
+ expect(state.setState[testKey]).toHaveBeenCalledWith(formValue);
+ });
+ });
+ });
+ describe('returned object', () => {
+ const mockCurrentValue = (args) => ({ currentValue: args });
+ const mockUpdateFormField = (args) => jest.fn(
+ (val) => ({ updateFormField: { args, val } }),
+ );
+ beforeEach(() => {
+ jest.spyOn(hooks, keys.hooks.currentValue)
+ .mockImplementationOnce(mockCurrentValue);
+ jest.spyOn(hooks, keys.hooks.updateFormField)
+ .mockImplementationOnce(mockUpdateFormField);
+ out = hooks.valueHooks({ dispatch, key: testKey });
+ });
+ test('formValue from selectors.video[key]', () => {
+ expect(out.formValue).toEqual(useSelector(selectors.video[testKey]));
+ });
+ describe('local and setLocal', () => {
+ test('keyed to state, initialized with memo of currentValue that never updates', () => {
+ const { local, setLocal } = out;
+ expect(local.useMemo.cb()).toEqual(mockCurrentValue({ key: testKey, formValue }));
+ expect(local.useMemo.prereqs).toEqual([]);
+ setLocal(testValue);
+ expect(state.setState[testKey]).toHaveBeenCalledWith(testValue);
+ });
+ });
+ test('setFormValue forwarded from module', () => {
+ expect(out.setFormValue(testValue)).toEqual(
+ mockUpdateFormField({ dispatch, key: testKey })(testValue),
+ );
+ });
+ describe('setAll', () => {
+ it('returns a memoized callback based on setLocal and setFormValue', () => {
+ expect(out.setAll.useCallback.prereqs).toEqual([out.setLocal, out.setFormValue]);
+ });
+ it('calls setLocal and setFormValue with the passed value', () => {
+ out.setAll.useCallback.cb(testValue);
+ expect(out.setLocal).toHaveBeenCalledWith(testValue);
+ expect(out.setFormValue).toHaveBeenCalledWith(testValue);
+ });
+ });
+ });
+ });
+ describe('genericWidget', () => {
+ const valueProps = {
+ formValue: '123',
+ local: 23,
+ setLocal: jest.fn(),
+ setFormValue: jest.fn(),
+ setAll: jest.fn(),
+ };
+ beforeEach(() => {
+ jest.spyOn(hooks, keys.hooks.valueHooks).mockReturnValueOnce(valueProps);
+ out = hooks.genericWidget({ dispatch, key: testKey });
+ });
+ describe('returned object', () => {
+ it('forwards formValue and local from valueHooks', () => {
+ expect(hooks.valueHooks).toHaveBeenCalledWith({ dispatch, key: testKey });
+ expect(out.formValue).toEqual(valueProps.formValue);
+ expect(out.local).toEqual(valueProps.local);
+ });
+ test('setFormValue mapped to valueHooks.setFormValue', () => {
+ expect(out.setFormValue).toEqual(valueProps.setFormValue);
+ });
+ test('onChange mapped to handlers.onValue(valueHooks.setLocal)', () => {
+ expect(out.onChange).toEqual(handlers.onValue(valueProps.setLocal));
+ });
+ test('onCheckedChange mapped to handlers.onChecked(valueHooks.setAll)', () => {
+ expect(out.onCheckedChange).toEqual(handlers.onChecked(valueProps.setAll));
+ });
+ test('onBlur mapped to handlers.onValue(valueHooks.setAll)', () => {
+ expect(out.onBlur).toEqual(handlers.onValue(valueProps.setAll));
+ });
+ });
+ });
+ describe('non-generic widgets', () => {
+ const widgetValues = {
+ formValue: '123',
+ local: 23,
+ setLocal: jest.fn(),
+ setFormValue: jest.fn(),
+ setAll: jest.fn(),
+ };
+ let valueHooksSpy;
+ beforeEach(() => {
+ valueHooksSpy = jest.spyOn(hooks, keys.hooks.valueHooks).mockReturnValue(widgetValues);
+ });
+ afterEach(() => {
+ valueHooksSpy.mockRestore();
+ });
+ describe('arrayWidget', () => {
+ const mockUpdatedArray = (...args) => ({ updatedArray: args });
+ let arraySpy;
+ beforeEach(() => {
+ arraySpy = jest.spyOn(hooks, keys.hooks.updatedArray)
+ .mockImplementation(mockUpdatedArray);
+ out = hooks.arrayWidget({ dispatch, key: testKey });
+ });
+ afterEach(() => {
+ arraySpy.mockRestore();
+ });
+ it('forwards widget values', () => {
+ expect(out.formValue).toEqual(widgetValues.formValue);
+ expect(out.local).toEqual(widgetValues.local);
+ });
+ it('overrides onChange with handleIndexTransformEvent', () => {
+ expect(out.onChange).toEqual(handlers.handleIndexTransformEvent({
+ handler: handlers.onValue,
+ setter: widgetValues.setLocal,
+ transform: arraySpy,
+ local: widgetValues.local,
+ }));
+ });
+ it('overrides onBlur with handleIndexTransformEvent', () => {
+ expect(out.onBlur).toEqual(handlers.handleIndexTransformEvent({
+ handler: handlers.onValue,
+ setter: widgetValues.setAll,
+ transform: arraySpy,
+ local: widgetValues.local,
+ }));
+ });
+ it('adds onClear event that calls setAll with empty string', () => {
+ out.onClear(testKey)();
+ expect(widgetValues.setAll).toHaveBeenCalledWith(
+ arraySpy(widgetValues.local, testKey, ''),
+ );
+ });
+ });
+ describe('objectWidget', () => {
+ beforeEach(() => {
+ out = hooks.objectWidget({ dispatch, key: testKey });
+ });
+ it('forwards widget values', () => {
+ expect(out.formValue).toEqual(widgetValues.formValue);
+ expect(out.local).toEqual(widgetValues.local);
+ });
+ it('overrides onChange with handleIndexTransformEvent', () => {
+ expect(out.onChange).toEqual(handlers.handleIndexTransformEvent({
+ handler: handlers.onValue,
+ setter: widgetValues.setLocal,
+ transform: hooks.updatedObject,
+ local: widgetValues.local,
+ }));
+ });
+ it('overrides onBlur with handleIndexTransformEvent', () => {
+ expect(out.onBlur).toEqual(handlers.handleIndexTransformEvent({
+ handler: handlers.onValue,
+ setter: widgetValues.setAll,
+ transform: hooks.updatedObject,
+ local: widgetValues.local,
+ }));
+ });
+ });
+ describe('durationWidget', () => {
+ beforeEach(() => {
+ out = hooks.durationWidget({ dispatch });
+ });
+ it('forwards widget values', () => {
+ expect(out.formValue).toEqual(widgetValues.formValue);
+ expect(out.local).toEqual(widgetValues.local);
+ });
+ describe('onBlur', () => {
+ test('memoized callback based on formValue, local, and setFormValue from widget', () => {
+ expect(out.onBlur.useCallback.prereqs).toEqual(
+ [widgetValues.formValue, widgetValues.local, widgetValues.setFormField],
+ );
+ });
+ test('calls handleIndexEvent with updateDuration', () => {
+ expect(out.onBlur.useCallback.cb).toEqual(
+ handlers.handleIndexEvent({
+ handler: handlers.onValue,
+ transform: duration.updateDuration(widgetValues),
+ }),
+ );
+ });
+ });
+ describe('onChange', () => {
+ test('memoized callback based on local from widget', () => {
+ expect(out.onChange.useCallback.prereqs).toEqual([widgetValues.local]);
+ });
+ test('calls handleIndexTransformEvent with setLocal', () => {
+ expect(out.onChange.useCallback.cb).toEqual(
+ handlers.handleIndexTransformEvent({
+ handler: handlers.onValue,
+ setter: widgetValues.setLocal,
+ transform: hooks.updatedObject,
+ local: widgetValues.local,
+ }),
+ );
+ });
+ });
+ });
+ });
+ describe('widgetValues', () => {
+ describe('returned object', () => {
+ test('shaped to the fields object, where each value is called with key and dispatch', () => {
+ const testKeys = ['1', '24', '23gsa'];
+ const fieldMethods = [
+ jest.fn(v => ({ v1: v })),
+ jest.fn(v => ({ v2: v })),
+ jest.fn(v => ({ v3: v })),
+ ];
+ const fields = testKeys.reduce((obj, key, index) => ({
+ ...obj,
+ [key]: fieldMethods[index],
+ }), {});
+ const expected = testKeys.reduce((obj, key, index) => ({
+ ...obj,
+ [key]: fieldMethods[index]({ key, dispatch }),
+ }), {});
+ expect(hooks.widgetValues({ fields, dispatch })).toMatchObject(expected);
+ });
+ });
+ });
+ });
+});
diff --git a/src/editors/containers/VideoEditor/index.jsx b/src/editors/containers/VideoEditor/index.jsx
index d85dddf6c..c15c48ca0 100644
--- a/src/editors/containers/VideoEditor/index.jsx
+++ b/src/editors/containers/VideoEditor/index.jsx
@@ -8,7 +8,10 @@ export default function VideoEditor({
onClose,
}) {
return (
-
+ ({})}
+ >
diff --git a/src/editors/data/constants/video.js b/src/editors/data/constants/video.js
new file mode 100644
index 000000000..69fd7063f
--- /dev/null
+++ b/src/editors/data/constants/video.js
@@ -0,0 +1,10 @@
+import { StrictDict } from '../../utils';
+
+export const timeKeys = StrictDict({
+ startTime: 'startTime',
+ stopTime: 'stopTime',
+});
+
+export default {
+ timeKeys,
+};
diff --git a/src/editors/data/redux/video/reducer.js b/src/editors/data/redux/video/reducer.js
index 4725fd85a..09a21f1d5 100644
--- a/src/editors/data/redux/video/reducer.js
+++ b/src/editors/data/redux/video/reducer.js
@@ -3,16 +3,19 @@ import { createSlice } from '@reduxjs/toolkit';
import { StrictDict } from '../../../utils';
const initialState = {
- videoSource: null,
- fallbackVideos: [],
+ videoSource: '',
+ fallbackVideos: [
+ '',
+ '',
+ ],
allowVideoDownloads: false,
thumbnail: null,
transcripts: {},
allowTranscriptDownloads: false,
duration: {
- startTime: null,
- stopTime: null,
- total: null,
+ startTime: '00:00:00',
+ stopTime: '00:00:00',
+ total: '00:00:00',
},
showTranscriptByDefault: false,
handout: null,
@@ -30,6 +33,10 @@ const video = createSlice({
name: 'video',
initialState,
reducers: {
+ updateField: (state, { payload }) => ({
+ ...state,
+ ...payload,
+ }),
load: (state, { payload }) => ({
...payload,
}),
diff --git a/src/editors/data/services/cms/mockVideoData.js b/src/editors/data/services/cms/mockVideoData.js
index 6e8ee5c9b..20b3d8aaf 100644
--- a/src/editors/data/services/cms/mockVideoData.js
+++ b/src/editors/data/services/cms/mockVideoData.js
@@ -36,10 +36,10 @@ export const singleVideoData = {
english: 'my-transcript-url',
},
allowTranscriptDownloads: false,
- duration: { // in ms
+ duration: {
startTime: 0,
- endTime: 0,
- total: 5000,
+ stopTime: 0,
+ total: 0,
},
showTranscriptByDefault: false,
handout: 'my-handout-url',