From b20b7ef59ded51379ce63228b43a41a362db0b93 Mon Sep 17 00:00:00 2001 From: "EVOFORGE\\dimay" Date: Wed, 2 Aug 2023 08:09:39 -0400 Subject: [PATCH] #2336: handled videos without duration on client display --- .../userSkills/skill/progress/SkillVideo.vue | 12 +++++++--- ...client_display_video_on_skill_page_spec.js | 12 +++++----- ...ient_display_video_on_subject_page_spec.js | 10 ++++---- .../handle_video_without_duration_spec.js | 23 +++++++++++++++++++ e2e-tests/cypress/support/commands.js | 12 +++++++++- 5 files changed, 54 insertions(+), 15 deletions(-) diff --git a/client-display/src/userSkills/skill/progress/SkillVideo.vue b/client-display/src/userSkills/skill/progress/SkillVideo.vue index 3940b68749..8161eccdf5 100644 --- a/client-display/src/userSkills/skill/progress/SkillVideo.vue +++ b/client-display/src/userSkills/skill/progress/SkillVideo.vue @@ -48,7 +48,7 @@ limitations under the License.
- Earn {{ skill.totalPoints }} for the {{ skillDisplayName.toLowerCase() }} by watching this Video. + Earn {{ skill.totalPoints }} points for the {{ skillDisplayName.toLowerCase() }} by watching this Video.
Congrats! You just earned View Transcript - + - Watched: {{ percentWatched }}% + Watched: {{ percentWatched }}%
@@ -148,10 +148,16 @@ limitations under the License. loading: false, transcript: '', }, + showPercent: true, + isFirstTime: true, }; }, methods: { updateVideoProgress(watchProgress) { + if (this.isFirstTime && watchProgress.videoDuration === Infinity) { + this.showPercent = false; + } + this.isFirstTime = false; this.percentWatched = watchProgress.percentWatched; if (this.trackAchievement && watchProgress.percentWatched > 96 && !this.justAchieved) { UserSkillsService.reportSkill(this.skill.skillId) diff --git a/e2e-tests/cypress/e2e/video/client_display_video_on_skill_page_spec.js b/e2e-tests/cypress/e2e/video/client_display_video_on_skill_page_spec.js index b6ad21a18f..b0fc7090da 100644 --- a/e2e-tests/cypress/e2e/video/client_display_video_on_skill_page_spec.js +++ b/e2e-tests/cypress/e2e/video/client_display_video_on_skill_page_spec.js @@ -33,7 +33,7 @@ describe('Display Video on Skill Page Tests', () => { cy.wait('@getVideoCaptions').its('response.body').should('include', 'some') cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoPlayer"] [title="Play Video"]') - cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 points for the skill by watching this Video') cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('have.text', 0) cy.get('[data-cy="markdownViewer"]').contains('blah blah') cy.get('[data-cy="viewTranscriptBtn"]').should('be.enabled') @@ -127,7 +127,7 @@ describe('Display Video on Skill Page Tests', () => { cy.cdVisit('/subjects/subj1/skills/skill1'); cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoPlayer"] [title="Play Video"]') cy.get('[data-cy="viewTranscriptBtn"]').should('be.enabled') - cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 points for the skill by watching this Video') cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('have.text', 0) cy.get('[data-cy="breadcrumb-subj1"]').click() @@ -149,7 +149,7 @@ describe('Display Video on Skill Page Tests', () => { cy.cdVisit('/subjects/subj1/skills/skill1'); cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoPlayer"] [title="Play Video"]') cy.get('[data-cy="viewTranscriptBtn"]').should('be.enabled') - cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 points for the skill by watching this Video') cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="viewTranscriptBtn"]') cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('have.text', 0) @@ -212,7 +212,7 @@ describe('Display Video on Skill Page Tests', () => { cy.cdVisit('/subjects/subj1/skills/skill1'); cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoPlayer"] [title="Play Video"]') cy.get('[data-cy="viewTranscriptBtn"]').should('be.enabled') - cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 points for the skill by watching this Video') cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('have.text', 0) cy.get('[data-cy="videoIsLockedMsg"]').should('not.exist') }); @@ -228,10 +228,10 @@ describe('Display Video on Skill Page Tests', () => { cy.cdVisit('/subjects/subj1/skills/skill1'); cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoPlayer"] [title="Play Video"]').click() cy.wait(15000) - cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 points for the skill by watching this Video') cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('have.text', 100) cy.get('[data-cy="skillProgress-ptsOverProgressBard"]').contains('0 / 33 Points') - cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 points for the skill by watching this Video') cy.get('[data-cy="videoError"]').contains('Insufficient project points') }); diff --git a/e2e-tests/cypress/e2e/video/client_display_video_on_subject_page_spec.js b/e2e-tests/cypress/e2e/video/client_display_video_on_subject_page_spec.js index fab608d7cf..d141a3e0f8 100644 --- a/e2e-tests/cypress/e2e/video/client_display_video_on_subject_page_spec.js +++ b/e2e-tests/cypress/e2e/video/client_display_video_on_subject_page_spec.js @@ -58,7 +58,7 @@ describe('Display Video on Subject Page Tests', () => { cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoCollapsed"] [data-cy="expandVideoBtn"]').click() cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoCollapsed"] [data-cy="expandVideoBtn"]').should('not.exist') cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoPlayer"] [title="Play Video"]') - cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 points for the skill by watching this Video') cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('have.text', 0) cy.get('[data-cy="skillVideo-skill1"] [data-cy="viewTranscriptBtn"]').should('be.enabled') @@ -89,7 +89,7 @@ describe('Display Video on Subject Page Tests', () => { cy.get('[data-cy="skillVideo-skill3"] [data-cy="videoCollapsed"] [data-cy="expandVideoBtn"]').click() cy.get('[data-cy="skillVideo-skill3"] [data-cy="videoCollapsed"] [data-cy="expandVideoBtn"]').should('not.exist') cy.get('[data-cy="skillVideo-skill3"] [data-cy="videoPlayer"] [title="Play Video"]') - cy.get('[data-cy="skillVideo-skill3"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill3"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 points for the skill by watching this Video') cy.get('[data-cy="skillVideo-skill3"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('have.text', 0) cy.get('[data-cy="skillVideo-skill3"] [data-cy="viewTranscriptBtn"]').should('not.exist') @@ -126,12 +126,12 @@ describe('Display Video on Subject Page Tests', () => { cy.get('[data-cy="skillVideo-skill2"] [data-cy="videoCollapsed"] [data-cy="expandVideoBtn"]').click() cy.get('[data-cy="skillVideo-skill2"] [data-cy="videoCollapsed"] [data-cy="expandVideoBtn"]').should('not.exist') cy.get('[data-cy="skillVideo-skill2"] [data-cy="videoPlayer"] [title="Play Video"]') - cy.get('[data-cy="skillVideo-skill2"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill2"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 points for the skill by watching this Video') // expand 3rd skill cy.get('[data-cy="skillVideo-skill3"] [data-cy="videoCollapsed"] [data-cy="expandVideoBtn"]').click() cy.get('[data-cy="skillVideo-skill3"] [data-cy="videoPlayer"] [title="Play Video"]') - cy.get('[data-cy="skillVideo-skill3"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill3"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 points for the skill by watching this Video') cy.get('[data-cy="skillVideo-skill3"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('have.text', 0) cy.get('[data-cy="skillVideo-skill3"] [data-cy="viewTranscriptBtn"]').should('not.exist') @@ -143,7 +143,7 @@ describe('Display Video on Subject Page Tests', () => { cy.get('[data-cy="skillProgress_index-1"] [data-cy="skillProgress-ptsOverProgressBard"]').contains('0 / 33 Points') cy.get('[data-cy="skillProgress_index-2"] [data-cy="skillProgress-ptsOverProgressBard"]').contains('33 / 33 Points') cy.get('[data-cy="overallPointsEarnedToday"]').contains('33') - cy.get('[data-cy="skillVideo-skill2"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill2"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 33 points for the skill by watching this Video') cy.wait('@reportSkill3') // 1st is still collapsed diff --git a/e2e-tests/cypress/e2e/video/handle_video_without_duration_spec.js b/e2e-tests/cypress/e2e/video/handle_video_without_duration_spec.js index f815948a41..a15c386975 100644 --- a/e2e-tests/cypress/e2e/video/handle_video_without_duration_spec.js +++ b/e2e-tests/cypress/e2e/video/handle_video_without_duration_spec.js @@ -41,4 +41,27 @@ describe('Handle Video without duration Tests', () => { cy.get('[data-cy="videoPreviewCard"] [data-cy="videoTimeWatched"]').should('have.text', '9 seconds') cy.get('[data-cy="noDurationWarning"]') }); + + it('Skills Display - do not display % for videos without duration', () => { + cy.intercept('POST', '/api/projects/proj1/skills/skill1').as('reportSkill1') + cy.createProject(1) + cy.createSubject(1, 1); + cy.createSkill(1, 1, 1, { numPerformToCompletion : 1 }); + cy.saveVideoAttrs(1, 1, { file: 'create-project-noDuration.webm', transcript: 'another' }) + cy.createSkill(1, 1, 1, { numPerformToCompletion : 1, selfReportingType: 'Video' }); + + cy.cdVisit('/subjects/subj1/skills/skill1'); + cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoPlayer"] [title="Play Video"]') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('Earn 100 points for the skill by watching this Video') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="viewTranscriptBtn"]') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('not.exist') + + cy.get('[data-cy="skillVideo-skill1"] [data-cy="videoPlayer"] [title="Play Video"]').click() + cy.wait(8000) // video is 8 seconds + cy.get('[data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('You just earned 100 points') + cy.get('[data-cy="watchVideoAlert"] [data-cy="viewTranscriptBtn"]') + cy.get('[data-cy="skillProgress-ptsOverProgressBard"]').contains('100 / 100 Points') + cy.get('[data-cy="skillVideo-skill1"] [data-cy="watchVideoAlert"] [data-cy="percentWatched"]').should('not.exist') + cy.wait('@reportSkill1') + }); }); \ No newline at end of file diff --git a/e2e-tests/cypress/support/commands.js b/e2e-tests/cypress/support/commands.js index a4d1e3d851..780faddbed 100644 --- a/e2e-tests/cypress/support/commands.js +++ b/e2e-tests/cypress/support/commands.js @@ -139,7 +139,17 @@ Cypress.Commands.add("saveVideoAttrs", (projNum, skillNum, videoAttrs) => { if (videoAttrs.isAlreadyHosted !== null && videoAttrs.isAlreadyHosted !== undefined) { formData.set('isAlreadyHosted', videoAttrs.isAlreadyHosted); } - cy.request('POST', url, formData); + if (videoAttrs.file) { + const fileType = videoAttrs.file.endsWith('mp4') ? 'video/mp4' : 'video/webm'; + cy.fixture(videoAttrs.file, 'binary') + .then((binaryFile) => { + const blob = Cypress.Blob.binaryStringToBlob(binaryFile, fileType); + formData.set('file', blob, videoAttrs.file); + cy.request('POST', url, formData); + }); + } else { + cy.request('POST', url, formData); + } }); Cypress.Commands.add("addToMyProjects", (projNum) => {