feat: add checkbox for public video sharing field

2023-03-08 11:21:09 -05:00
parent 54d4d2cca2
commit 968f48c55a
12 changed files with 54 additions and 4 deletions
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -37,6 +37,7 @@ export const VideoSourceWidget = ({
    videoSource: source,
    fallbackVideos,
    allowVideoDownloads: allowDownload,
+    allowVideoSharing: allowSharing,
  } = widgetHooks.widgetValues({
    dispatch,
    fields: {
@@ -44,6 +45,7 @@ export const VideoSourceWidget = ({
      [widgetHooks.selectorKeys.videoId]: widgetHooks.genericWidget,
      [widgetHooks.selectorKeys.fallbackVideos]: widgetHooks.arrayWidget,
      [widgetHooks.selectorKeys.allowVideoDownloads]: widgetHooks.genericWidget,
+      [widgetHooks.selectorKeys.allowVideoSharing]: widgetHooks.genericWidget,
    },
  });
  const { updateVideoId, updateVideoURL } = hooks.sourceHooks({ dispatch });
@@ -118,13 +120,33 @@ export const VideoSourceWidget = ({
            placement="top"
            overlay={(
              <Tooltip id="tooltip-top">
-                <FormattedMessage {...messages.tooltipMessage} />
+                <FormattedMessage {...messages.allowDownloadTooltipMessage} />
              </Tooltip>
            )}
          >
            <Icon src={InfoOutline} style={{ height: '16px', width: '16px' }} />
          </OverlayTrigger>
          <ActionRow.Spacer />
+          <Form.Checkbox
+            checked={allowSharing.local}
+            className="decorative-control-label"
+            onChange={allowSharing.onCheckedChange}
+          >
+            <div className="small text-gray-700">
+              <FormattedMessage {...messages.allowVideoSharingCheckboxLabel} />
+            </div>
+          </Form.Checkbox>
+          <OverlayTrigger
+            key="top-allow-sharing"
+            placement="top"
+            overlay={(
+              <Tooltip id="tooltip-top-allow-sharing">
+                <FormattedMessage {...messages.allowVideoSharingTooltipMessage} />
+              </Tooltip>
+            )}
+          >
+            <Icon src={InfoOutline} style={{ height: '16px', width: '16px' }} />
+          </OverlayTrigger>
        </ActionRow>
      </Form.Group>
      <div className="my-4 border-primary-100 border-bottom" />
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
@@ -27,6 +27,7 @@ jest.mock('../hooks', () => ({
      local: '',
    },
    allowVideoDownloads: { local: false, onCheckedChange: jest.fn() },
+    allowVideoSharing: { local: false, onCheckedChange: jest.fn() },
  }),
 }));

--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/messages.js
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/messages.js
@@ -53,15 +53,28 @@ export const messages = {
    defaultMessage: 'Allow video downloads',
    description: 'Label for allow video downloads checkbox',
  },
-  tooltipMessage: {
-    id: 'authoring.videoeditor.videoSource.fallbackVideo.allowDownloadTooltipMessage',
+  allowDownloadTooltipMessage: {
+    id: 'authoring.videoeditor.videoSource.allowDownloadTooltipMessage',
    defaultMessage: `Allow learners to download versions of this video in
    different formats if they cannot use the edX video player or do not have
    access to YouTube.`,
    description: 'Message for allow video downloads checkbox',
  },
+  allowVideoSharingCheckboxLabel: {
+    id: 'authoring.videoeditor.videoSource.allowVideoSharingCheckboxLabel',
+    defaultMessage: 'Allow this video to be shared on social media.',
+    description: 'Label for allow shareable video checkbox',
+  },
+  allowVideoSharingTooltipMessage: {
+    id: 'authoring.videoeditor.videoSource.allowVideoSharingTooltipMessage',
+    defaultMessage: `Allow learners to share this video publicly on social media.
+    The video will be viewable by anyone, they will not need to enroll in the course
+    or even have an edX account. Links to the course about page and to enroll in the 
+    course will appear alongside the video.`,
+    description: 'Message for allow shareable video checkbox',
+  },
  addButtonLabel: {
-    id: 'authoring.videoeditor.videoSource.fallbackVideo.allowDownloadTooltipMessage',
+    id: 'authoring.videoeditor.videoSource.fallbackVideo.addButtonLabel',
    defaultMessage: 'Add a video URL',
    description: 'Label for add a video URL button',
  },
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.js
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.js
@@ -23,6 +23,7 @@ export const state = StrictDict(
    selectorKeys.videoId,
    selectorKeys.fallbackVideos,
    selectorKeys.allowVideoDownloads,
+    selectorKeys.allowVideoSharing,

    selectorKeys.thumbnail,

--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.test.js
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.test.js
@@ -35,6 +35,7 @@ jest.mock('../../../../../data/redux', () => ({
      videoSource: (state) => ({ videoSource: state }),
      fallbackVideos: (state) => ({ fallbackVideos: state }),
      allowVideoDownloads: (state) => ({ allowVideoDownloads: state }),
+      allowVideoSharing: (state) => ({ allowVideoSharing: state }),
      thumbnail: (state) => ({ thumbnail: state }),
      transcripts: (state) => ({ transcripts: state }),
      allowTranscriptDownloads: (state) => ({ allowTranscriptDownloads: state }),
--- a/src/editors/data/redux/thunkActions/video.js
+++ b/src/editors/data/redux/thunkActions/video.js
@@ -31,6 +31,7 @@ export const loadVideoData = () => (dispatch, getState) => {
    videoId,
    fallbackVideos,
    allowVideoDownloads: rawVideoData.download_video,
+    allowVideoSharing: rawVideoData.public_access,
    transcripts,
    allowTranscriptDownloads: rawVideoData.download_track,
    showTranscriptByDefault: rawVideoData.show_captions,
--- a/src/editors/data/redux/video/reducer.js
+++ b/src/editors/data/redux/video/reducer.js
@@ -10,6 +10,7 @@ const initialState = {
    '',
  ],
  allowVideoDownloads: false,
+  allowVideoSharing: false,
  thumbnail: null,
  transcripts: [],
  allowTranscriptDownloads: false,
--- a/src/editors/data/redux/video/selectors.js
+++ b/src/editors/data/redux/video/selectors.js
@@ -17,6 +17,7 @@ export const simpleSelectors = [
  stateKeys.videoId,
  stateKeys.fallbackVideos,
  stateKeys.allowVideoDownloads,
+  stateKeys.allowVideoSharing,
  stateKeys.thumbnail,
  stateKeys.transcripts,
  stateKeys.allowTranscriptDownloads,
@@ -67,6 +68,7 @@ export const videoSettings = createSelector(
    module.simpleSelectors.videoId,
    module.simpleSelectors.fallbackVideos,
    module.simpleSelectors.allowVideoDownloads,
+    module.simpleSelectors.allowVideoSharing,
    module.simpleSelectors.thumbnail,
    module.simpleSelectors.transcripts,
    module.simpleSelectors.allowTranscriptDownloads,
@@ -81,6 +83,7 @@ export const videoSettings = createSelector(
    videoId,
    fallbackVideos,
    allowVideoDownloads,
+    allowVideoSharing,
    thumbnail,
    transcripts,
    allowTranscriptDownloads,
@@ -95,6 +98,7 @@ export const videoSettings = createSelector(
      videoId,
      fallbackVideos,
      allowVideoDownloads,
+      allowVideoSharing,
      thumbnail,
      transcripts,
      allowTranscriptDownloads,
--- a/src/editors/data/services/cms/api.js
+++ b/src/editors/data/services/cms/api.js
@@ -168,6 +168,7 @@ export const apiMethods = {
        metadata: {
          display_name: title,
          download_video: content.allowVideoDownloads,
+          public_access: content.allowVideoSharing,
          edx_video_id: edxVideoId,
          html5_sources: html5Sources,
          youtube_id_1_0: youtubeId,
--- a/src/editors/data/services/cms/api.test.js
+++ b/src/editors/data/services/cms/api.test.js
@@ -95,6 +95,7 @@ describe('cms api', () => {
          videoSource: 'viDeOSouRCE',
          fallbackVideos: 'FalLBacKVidEOs',
          allowVideoDownloads: 'alLOwViDeodownLOads',
+          allowVideoSharing: 'alloWviDeOshArinG',
          thumbnail: 'THUmbNaIL',
          transcripts: 'traNScRiPts',
          allowTranscriptDownloads: 'aLloWTRaNScriPtdoWnlOADS',
@@ -131,6 +132,7 @@ describe('cms api', () => {
          metadata: {
            display_name: title,
            download_video: content.allowVideoDownloads,
+            public_access: content.allowVideoSharing,
            edx_video_id: edxVideoId,
            html5_sources: html5Sources,
            youtube_id_1_0: youtubeId,
--- a/src/editors/data/services/cms/mockVideoData.js
+++ b/src/editors/data/services/cms/mockVideoData.js
@@ -6,6 +6,7 @@ export const videoDataProps = {
  videoId: PropTypes.string,
  fallbackVideos: PropTypes.arrayOf(PropTypes.string),
  allowVideoDownloads: PropTypes.bool,
+  allowVideoSharing: PropTypes.bool,
  thumbnail: PropTypes.string,
  transcripts: PropTypes.objectOf(PropTypes.string),
  allowTranscriptDownloads: PropTypes.bool,
@@ -33,6 +34,7 @@ export const singleVideoData = {
    'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
  ],
  allowVideoDownloads: true,
+  allowVideoSharing: true,
  thumbnail: 'someString', // filename
  transcripts: {
    en: { filename: 'my-transcript-url' },
--- a/src/editors/data/services/cms/types.js
+++ b/src/editors/data/services/cms/types.js
@@ -6,6 +6,7 @@ export const videoDataProps = {
  videoId: PropTypes.string,
  fallbackVideos: PropTypes.arrayOf(PropTypes.string),
  allowVideoDownloads: PropTypes.bool,
+  allowVideoSharing: PropTypes.bool,
  thumbnail: PropTypes.string,
  transcripts: PropTypes.objectOf(PropTypes.string),
  allowTranscriptDownloads: PropTypes.bool,