Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: remove thumbnail for non-edX videos & allow removing fallback URLs #505

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,46 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnail uploads are allowed 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
isError={true}
subtitle="Unavailable"
title="Thumbnail"
>
<ErrorAlert
dismissError={[Function]}
hideHeading={true}
isError={false}
>
<FormattedMessage
defaultMessage="The file size for thumbnails must be larger than 2 KB or less than 2 MB. Please resize your image and try again."
description=" Message presented to user when file size of image is less than 2 KB or larger than 2 MB"
id="authoring.videoeditor.thumbnail.error.fileSizeError"
/>
</ErrorAlert>
<Alert
variant="light"
>
<FormattedMessage
defaultMessage="Select a video from your library to enable this feature (applies only to courses that run on the edx.org site)."
description="Message for unavailable thumbnail widget"
id="authoring.videoeditor.thumbnail.unavailable.message"
/>
</Alert>
<Stack
direction="horizontal"
gap={3}
>
<Image
alt="Image used as thumbnail for video"
className="w-75"
fluid={true}
src="sOMeUrl"
thumbnail={true}
/>
</Stack>
</injectIntl(ShimmedIntlComponent)>
`;
exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnail uploads are allowed 1`] = `null`;

exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoId is valid 1`] = `
<injectIntl(ShimmedIntlComponent)
Expand Down Expand Up @@ -123,10 +83,10 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoId
<FileInput
acceptedFiles=".gif,.jpg,.jpeg,.png,.bmp,.bmp2"
fileInput={
{
Object {
"addFile": [Function],
"click": [Function],
"ref": {
"ref": Object {
"current": undefined,
},
}
Expand Down Expand Up @@ -191,81 +151,6 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with a thumbna
</injectIntl(ShimmedIntlComponent)>
`;

exports[`ThumbnailWidget snapshots snapshots: renders as expected with default props 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
isError={true}
subtitle="Unavailable"
title="Thumbnail"
>
<ErrorAlert
dismissError={[Function]}
hideHeading={true}
isError={false}
>
<FormattedMessage
defaultMessage="The file size for thumbnails must be larger than 2 KB or less than 2 MB. Please resize your image and try again."
description=" Message presented to user when file size of image is less than 2 KB or larger than 2 MB"
id="authoring.videoeditor.thumbnail.error.fileSizeError"
/>
</ErrorAlert>
<Alert
variant="light"
>
<FormattedMessage
defaultMessage="Select a video from your library to enable this feature (applies only to courses that run on the edx.org site)."
description="Message for unavailable thumbnail widget"
id="authoring.videoeditor.thumbnail.unavailable.message"
/>
</Alert>
<Stack
gap={4}
>
<div
className="text-center"
>
<FormattedMessage
defaultMessage="Upload an image for learners to see before playing the video."
description="Message for adding thumbnail"
id="authoring.videoeditor.thumbnail.upload.message"
/>
<div
className="text-primary-300"
>
<FormattedMessage
defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
description="Message for thumbnail aspectRequirements"
id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
/>
</div>
</div>
<FileInput
acceptedFiles=".gif,.jpg,.jpeg,.png,.bmp,.bmp2"
fileInput={
{
"addFile": [Function],
"click": [Function],
"ref": {
"current": undefined,
},
}
}
/>
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
disabled={true}
onClick={[Function]}
size="sm"
variant="link"
>
<FormattedMessage
defaultMessage="Upload thumbnail"
description="Label for upload button"
id="authoring.videoeditor.thumbnail.upload.label"
/>
</Button>
</Stack>
</injectIntl(ShimmedIntlComponent)>
`;
exports[`ThumbnailWidget snapshots snapshots: renders as expected with default props 1`] = `null`;

exports[`ThumbnailWidget snapshots snapshots: renders as expected with isLibrary true 1`] = `null`;
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const ThumbnailWidget = ({
}
return intl.formatMessage(messages.unavailableSubtitle);
};
return (!isLibrary ? (
return (!isLibrary && edxVideo ? (
<CollapsibleFormWidget
fontSize="x-small"
isError={Object.keys(error).length !== 0}
Expand All @@ -75,7 +75,7 @@ export const ThumbnailWidget = ({
>
<FormattedMessage {...messages.fileSizeError} />
</ErrorAlert>
{(allowThumbnailUpload && edxVideo) ? null : (
{allowThumbnailUpload ? null : (
<Alert variant="light">
<FormattedMessage {...messages.unavailableMessage} />
</Alert>
Expand All @@ -90,7 +90,7 @@ export const ThumbnailWidget = ({
src={thumbnailSrc || thumbnail}
alt={intl.formatMessage(messages.thumbnailAltText)}
/>
{(allowThumbnailUpload && edxVideo) ? (
{allowThumbnailUpload ? (
<IconButtonWithTooltip
tooltipPlacement="top"
tooltipContent={intl.formatMessage(messages.deleteThumbnail)}
Expand All @@ -115,7 +115,7 @@ export const ThumbnailWidget = ({
iconBefore={FileUpload}
onClick={fileInput.click}
variant="link"
disabled={!(allowThumbnailUpload && edxVideo)}
disabled={!allowThumbnailUpload}
>
<FormattedMessage {...messages.uploadButtonLabel} />
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const sourceHooks = ({ dispatch, previousVideoId, setAlert }) => ({
export const fallbackHooks = ({ fallbackVideos, dispatch }) => ({
addFallbackVideo: () => dispatch(actions.video.updateField({ fallbackVideos: [...fallbackVideos, ''] })),
deleteFallbackVideo: (videoUrl) => {
const updatedFallbackVideos = fallbackVideos.splice(fallbackVideos.indexOf(videoUrl), 1);
const updatedFallbackVideos = fallbackVideos.toSpliced(fallbackVideos.indexOf(videoUrl), 1);
dispatch(actions.video.updateField({ fallbackVideos: updatedFallbackVideos }));
},
});
Expand Down