Merge pull request #688 from kchar601/master

btopro · web-flow · commit 2d0618e8a198 · 2024-04-19T14:39:12.000-04:00
lecture-player video transplant problem
diff --git a/elements/video-player/demo/lecture-player.html b/elements/video-player/demo/lecture-player.html
@@ -15,12 +15,13 @@
   </head>
   <body>
 
+  <lecture-player>
     <video-player source="https://www.youtube.com/embed/-MTSQjw5DrM?si=TDthCE9uHS07JxO0"></video-player>
 
     <div class="pageContent">
-      <h2 id="1">Start of Video</h2>
+      <h2 id="title1">Start of Video</h2>
       <p>Lorem ipsum dolor sit amet, consectetur 
-        <lecture-anchor data-primary="11" data-accent="1" timestamp=422 target="video-player" associatedID="1">Install Express</lecture-anchor>
+        <lecture-anchor data-primary="11" data-accent="1" timestamp=422 target="video-player" associatedID="title1">Install Express</lecture-anchor>
         adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       <h2 id="section2">Next part in the video</h2>
       <p>Lorem ipsum dolor sit amet consectetur adipiscing. Diam ut venenatis tellus in metus. Et netus et malesuada fames ac turpis egestas. Commodo quis imperdiet massa tincidunt nunc. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. <lecture-anchor timestamp=213 icon="image:palette" data-primary="20" data-accent="2" target="video-player" associatedID="section2">Index JS</lecture-anchor> enim facilisis gravida neque convallis. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Turpis nunc eget lorem dolor sed. Mattis enim ut tellus elementum sagittis vitae et leo. Lacus sed viverra tellus in hac habitasse platea. Luctus venenatis lectus magna fringilla. A diam sollicitudin tempor id. Congue nisi vitae suscipit tellus mauris. Et malesuada fames ac turpis egestas sed.</p>
@@ -34,8 +35,9 @@ <h2 id="heading3">Third Section of the video</h2>
         The Great White shark can grow to be 15 ft to more than 20 ft in length and weigh 2.5 tons or more.
         </self-check>
       <h2 id="testSection">Test Section</h2>
-      <lecture-anchor data-primary="11" data-accent="1" timestamp=12 target="video-player" associatedID="1">Extra 1</lecture-anchor>
+      <lecture-anchor data-primary="11" data-accent="1" timestamp=12 target="video-player" associatedID="title1">Extra 1</lecture-anchor>
       <lecture-anchor data-primary="11" data-accent="1" timestamp=462 target="video-player" associatedID="section2">Extra 2</lecture-anchor>
     </div>
+  </lecture-player>
   </body>
 </html>
diff --git a/elements/video-player/lib/lecture-anchor.js b/elements/video-player/lib/lecture-anchor.js
@@ -9,7 +9,7 @@ class LectureAnchor extends DDD {
   static get properties() {
     return {
       icon: { type: String, reflect: true },
-      timestamp: { type: Number, reflect: true },
+      value: { type: Number, reflect: true },
       target: { type: String, reflect: true },
       associatedID : { type: String, reflect: true },
     };
@@ -18,7 +18,7 @@ class LectureAnchor extends DDD {
   constructor() {
     super();
     this.icon = "icons:flag";
-    this.timestamp = 0;
+    this.value = 0;
     this.jumbotronHeading = "";
     this.jumbotronContent = "";
     this.target = "video-player";
@@ -78,8 +78,8 @@ class LectureAnchor extends DDD {
           case "lecture-player":
           case "video-player":
           case "audio-player":
-            if (this.timestamp) {
-              node.seek(parseInt(this.timestamp));
+            if (this.value) {
+              node.seek(parseInt(this.value));
             } else {
               node.play();
             }
@@ -113,8 +113,8 @@ class LectureAnchor extends DDD {
     return "video-player-flag";
   }
 
-  static get timestamp() {
-    return this.timestamp;
+  static get value() {
+    return this.value;
   }
 
   static get jumbotronHeading() {
diff --git a/elements/video-player/lib/lecture-player.js b/elements/video-player/lib/lecture-player.js
@@ -36,16 +36,18 @@ class LecturePlayer extends DDDSuper(LitElement) {
     this.associatedNodes ={};
 
     window.onload = () => {
-      const flags = document.querySelectorAll("lecture-anchor");
+      const flags = this.querySelectorAll("lecture-anchor");
       flags.forEach((flag) => {
         console.log(flag.associatedID);
-        this.associatedNodes[flag.timestamp] = flag.associatedID;
+        this.associatedNodes[flag.value] = flag.associatedID;
       });
       console.log(this.associatedNodes);
       for (const [key, value] of Object.entries(this.associatedNodes)) {
         console.log(`${key}: ${value}`);
       }
     }
+
+    this.videoPlayer = this.querySelector("video-player").outerHTML;
   }
 
   static get properties() {
@@ -60,12 +62,12 @@ class LecturePlayer extends DDDSuper(LitElement) {
     super.updated(changedProperties);
     changedProperties.forEach((oldValue, propName) => {
       if (propName === "activeIndex") {
-        if (!document.querySelector("video-player").playing) {
+        if (!this.querySelector("video-player").playing) {
           this.play();
         }
         console.log("activeIndex changed to: ", this.activeIndex);
-        console.log(document.querySelector("#" + this.activeIndex));
-        this.seek(document.querySelector("#" + this.activeIndex).timestamp);
+        console.log(this.querySelector("#" + this.activeIndex));
+        this.seek(this.querySelector("#" + this.activeIndex).value);
         this.updateJumbotron();
         this.updatePlaylist();
         this.checkDisabledButtons();
@@ -74,12 +76,12 @@ class LecturePlayer extends DDDSuper(LitElement) {
   }
 
   scan() {
-    const lectureAnchors = document.querySelectorAll("lecture-anchor");
+    const lectureAnchors = this.querySelectorAll("lecture-anchor");
     console.log(lectureAnchors);
     const anchorsArray = Array.from(lectureAnchors);
     anchorsArray.sort((a, b) => {
-      const timeA = parseInt(a.getAttribute("timestamp"), 10);
-      const timeB = parseInt(b.getAttribute("timestamp"), 10);
+      const timeA = parseInt(a.getAttribute("value"), 10);
+      const timeB = parseInt(b.getAttribute("value"), 10);
       return timeA - timeB;
     });
     anchorsArray.forEach((anchor, index) => {
@@ -93,8 +95,8 @@ class LecturePlayer extends DDDSuper(LitElement) {
 
   setJumbotronAttributes() {
     console.log("setJumbotronAttributes");
-    document.querySelectorAll("lecture-anchor").forEach((anchor) => {
-      let header = document.getElementById(anchor.getAttribute("associatedID"));
+    this.querySelectorAll("lecture-anchor").forEach((anchor) => {
+      let header = this.querySelector(`#${anchor.getAttribute("associatedID")}`);
       anchor.setAttribute("jumbotronHeading", header.textContent);
       anchor.setAttribute("jumbotronContent", this.getNextSiblingHTML(header));
       // Scrub the ids from the lecture-anchor elements in the content
@@ -185,30 +187,30 @@ class LecturePlayer extends DDDSuper(LitElement) {
 
   updatePlaylist() {
     console.log("updatePlaylist");
-    const timestampList = document.querySelector(".timestampList");
-    timestampList.innerHTML = "";
+    const valueList = document.querySelector(".valueList");
+    valueList.innerHTML = "";
     const listOfAnchorElements = this.getSortedAnchors();
     listOfAnchorElements.forEach((anchor) => {
-      const timestampBtn = document.createElement("button");
-      timestampBtn.classList.add("timestampBtn");
-      timestampBtn.innerText = anchor.getAttribute("jumbotronHeading");
-      timestampBtn.timestamp = anchor.getAttribute("timestamp");
-      timestampBtn.addEventListener("click", () => {
+      const valueBtn = document.createElement("button");
+      valueBtn.classList.add("valueBtn");
+      valueBtn.innerText = anchor.getAttribute("jumbotronHeading");
+      valueBtn.value = anchor.getAttribute("value");
+      valueBtn.addEventListener("click", () => {
         this.activeIndex = anchor.id;
       });
       if (anchor.id === this.activeIndex) {
-        timestampBtn.classList.add("active");
+        valueBtn.classList.add("active");
       }
-      timestampList.appendChild(timestampBtn);
+      valueList.appendChild(valueBtn);
     });
-    document.querySelector(".timestampList").scrollTo({
-      left: document.querySelector(".timestampBtn.active").offsetLeft - 125,
+    document.querySelector(".valueList").scrollTo({
+      left: document.querySelector(".valueBtn.active").offsetLeft - 125,
       behavior: "smooth",
     });
   }
 
   getSortedAnchors() {
-    // Returns an array of all the lecture-anchor elements sorted by timestamp, to assing their IDs in order
+    // Returns an array of all the lecture-anchor elements sorted by value, to assing their IDs in order
     // May need to support the option for sorting by how the tags appear in the content order
     let anchors = [];
     let i = 1;
@@ -221,9 +223,9 @@ class LecturePlayer extends DDDSuper(LitElement) {
     return anchors;
   }
 
-  seek(timestamp) {
+  seek(value) {
     console.log("seek");
-    console.log(timestamp);
+    console.log(value);
     console.log(
       document
         .querySelector("video-player")
@@ -237,7 +239,7 @@ class LecturePlayer extends DDDSuper(LitElement) {
       document
         .querySelector("video-player")
         .shadowRoot.querySelector("a11y-media-player")
-        .seek(timestamp);
+        .seek(value);
     }
   }
 
@@ -336,7 +338,7 @@ class LecturePlayer extends DDDSuper(LitElement) {
         word-break: break-word;
       }
 
-      .timestampList {
+      .valueList {
         display: flex; /* Use flexbox to layout items in a row */
         flex-wrap: nowrap; /* Prevent wrapping of items */
         border: var(--ddd-border-xs);
@@ -346,7 +348,7 @@ class LecturePlayer extends DDDSuper(LitElement) {
         overflow-y: hidden; /* Hide vertical overflow */
       }
       
-      .timestampBtn {
+      .valueBtn {
         flex-shrink: 0; /* Prevent buttons from shrinking */
         background: white;
         border: none;
@@ -362,7 +364,7 @@ class LecturePlayer extends DDDSuper(LitElement) {
         font-family: var(--ddd-font-primary, sans-serif);
       }
 
-      .timestampBtn:not(:last-child){
+      .valueBtn:not(:last-child){
         border-right: 1px solid black;
       }
 
@@ -387,15 +389,15 @@ class LecturePlayer extends DDDSuper(LitElement) {
         width: calc(100% - 16px);
       }
 
-      .timestamp-navigation-button{
+      .value-navigation-button{
         background: white;
         cursor: pointer;
         padding: 4px;
         height: fit-content;
         margin: auto;
       }
       
-      .timestampBtn.active{
+      .valueBtn.active{
         background: #dfedf5;
       }
 
@@ -430,16 +432,17 @@ class LecturePlayer extends DDDSuper(LitElement) {
       }
     </style>
       <div class="videoSection">
-          <video-player source="${this.source}" source-type="${this.sourceType}"></video-player>
+          ${this.videoPlayer}
         <div class="jumbotron"></div>
       </div>
       <div class="playlist">
-        <button class="timestamp-navigation-button" id="prevSlideBtn"><simple-icon-lite icon="lrn:arrow-left"></simple-icon-lite></button>
-        <div class="timestampList">
+        <button class="value-navigation-button" id="prevSlideBtn"><simple-icon-lite icon="lrn:arrow-left"></simple-icon-lite></button>
+        <div class="valueList">
         </div>
-        <button class="timestamp-navigation-button" id="nextSlideBtn"><simple-icon-lite icon="lrn:arrow-right"></simple-icon-lite></button>
+        <button class="value-navigation-button" id="nextSlideBtn"><simple-icon-lite icon="lrn:arrow-right"></simple-icon-lite></button>
       </div>
     `;
+    this.querySelector("video-player").setAttribute("hidden", true);
     const evnt = new CustomEvent("simple-modal-show", {
       bubbles: true,
       cancelable: true,
@@ -454,6 +457,7 @@ class LecturePlayer extends DDDSuper(LitElement) {
   render() {
     return html`
     <simple-cta id="lectureActivation" @click="${this.showModal}">Open Lecture Player</simple-cta>
+    <slot></slot>
     `;
   }
 }
