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.

Sign up for GitHub

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

fix: video status badge translation #438

Merged
merged 1 commit into from
May 13, 2024
Merged

fix: video status badge translation #438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This guide presumes you have a functioning devstack.

1. Enable Studio to use an editor for your xblock using waffle flags
1. Add the string name of your editor e.g. `html` to the flag check in the [edx-platform repo.](https://github.com/openedx/edx-platform/blob/369e5af85ab58c51a4bf4baf249d5cb36c1961fe/cms/static/js/views/pages/container.js#L190)
2. In devstack + venv, run `$ make dev.provision.lms+studio+frontend-app-course-authoring` to make up the required services. Minimum services required are lms, studio and frontend-app-course-authoring.
2. In devstack + venv, run `$ make dev.provision.lms+cms+frontend-app-course-authoring` to make up the required services. Minimum services required are lms, studio and frontend-app-course-authoring.
4. In [Studio Django Admin](http://localhost:18000/admin/waffle/flag/) turn on `new_core_editors.use_new_text_editor` flag for HTML editor, `new_core_editors.use_new_video_editor` flag for new video editor, and `new_core_editors.use_new_problem_editor` flag for problems. The list of supported flags is in [toggles.py. ](https://github.com/openedx/edx-platform/blob/master/cms/djangoapps/contentstore/toggles.py). you might have to add a flag for your xblock of choice.
2. Clone this repo into the [`${DEVSTACK_WORKSPACE}/src` directory](https://edx.readthedocs.io/projects/open-edx-devstack/en/latest/readme.html?highlight=DEVSTACK_WORKSPACE#id9) the sibling repo of your edx devstack `/src`.
3. In the course authoring app, follow the guide to use your [local verison of frontend-lib-content-components. ](https://github.com/openedx/frontend-build#local-module-configuration-for-webpack) The module.config.js in the frontend-app-course-authoring repo will be:
Expand Down
10 changes: 5 additions & 5 deletions src/editors/containers/VideoGallery/hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,6 @@ export const filterListByStatus = ({ statusFilter, videoList }) => {
if (statusFilter === filterKeys.anyStatus) {
return videoList;
}
// TODO deal with translation mismatch because the video status is
// already translated in the backend
return videoList.filter(({ status }) => filterKeys[statusFilter] === status);
};

Expand Down Expand Up @@ -166,8 +164,9 @@ export const buildVideos = ({ rawVideos }) => {
dateAdded: new Date(video.created),
locked: false,
thumbnail: video.course_video_image_url,
status: video.status,
statusBadgeVariant: module.getstatusBadgeVariant({ status: video.status }),
status: video.status_nontranslated,
statusBadgeVariant: module.getstatusBadgeVariant({ status: video.status_nontranslated }),
statusMessage: module.getStatusMessage({ status: video.status_nontranslated }),
duration: video.duration,
transcripts: video.transcripts,
}));
Expand All @@ -177,7 +176,6 @@ export const buildVideos = ({ rawVideos }) => {

export const getstatusBadgeVariant = ({ status }) => {
switch (status) {
// TODO deal with translation mismatch
case filterKeys.failed:
return 'danger';
case filterKeys.uploading:
Expand All @@ -188,6 +186,8 @@ export const getstatusBadgeVariant = ({ status }) => {
}
};

export const getStatusMessage = ({ status }) => Object.values(filterMessages).find((m) => m.defaultMessage === status);

export const useVideoProps = ({ videos }) => {
const searchSortProps = useSearchAndSortProps();
const videoList = useVideoListProps({
Expand Down
6 changes: 5 additions & 1 deletion src/editors/containers/VideoGallery/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const initialVideos = [
course_video_image_url: 'course_video_image_url_1',
created: '2022-09-07T04:56:58.726Z',
status: 'Uploading',
status_nontranslated: 'Uploading',
duration: 3,
transcripts: [],
},
Expand All @@ -31,6 +32,7 @@ const initialVideos = [
course_video_image_url: 'course_video_image_url_2',
created: '2022-11-07T04:56:58.726Z',
status: 'In Progress',
status_nontranslated: 'In Progress',
duration: 2,
transcripts: [],
}, {
Expand All @@ -39,6 +41,7 @@ const initialVideos = [
course_video_image_url: 'course_video_image_url_3',
created: '2022-01-07T04:56:58.726Z',
status: 'Ready',
status_nontranslated: 'Ready',
duration: 4,
transcripts: [],
},
Expand Down Expand Up @@ -146,7 +149,7 @@ describe('VideoGallery', () => {
});
it.each([
['Uploading', 1, [1]],
['Processing', 1, [2]],
['In Progress', 1, [2]],
['Ready', 1, [3]],
['Failed', 1, [4]],
])('videos can be filtered by status %s', async (filterBy, length, items) => {
Expand All @@ -158,6 +161,7 @@ describe('VideoGallery', () => {
course_video_image_url: 'course_video_image_url_4',
created: '2022-01-07T04:56:58.726Z',
status: 'Failed',
status_nontranslated: 'Failed',
duration: 4,
transcripts: [],
}],
Expand Down
34 changes: 17 additions & 17 deletions src/editors/containers/VideoGallery/messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,31 +54,31 @@ export const messages = {
description: 'Dropdown label for sorting by duration (longest)',
},

// Filter Dropdown
filterByVideoStatusAny: {
id: 'authoring.selectvideomodal.filter.videostatusnone.label',
// Video status labels
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that it is a bit more generic now 👍, as it can be reused in other places. However, I still see it only being used in filterMessages. So, I am curious about the motivation behind this change.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is used in the status badge display.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah! Cool. :)

videoStatusAny: {
id: 'authoring.selectvideomodal.videostatusnone.label',
defaultMessage: 'Any status',
description: 'Dropdown label for no filter (any status)',
description: 'Label for video status (any status)',
},
filterByVideoStatusUploading: {
id: 'authoring.selectvideomodal.filter.videostatusuploading.label',
videoStatusUploading: {
id: 'authoring.selectvideomodal.videostatusuploading.label',
defaultMessage: 'Uploading',
description: 'Dropdown label for filter by video status (uploading)',
description: 'Label for video status (uploading)',
},
filterByVideoStatusProcessing: {
id: 'authoring.selectvideomodal.filter.videostatusprocessing.label',
defaultMessage: 'Processing',
description: 'Dropdown label for filter by video status (processing)',
videoStatusProcessing: {
id: 'authoring.selectvideomodal.videostatusprocessing.label',
defaultMessage: 'In Progress',
description: 'Label for video status (processing)',
},
filterByVideoStatusReady: {
id: 'authoring.selectvideomodal.filter.videostatusready.label',
videoStatusReady: {
id: 'authoring.selectvideomodal.videostatusready.label',
defaultMessage: 'Ready',
description: 'Dropdown label for filter by video status (ready)',
description: 'Label for video status (ready)',
},
filterByVideoStatusFailed: {
id: 'authoring.selectvideomodal.filter.videostatusfailed.label',
videoStatusFailed: {
id: 'authoring.selectvideomodal.videostatusfailed.label',
defaultMessage: 'Failed',
description: 'Dropdown label for filter by video status (failed)',
description: 'Label for video status (failed)',
},

// Hide switch
Expand Down
10 changes: 5 additions & 5 deletions src/editors/containers/VideoGallery/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ export const filterKeys = StrictDict({
});

export const filterMessages = StrictDict({
anyStatus: messages[messageKeys.filterByVideoStatusAny],
uploading: messages[messageKeys.filterByVideoStatusUploading],
processing: messages[messageKeys.filterByVideoStatusProcessing],
ready: messages[messageKeys.filterByVideoStatusReady],
failed: messages[messageKeys.filterByVideoStatusFailed],
anyStatus: messages[messageKeys.videoStatusAny],
uploading: messages[messageKeys.videoStatusUploading],
processing: messages[messageKeys.videoStatusProcessing],
ready: messages[messageKeys.videoStatusReady],
failed: messages[messageKeys.videoStatusFailed],
});

export const sortFunctions = StrictDict({
Expand Down
5 changes: 3 additions & 2 deletions src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ export const GalleryCard = ({
onError={thumbnailFallback && (() => setThumbnailError(true))}
/>
)}
{ asset.status && asset.statusBadgeVariant && (
{ asset.statusMessage && asset.statusBadgeVariant && (
<Badge variant={asset.statusBadgeVariant} style={{ position: 'absolute', left: '6px', top: '6px' }}>
{asset.status}
<FormattedMessage {...asset.statusMessage} />
</Badge>
)}
{ asset.duration >= 0 && (
Expand Down Expand Up @@ -103,6 +103,7 @@ GalleryCard.propTypes = {
url: PropTypes.string,
duration: PropTypes.number,
status: PropTypes.string,
statusMessage: PropTypes.objectOf(PropTypes.string),
statusBadgeVariant: PropTypes.string,
transcripts: PropTypes.arrayOf(PropTypes.string),
}).isRequired,
Expand Down
12 changes: 0 additions & 12 deletions src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,18 +216,6 @@ exports[`GalleryCard component snapshot with status badge 1`] = `
}
}
/>
<Badge
style={
Object {
"left": "6px",
"position": "absolute",
"top": "6px",
}
}
variant="danger"
>
failed
</Badge>
</div>
<div
className="card-text px-3 py-2"
Expand Down
Loading