#2336: handled videos without duration on client display

NationalSecurityAgency · Aug 2, 2023 · b20b7ef · b20b7ef
1 parent 6206692
commit b20b7ef
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 15 deletions.
diff --git 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.
           <div class="col-md my-auto" data-cy="watchVideoMsg">
             <div v-if="!justAchieved">
               <i class="fas fa-video font-size-2 mr-1 animate__bounceIn" aria-hidden="true"></i>
-              Earn <b>{{ skill.totalPoints }}</b> for the  {{ skillDisplayName.toLowerCase() }} by watching this Video.
+              Earn <b>{{ skill.totalPoints }}</b> points for the  {{ skillDisplayName.toLowerCase() }} by watching this Video.
             </div>
             <div v-if="justAchieved">
               <i class="fas fa-birthday-cake text-success mr-1 animate__bounceIn" style="font-size: 1.2rem"></i> Congrats! You just earned <span
@@ -63,9 +63,9 @@ limitations under the License.
                         class="skills-theme-primary-color"
                         data-cy="viewTranscriptBtn"
                         @click="loadTranscript">View Transcript</b-button>
-              <span aria-hidden="true" class="mr-1">|</span>
+              <span aria-hidden="true" class="mr-1" v-if="showPercent">|</span>
             </span>
-            <span class="font-italic">Watched: </span> <b data-cy="percentWatched">{{ percentWatched }}</b>%
+            <span v-if="showPercent"><span class="font-italic">Watched: </span> <b data-cy="percentWatched">{{ percentWatched }}</b>%</span>
           </div>
         </div>
       </div>
@@ -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
@@ -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
@@ -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
@@ -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')
+    });
 });
diff --git 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) => {