Merge pull request #57 from hahow/fix/near-end-lecture-note-and-same-…

…time-edit fix: near end lecture note can not click
hahow · Aug 22, 2018 · b31ca34 · b31ca34
2 parents 9e0600f + 5c96083
commit b31ca34
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 13 deletions.
diff --git a/dist/hahow-plyr.css b/dist/hahow-plyr.css
diff --git a/dist/plyr.js b/dist/plyr.js
diff --git a/dist/plyr.js.map b/dist/plyr.js.map
diff --git a/dist/plyr.min.js b/dist/plyr.min.js
diff --git a/dist/plyr.min.js.map b/dist/plyr.min.js.map
diff --git a/dist/plyr.polyfilled.js b/dist/plyr.polyfilled.js
diff --git a/dist/plyr.polyfilled.js.map b/dist/plyr.polyfilled.js.map
diff --git a/dist/plyr.polyfilled.min.js b/dist/plyr.polyfilled.min.js
diff --git a/dist/plyr.polyfilled.min.js.map b/dist/plyr.polyfilled.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hahow-plyr",
-    "version": "1.3.1",
+    "version": "1.3.2",
     "description":
         "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",

diff --git a/src/js/plugins/lectureNote.js b/src/js/plugins/lectureNote.js
@@ -111,10 +111,9 @@ export default class LectureNote {
         const time = Math.round(this.player.currentTime);
         const note = this.getSameTimeLectureNote(time);
         if (note) {
-
             const lectureNoteContainer = getElement.call(this.player, `.lecture-note[data-id="${  note._id  }"]`);
             if (lectureNoteContainer) {
-                const contentContianer = lectureNoteContainer.querySelector('lecture-note__content-container ');
+                const contentContianer = lectureNoteContainer.querySelector('.lecture-note__content-container');
                 if (contentContianer) {
                     const clickEvent = new Event('click');
                     contentContianer.dispatchEvent(clickEvent);
@@ -353,6 +352,13 @@ export default class LectureNote {
                 cancelTimeout = null;
             }
             toggleClass(contentContainer, 'lecture-note__content-container--show', true);
+            const container = this.getContainer();
+            const leftLimit = ((container.offsetWidth - 200) / container.offsetWidth) * 100 || 0;
+            if (percent > leftLimit) {
+                toggleClass(contentContainer, 'lecture-note__content-container--near-end', true);
+            } else {
+                toggleClass(contentContainer, 'lecture-note__content-container--near-end', false);
+            }
             e.preventDefault();
         });
 
@@ -370,6 +376,13 @@ export default class LectureNote {
                 cancelTimeout = null;
             }
             toggleClass(contentContainer, 'lecture-note__content-container--show', true);
+            const container = this.getContainer();
+            const leftLimit = ((container.offsetWidth - 200) / container.offsetWidth) * 100 || 0;
+            if (percent > leftLimit) {
+                toggleClass(contentContainer, 'lecture-note__content-container--near-end', true);
+            } else {
+                toggleClass(contentContainer, 'lecture-note__content-container--near-end', false);
+            }
             e.preventDefault();
         });
 
@@ -381,7 +394,7 @@ export default class LectureNote {
             e.preventDefault();
         });
 
-        lectureNoteContainer.style.left = `calc(${(lectureNote.time / duration) * 100 || 0}%)`;
+        lectureNoteContainer.style.left = `calc(${percent}%)`;
         return lectureNoteContainer;
     }
 }
diff --git a/src/sass/hahow-plyr.scss b/src/sass/hahow-plyr.scss
@@ -262,6 +262,11 @@ $plyr-font-size-captions-small: 24px;
     display: flex;
 }
 
+.lecture-note__content-container.lecture-note__content-container--near-end {
+    left: auto;
+    right: 0;
+}
+
 .lecture-note__content-show-text {
     color: #000;
     margin: 2px 5px;