feat: add social share widget (#323)
This commit is contained in:
@@ -8,8 +8,9 @@ import { parseYoutubeId } from '../../services/cms/api';
|
||||
|
||||
export const loadVideoData = () => (dispatch, getState) => {
|
||||
const state = getState();
|
||||
const rawVideoData = state.app.blockValue.data.metadata ? state.app.blockValue.data.metadata : {};
|
||||
const courseLicenseData = state.app.courseDetails.data ? state.app.courseDetails.data : {};
|
||||
const blockValueData = state.app.blockValue.data;
|
||||
const rawVideoData = blockValueData.metadata ? blockValueData.metadata : {};
|
||||
const courseData = state.app.courseDetails.data ? state.app.courseDetails.data : {};
|
||||
const studioView = state.app.studioView?.data?.html;
|
||||
const {
|
||||
videoId,
|
||||
@@ -23,16 +24,21 @@ export const loadVideoData = () => (dispatch, getState) => {
|
||||
const [licenseType, licenseOptions] = module.parseLicense({ licenseData: studioView, level: 'block' });
|
||||
const transcripts = module.parseTranscripts({ transcriptsData: studioView });
|
||||
const [courseLicenseType, courseLicenseDetails] = module.parseLicense({
|
||||
licenseData: courseLicenseData.license,
|
||||
licenseData: courseData.license,
|
||||
level: 'course',
|
||||
});
|
||||
|
||||
const allowVideoSharing = module.parseVideoSharingSetting({
|
||||
courseSetting: blockValueData?.video_sharing_options,
|
||||
blockSetting: rawVideoData.public_access,
|
||||
});
|
||||
dispatch(actions.video.load({
|
||||
videoSource: videoUrl || '',
|
||||
videoId,
|
||||
fallbackVideos,
|
||||
allowVideoDownloads: rawVideoData.download_video,
|
||||
allowVideoSharing: rawVideoData.public_access,
|
||||
allowVideoSharing,
|
||||
videoSharingLearnMoreLink: blockValueData?.video_sharing_doc_url,
|
||||
videoSharingEnabledForCourse: blockValueData?.video_sharing_enabled,
|
||||
transcripts,
|
||||
allowTranscriptDownloads: rawVideoData.download_track,
|
||||
showTranscriptByDefault: rawVideoData.show_captions,
|
||||
@@ -61,7 +67,6 @@ export const loadVideoData = () => (dispatch, getState) => {
|
||||
dispatch(requests.fetchVideoFeatures({
|
||||
onSuccess: (response) => dispatch(actions.video.updateField({
|
||||
allowThumbnailUpload: response.data.allowThumbnailUpload,
|
||||
videoSharingEnabledForCourse: response.data.videoSharingEnabled,
|
||||
})),
|
||||
}));
|
||||
const youTubeId = parseYoutubeId(videoUrl);
|
||||
@@ -100,6 +105,19 @@ export const determineVideoSources = ({
|
||||
};
|
||||
};
|
||||
|
||||
export const parseVideoSharingSetting = ({ courseSetting, blockSetting }) => {
|
||||
switch (courseSetting) {
|
||||
case 'all-on':
|
||||
return { level: 'course', value: true };
|
||||
case 'all-off':
|
||||
return { level: 'course', value: false };
|
||||
case 'per-video':
|
||||
return { level: 'block', value: blockSetting };
|
||||
default:
|
||||
return { level: 'block', value: blockSetting };
|
||||
}
|
||||
};
|
||||
|
||||
export const parseTranscripts = ({ transcriptsData }) => {
|
||||
if (!transcriptsData) {
|
||||
return [];
|
||||
|
||||
@@ -53,7 +53,6 @@ const mockAllowTranscriptImport = { data: { command: 'import' } };
|
||||
const mockVideoFeatures = {
|
||||
data: {
|
||||
allowThumbnailUpload: 'soMEbOolEAn',
|
||||
videoSharingEnabled: 'someBOoOoOlean',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -70,6 +69,10 @@ const testMetadata = {
|
||||
transcripts: ['do', 're', 'mi'],
|
||||
thumbnail: 'thuMBNaIl',
|
||||
};
|
||||
const videoSharingData = {
|
||||
video_sharing_doc_url: 'SomEUrL.Com',
|
||||
video_sharing_options: 'OpTIOns',
|
||||
};
|
||||
const testState = {
|
||||
transcripts: ['la'],
|
||||
thumbnail: 'sOMefILE',
|
||||
@@ -92,7 +95,7 @@ describe('video thunkActions', () => {
|
||||
getState = jest.fn(() => ({
|
||||
app: {
|
||||
blockId: 'soMEBloCk',
|
||||
blockValue: { data: { metadata: { ...testMetadata } } },
|
||||
blockValue: { data: { metadata: { ...testMetadata }, ...videoSharingData } },
|
||||
studioEndpointUrl: 'soMEeNDPoiNT',
|
||||
courseDetails: { data: { license: null } },
|
||||
studioView: { data: { html: 'sOMeHTml' } },
|
||||
@@ -110,6 +113,10 @@ describe('video thunkActions', () => {
|
||||
videoId: 'videOiD',
|
||||
fallbackVideos: 'fALLbACKvIDeos',
|
||||
});
|
||||
jest.spyOn(thunkActions, thunkActionsKeys.parseVideoSharingSetting).mockReturnValue({
|
||||
level: 'course',
|
||||
value: true,
|
||||
});
|
||||
jest.spyOn(thunkActions, thunkActionsKeys.parseLicense).mockReturnValue([
|
||||
'liCENSEtyPe',
|
||||
{
|
||||
@@ -146,6 +153,12 @@ describe('video thunkActions', () => {
|
||||
videoId: 'videOiD',
|
||||
fallbackVideos: 'fALLbACKvIDeos',
|
||||
allowVideoDownloads: testMetadata.download_video,
|
||||
allowVideoSharing: {
|
||||
level: 'course',
|
||||
value: true,
|
||||
},
|
||||
videoSharingLearnMoreLink: videoSharingData.video_sharing_doc_url,
|
||||
videoSharingEnableForCourse: videoSharingData.video_sharing_enabled,
|
||||
transcripts: testMetadata.transcripts,
|
||||
allowTranscriptDownloads: testMetadata.download_track,
|
||||
showTranscriptByDefault: testMetadata.show_captions,
|
||||
@@ -177,10 +190,8 @@ describe('video thunkActions', () => {
|
||||
dispatchedAction1.fetchVideoFeatures.onSuccess(mockVideoFeatures);
|
||||
expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({
|
||||
allowThumbnailUpload: mockVideoFeatures.data.allowThumbnailUpload,
|
||||
videoSharingEnabledForCourse: mockVideoFeatures.data.videoSharingEnabled,
|
||||
}));
|
||||
dispatch.mockClear();
|
||||
|
||||
dispatchedAction2.checkTranscriptsForImport.onSuccess(mockAllowTranscriptImport);
|
||||
expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({
|
||||
allowTranscriptImport: true,
|
||||
@@ -349,6 +360,55 @@ describe('video thunkActions', () => {
|
||||
]);
|
||||
});
|
||||
});
|
||||
describe('parseVideoShareSetting', () => {
|
||||
describe('has no course setting or block setting for video sharing', () => {
|
||||
it('should return an object with level equal to block and value equal to null', () => {
|
||||
const videoSharingSetting = thunkActions.parseVideoSharingSetting({
|
||||
courseSetting: null,
|
||||
blockSetting: null,
|
||||
});
|
||||
expect(videoSharingSetting).toEqual({ level: 'block', value: null });
|
||||
});
|
||||
});
|
||||
describe('has no course setting and block setting defined for video sharing', () => {
|
||||
it('should return an object with level equal to block and value equal to true', () => {
|
||||
const videoSharingSetting = thunkActions.parseVideoSharingSetting({
|
||||
courseSetting: null,
|
||||
blockSetting: true,
|
||||
});
|
||||
expect(videoSharingSetting).toEqual({ level: 'block', value: true });
|
||||
});
|
||||
});
|
||||
describe('has course setting defined for video sharing', () => {
|
||||
describe('course setting equals all-on', () => {
|
||||
it('should return an object with level equal to course and value equal to true', () => {
|
||||
const videoSharingSetting = thunkActions.parseVideoSharingSetting({
|
||||
courseSetting: 'all-on',
|
||||
blockSetting: true,
|
||||
});
|
||||
expect(videoSharingSetting).toEqual({ level: 'course', value: true });
|
||||
});
|
||||
});
|
||||
describe('course setting equals all-off', () => {
|
||||
it('should return an object with level equal to course and value equal to false', () => {
|
||||
const videoSharingSetting = thunkActions.parseVideoSharingSetting({
|
||||
courseSetting: 'all-off',
|
||||
blockSetting: true,
|
||||
});
|
||||
expect(videoSharingSetting).toEqual({ level: 'course', value: false });
|
||||
});
|
||||
});
|
||||
describe('course setting equals per-video', () => {
|
||||
it('should return an object with level equal to block and value equal to block setting', () => {
|
||||
const videoSharingSetting = thunkActions.parseVideoSharingSetting({
|
||||
courseSetting: 'per-video',
|
||||
blockSetting: false,
|
||||
});
|
||||
expect(videoSharingSetting).toEqual({ level: 'block', value: false });
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('uploadHandout', () => {
|
||||
beforeEach(() => {
|
||||
thunkActions.uploadHandout({ file: mockFilename })(dispatch);
|
||||
|
||||
@@ -10,8 +10,12 @@ const initialState = {
|
||||
'',
|
||||
],
|
||||
allowVideoDownloads: false,
|
||||
allowVideoSharing: false,
|
||||
allowVideoSharing: {
|
||||
level: 'block',
|
||||
value: false,
|
||||
},
|
||||
videoSharingEnabledForCourse: false,
|
||||
videoSharingLearnMoreLink: '',
|
||||
thumbnail: null,
|
||||
transcripts: [],
|
||||
allowTranscriptDownloads: false,
|
||||
|
||||
@@ -18,6 +18,7 @@ export const simpleSelectors = [
|
||||
stateKeys.fallbackVideos,
|
||||
stateKeys.allowVideoDownloads,
|
||||
stateKeys.videoSharingEnabledForCourse,
|
||||
stateKeys.videoSharingLearnMoreLink,
|
||||
stateKeys.allowVideoSharing,
|
||||
stateKeys.thumbnail,
|
||||
stateKeys.transcripts,
|
||||
|
||||
@@ -166,7 +166,7 @@ export const apiMethods = {
|
||||
metadata: {
|
||||
display_name: title,
|
||||
download_video: content.allowVideoDownloads,
|
||||
public_access: content.allowVideoSharing,
|
||||
public_access: content.allowVideoSharing.value,
|
||||
edx_video_id: edxVideoId,
|
||||
html5_sources: html5Sources,
|
||||
youtube_id_1_0: youtubeId,
|
||||
|
||||
@@ -125,7 +125,10 @@ describe('cms api', () => {
|
||||
videoSource: 'viDeOSouRCE',
|
||||
fallbackVideos: 'FalLBacKVidEOs',
|
||||
allowVideoDownloads: 'alLOwViDeodownLOads',
|
||||
allowVideoSharing: 'alloWviDeOshArinG',
|
||||
allowVideoSharing: {
|
||||
level: 'sOMeStRInG',
|
||||
value: 'alloWviDeOshArinG',
|
||||
},
|
||||
thumbnail: 'THUmbNaIL',
|
||||
transcripts: 'traNScRiPts',
|
||||
allowTranscriptDownloads: 'aLloWTRaNScriPtdoWnlOADS',
|
||||
@@ -162,7 +165,7 @@ describe('cms api', () => {
|
||||
metadata: {
|
||||
display_name: title,
|
||||
download_video: content.allowVideoDownloads,
|
||||
public_access: content.allowVideoSharing,
|
||||
public_access: content.allowVideoSharing.value,
|
||||
edx_video_id: edxVideoId,
|
||||
html5_sources: html5Sources,
|
||||
youtube_id_1_0: youtubeId,
|
||||
|
||||
Reference in New Issue
Block a user