diff --git a/elements/video-player/demo/index.html b/elements/video-player/demo/index.html index 24c0468d30..98e7dc95bc 100644 --- a/elements/video-player/demo/index.html +++ b/elements/video-player/demo/index.html @@ -21,6 +21,7 @@
+ Click Here

video-player Demo

video-player with progressive enhancement

diff --git a/elements/video-player/demo/lecture-player.html b/elements/video-player/demo/lecture-player.html index f857648256..0432223323 100644 --- a/elements/video-player/demo/lecture-player.html +++ b/elements/video-player/demo/lecture-player.html @@ -21,23 +21,19 @@

Start of Video

-

Lorem ipsum dolor sit amet, consectetur - Install Express - 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.

+

Lorem ipsum dolor sit amet, consectetur 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.

Next part in the video

-

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. Index JS 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.

+

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. Index JS 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.

Final value section goes here

-

Enim ut tellus elementum sagittis. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Arcu felis bibendum ut tristique et egestas. Pharetra pharetra massa massa ultricies mi quis hendrerit. A cras semper auctor Run the API vitae tempus quam pellentesque. Tincidunt vitae semper quis lectus nulla at volutpat. Semper viverra nam libero justo laoreet sit amet cursus. Nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Dui id ornare arcu odio ut sem nulla pharetra. Maecenas accumsan lacus vel facilisis volutpat est velit. At lectus urna duis convallis convallis tellus id interdum velit. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Mauris vitae ultricies leo integer. Eget velit aliquet sagittis id consectetur purus ut faucibus.

-

Third Section of the video

- Self Check - Enim ut tellus elementum sagittis. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Arcu felis bibendum ut tristique et egestas. Pharetra pharetra massa massa ultricies mi quis hendrerit. A cras semper auctor vitae tempus quam pellentesque. Tincidunt vitae semper quis lectus nulla at volutpat. Semper viverra nam libero justo laoreet sit amet cursus. Nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Dui id ornare arcu odio ut sem nulla pharetra. Maecenas accumsan lacus vel facilisis volutpat est velit. At lectus urna duis convallis convallis tellus id interdum velit. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Mauris vitae ultricies leo integer. Eget velit aliquet sagittis id consectetur purus ut faucibus.

+

Self Check

+ How large can the average great white shark grow to be? The Great White shark can grow to be 15 ft to more than 20 ft in length and weigh 2.5 tons or more. -

Test Section

- Extra 1 - Extra 2 +

Test Section

+ Extra 1
@@ -92,21 +88,44 @@

Test Section

console.log(globalThis.location.hash); }); - globalThis.addEventListener('DOMContentLoaded', async () => { - const hash = globalThis.location.hash; - var [id, timestamp, lectureMode] = hash.split('--'); - if (id) { - let video = document.querySelector(id); - video.elementVisible = true; - setTimeout(() => { - if(!lectureMode){ - console.log(globalThis.location.hash.split('--')[1]); - video.scrollIntoView(); - setTimeout(() => { - globalThis.location.hash.split('--')[1] !== 'undefined' ? video.seek(globalThis.location.hash.split('--')[1]) : ''; - }, 2000); - } - }, 1000); - } + // globalThis.addEventListener('DOMContentLoaded', async () => { + // const hash = globalThis.location.hash; + // console.log(hash); + // var [id, timestamp] = hash.split('--'); + // console.log(id, timestamp); + // if (id) { + // let video = document.querySelector(id); + // video.elementVisible = true; + // setTimeout(() => { + // if(id !== '#lecture-player-video'){ + // console.log(globalThis.location.hash.split('--')[1]); + // video.scrollIntoView(); + // setTimeout(() => { + // video.scrollIntoView(); + // globalThis.location.hash.split('--')[1] !== 'undefined' ? video.seek(globalThis.location.hash.split('--')[1]) : ''; + // }, 2000); + // } + // }, 1000); + // } + // }); + + globalThis.addEventListener('pause', (e) => { + let id = e.detail.getRootNode().host.id; + let hash; + hash = `${id}--${Math.floor(e.detail.media.currentTime) ? Math.floor(e.detail.media.currentTime) : 0}`; + globalThis.location.hash = hash; + }); + globalThis.addEventListener('play', (e) => { + let id = e.detail.getRootNode().host.id; + let hash; + hash = `${id}--${Math.floor(e.detail.media.currentTime) ? Math.floor(e.detail.media.currentTime) : 0}`; + globalThis.location.hash = hash; }); + globalThis.addEventListener('seek', (e) => { + let id = e.detail.getRootNode().host.id; + let hash; + hash = `${id}--${Math.floor(e.detail.media.currentTime) ? Math.floor(e.detail.media.currentTime) : 0}`; + globalThis.location.hash = hash; + }); + \ No newline at end of file diff --git a/elements/video-player/lib/lecture-player.js b/elements/video-player/lib/lecture-player.js index 95d0395616..d46722e853 100644 --- a/elements/video-player/lib/lecture-player.js +++ b/elements/video-player/lib/lecture-player.js @@ -40,17 +40,6 @@ class LecturePlayer extends DDDSuper(LitElement) { super(); this.associatedNodes = new Object(); this.videoPlayer = this.querySelector("video-player").outerHTML; - window.addEventListener("DOMContentLoaded", () => { - const flags = this.querySelectorAll("lecture-anchor"); - flags.forEach((flag) => { - console.log(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.videoInterval = null; this.activeIndex = null; } @@ -64,78 +53,86 @@ class LecturePlayer extends DDDSuper(LitElement) { }; } - updated(changedProperties) { - super.updated(changedProperties); - changedProperties.forEach((oldValue, propName) => { - if ( - propName === "activeIndex" && - oldValue !== this.activeIndex && - this.activeIndex - ) { - if (!document.querySelector("video-player").playing) { - this.play; - } - console.log("activeIndex changed to: ", this.activeIndex); - console.log(document.querySelector("#" + this.activeIndex)); - this.seek(this.querySelector("#" + this.activeIndex).value); - this.updateJumbotron(); - this.updatePlaylist(); - this.checkDisabledButtons(); - } - }); - } - - scan() { - const lectureAnchors = this.querySelectorAll("lecture-anchor"); + firstUpdated(){ + const lectureAnchors = this.querySelectorAll("[data-lecture-slide]"); console.log(lectureAnchors); const anchorsArray = Array.from(lectureAnchors); anchorsArray.sort((a, b) => { - const timeA = parseInt(a.getAttribute("value"), 10); - const timeB = parseInt(b.getAttribute("value"), 10); + const timeA = parseInt(a.getAttribute("data-value"), 10); + const timeB = parseInt(b.getAttribute("data-value"), 10); return timeA - timeB; }); anchorsArray.forEach((anchor, index) => { anchor.id = `slide-${index + 1}`; + this.associatedNodes[anchor.id] = anchor.getAttribute("data-value"); + console.log(anchor.id, anchor.getAttribute("data-value")); anchor.addEventListener("click", () => { this.activeIndex = anchor.id; - this.seek(anchor.value); - console.log(anchor.value); }); }); this.setJumbotronAttributes(); } + updated(changedProperties) { + super.updated(changedProperties); + changedProperties.forEach((oldValue, propName) => { + if (propName === "activeIndex" && oldValue !== this.activeIndex && this.activeIndex) { + if(this.linked){ + this.linked = false; + return; + } + if (!document.querySelector("video-player").playing) { + this.play; + } + console.log("activeIndex changed to:", this.activeIndex); + console.log(document.querySelector("#" + this.activeIndex)); + this.seek(this.associatedNodes[this.activeIndex]); + this.updateJumbotron(); + this.updatePlaylist(); + this.checkDisabledButtons(); + } + }); + } + setJumbotronAttributes() { console.log("setJumbotronAttributes"); - this.querySelectorAll("lecture-anchor").forEach((anchor) => { + this.querySelectorAll("[data-lecture-slide]").forEach((anchor) => { let header = this.querySelector( - `#${anchor.getAttribute("associatedID")}`, + `#${anchor.getAttribute("data-associatedID")}`, ); - anchor.setAttribute("jumbotronHeading", header.textContent); - anchor.setAttribute("jumbotronContent", this.getNextSiblingHTML(header)); + console.log(header); + anchor.setAttribute("data-lecture-heading", header.textContent); + anchor.setAttribute("data-lecture-content", this.getNextSiblingHTML(header)); // Scrub the ids from the lecture-anchor elements in the content let contentElement = document.createElement("div"); - contentElement.innerHTML = anchor.getAttribute("jumbotronContent"); - contentElement.querySelectorAll("lecture-anchor").forEach((el) => { + contentElement.innerHTML = anchor.getAttribute("data-lecture-content"); + contentElement.querySelectorAll("[data-lecture-slide]").forEach((el) => { el.removeAttribute("id"); el.classList.add("no-pointer-events"); }); - anchor.setAttribute("jumbotronContent", contentElement.innerHTML); + anchor.setAttribute("data-lecture-content", contentElement.innerHTML); }); - this.addPrevNextListeners(); - this.updatePlaylist(); } getNextSiblingHTML(element) { + console.log(element); let siblingHTML = ""; let nextSibling = element.nextSibling; - let stopIDs = Object.values(this.associatedNodes); - + console.log(nextSibling.nextSibling); + let stopIDs = []; + Object.keys(this.associatedNodes).forEach((key) => { + console.log(key); + stopIDs.push(key); + stopIDs.push(this.querySelector(`#${key}`).getAttribute("data-associatedID")); + }); + stopIDs = stopIDs.filter((item) => item !== element.id && item !== document.querySelector(`[data-associatedID="${element.id}"]`).id); + console.log(stopIDs); while (nextSibling) { - if (nextSibling.id && stopIDs.includes(nextSibling.id)) { + if (nextSibling && nextSibling.nodeType === Node.ELEMENT_NODE && (nextSibling.id && stopIDs.includes(nextSibling.id))) { + console.log("broke chain at " + nextSibling.id) break; } - + console.log(nextSibling); siblingHTML += nextSibling.outerHTML || ""; nextSibling = nextSibling.nextSibling; } @@ -147,9 +144,6 @@ class LecturePlayer extends DDDSuper(LitElement) { console.log("addPrevNextListeners"); const prevSlideBtn = document.querySelector("#prevSlideBtn"); const nextSlideBtn = document.querySelector("#nextSlideBtn"); - if (!this.activeIndex) { - this.activeIndex = "slide-1"; - } prevSlideBtn.addEventListener("click", () => { const prevSlide = this.activeIndex.split("-")[1] > 1 @@ -161,7 +155,7 @@ class LecturePlayer extends DDDSuper(LitElement) { }); nextSlideBtn.addEventListener("click", () => { const anchorsWithId = - document.querySelectorAll("lecture-anchor[id]").length; + document.querySelectorAll("[data-lecture-slide][id]").length; console.log(anchorsWithId); console.log(this.activeIndex.split("-")[1]); console.log(parseInt(this.activeIndex.split("-")[1]) + 1); @@ -182,19 +176,20 @@ class LecturePlayer extends DDDSuper(LitElement) { console.log("updateJumbotron"); const jumbotron = document.querySelector(".jumbotron"); console.log(jumbotron); - jumbotron.innerHTML = ""; + jumbotron ? jumbotron.innerHTML = "" : ""; + console.log(this.activeIndex); const activeAnchor = document.querySelector(`#${this.activeIndex}`); console.log(activeAnchor); if (activeAnchor) { const jumbotronHeading = document.createElement("h2"); jumbotronHeading.id = "jumbotron-heading"; jumbotronHeading.innerText = - activeAnchor.getAttribute("jumbotronHeading"); + activeAnchor.getAttribute("data-lecture-heading"); jumbotron.appendChild(jumbotronHeading); const jumbotronContent = document.createElement("div"); jumbotronContent.id = "jumbotron-desc"; jumbotronContent.innerHTML = - activeAnchor.getAttribute("jumbotronContent"); + activeAnchor.getAttribute("data-lecture-content"); jumbotron.appendChild(jumbotronContent); } } @@ -202,67 +197,49 @@ class LecturePlayer extends DDDSuper(LitElement) { updatePlaylist() { console.log("updatePlaylist"); const valueList = document.querySelector(".valueList"); - valueList.innerHTML = ""; - const listOfAnchorElements = this.getSortedAnchors(); - listOfAnchorElements.forEach((anchor) => { + if (!valueList) { + console.error("ValueList element not found"); + return; + } + valueList.innerHTML = ''; // Clear previous buttons + + Object.keys(this.associatedNodes).forEach((key) => { + console.log(key, this.associatedNodes[key]); + const timestamp = this.associatedNodes[key]; + const slideAnchor = document.querySelector(`#${key}`); const valueBtn = document.createElement("button"); valueBtn.classList.add("valueBtn"); - valueBtn.innerText = anchor.getAttribute("jumbotronHeading"); - valueBtn.setAttribute("value", anchor.value); - valueBtn.addEventListener("click", () => { - this.activeIndex = anchor.id; - this.seek(document.querySelector(`#${this.activeIndex}`).value); - }); - if (anchor.id === this.activeIndex) { - valueBtn.classList.add("active"); - } - valueList.appendChild(valueBtn); - }); - document.querySelector(".valueList").scrollTo({ - left: document.querySelector(".valueBtn.active").offsetLeft - 125, - behavior: "smooth", + valueBtn.textContent = slideAnchor ? slideAnchor.getAttribute("data-lecture-heading") : "Missing Title"; + valueBtn.addEventListener("click", () => { + this.activeIndex = key; + }); + if (key === this.activeIndex) { + valueBtn.classList.add("active"); + } + valueList.appendChild(valueBtn); }); - } - getSortedAnchors() { - // 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; - let anchor = document.querySelector(`#slide-${i}`); - while (anchor) { - anchors.push(anchor); - i++; - anchor = document.querySelector(`#slide-${i}`); + + // Auto-scroll to active button + const activeBtn = valueList.querySelector(".active"); + if (activeBtn) { + valueList.scrollTo({ + left: activeBtn.offsetLeft - 125, + behavior: "smooth" + }); } - return anchors; } seek(timestamp) { - let lectureVideo = document.querySelector("#lecture-player-video"); - if (lectureVideo) { - if (lectureVideo.hasAttribute("element-visible")) { - document - .querySelector("#lecture-player-video") - .shadowRoot.querySelector("a11y-media-player") - .play(); - document - .querySelector("#lecture-player-video") - .shadowRoot.querySelector("a11y-media-player") - .seek(timestamp); - } else { + console.log("seek to timestamp: ", timestamp); + if (this.open) { setTimeout(() => { - document - .querySelector("#lecture-player-video") - .shadowRoot.querySelector("a11y-media-player") - .play(); - document - .querySelector("#lecture-player-video") - .shadowRoot.querySelector("a11y-media-player") - .seek(timestamp); - }, 1000); - } + document.querySelector("#lecture-player-video").seek(timestamp); + document.querySelector("#lecture-player-video").play(); + console.log(timestamp); + }, 3000); } else { + console.log('seeking to video player'); this.querySelector("video-player") .shadowRoot.querySelector("a11y-media-player") .play(); @@ -303,7 +280,7 @@ class LecturePlayer extends DDDSuper(LitElement) { } else { prevSlideBtn.removeAttribute("disabled"); } - if (activeIndex !== document.querySelectorAll("lecture-anchor").length) { + if (activeIndex !== document.querySelectorAll("[data-lecture-slide]").length) { document.querySelector("#nextSlideBtn").removeAttribute("disabled"); } } @@ -328,7 +305,7 @@ class LecturePlayer extends DDDSuper(LitElement) { jumbotron.scrollTop = jumbotron.scrollHeight + 500; } - showModal(event) { + showModal() { let videoSectionColumns = "1fr 1fr"; console.log("showModal"); let c = document.createElement("div"); @@ -360,7 +337,7 @@ class LecturePlayer extends DDDSuper(LitElement) { max-width: 100%; height: 100%; gap: var(--ddd-spacing-4); - max-height: 68vh; + height: 68vh; } .videoSection.small{ @@ -518,55 +495,104 @@ class LecturePlayer extends DDDSuper(LitElement) { }); this.open = true; dispatchEvent(evnt); - document - .querySelector("#lecture-size-large") - .addEventListener("click", (e) => { - document.querySelectorAll(".lecture-control").forEach((control) => { - control.classList.remove("active"); + setTimeout(() => { + document + .querySelector("#lecture-size-large") + .addEventListener("click", (e) => { + document.querySelectorAll(".lecture-control").forEach((control) => { + control.classList.remove("active"); + }); + e.target.classList.toggle("active"); + document.querySelector(".videoSection").classList.add("large"); + document.querySelector(".videoSection").classList.remove("small"); + document.querySelector(".videoSection").classList.remove("normal"); }); - e.target.classList.toggle("active"); - document.querySelector(".videoSection").classList.add("large"); - document.querySelector(".videoSection").classList.remove("small"); - document.querySelector(".videoSection").classList.remove("normal"); - }); - document - .querySelector("#lecture-size-normal") - .addEventListener("click", (e) => { - document.querySelectorAll(".lecture-control").forEach((control) => { - control.classList.remove("active"); + document + .querySelector("#lecture-size-normal") + .addEventListener("click", (e) => { + document.querySelectorAll(".lecture-control").forEach((control) => { + control.classList.remove("active"); + }); + e.target.classList.toggle("active"); + document.querySelector(".videoSection").classList.add("normal"); + document.querySelector(".videoSection").classList.remove("small"); + document.querySelector(".videoSection").classList.remove("large"); }); - e.target.classList.toggle("active"); - document.querySelector(".videoSection").classList.add("normal"); - document.querySelector(".videoSection").classList.remove("small"); - document.querySelector(".videoSection").classList.remove("large"); - }); - document - .querySelector("#lecture-size-small") - .addEventListener("click", (e) => { - document.querySelectorAll(".lecture-control").forEach((control) => { - control.classList.remove("active"); + document + .querySelector("#lecture-size-small") + .addEventListener("click", (e) => { + document.querySelectorAll(".lecture-control").forEach((control) => { + control.classList.remove("active"); + }); + e.target.classList.toggle("active"); + document.querySelector(".videoSection").classList.add("small"); + document.querySelector(".videoSection").classList.remove("normal"); + document.querySelector(".videoSection").classList.remove("large"); }); - e.target.classList.toggle("active"); - document.querySelector(".videoSection").classList.add("small"); - document.querySelector(".videoSection").classList.remove("normal"); - document.querySelector(".videoSection").classList.remove("large"); - }); - document - .querySelector("simple-modal .modal-content .videoSection video-player") - .setAttribute("id", "lecture-player-video"); - this.scan(); - window.addEventListener("simple-modal-closed", () => { - this.querySelector("video-player").removeAttribute("hidden"); - this.open = false; - }); + document + .querySelector("simple-modal .modal-content .videoSection video-player") + .setAttribute("id", "lecture-player-video"); + window.addEventListener("simple-modal-closed", () => { + this.querySelector("video-player").removeAttribute("hidden"); + this.open = false; + });}, 3000); } render() { return html` - Open Lecture Player - ${!this.open ? html`` : html``} + ${ + globalThis.addEventListener("DOMContentLoaded", () => { + console.log(globalThis.location.hash); + if(globalThis.location.hash){ + var id = globalThis.location.hash.split('--')[0]; + var timestamp = globalThis.location.hash.split('--')[1] || this.associatedNodes['slide-1']; + console.log(id, timestamp); + if(id === '#lecture-player-video'){ + console.log('lecture player link') + setTimeout(() => { + this.showModal(); + console.log('show modal'); + let activeSlide = null; + let associatedNodesValues = Object.values(this.associatedNodes); + console.log(associatedNodesValues.length); + for (let i = 0; i < associatedNodesValues.length; i++) { + let currentTimestamp = associatedNodesValues[i]; + console.log(currentTimestamp); + let nextTimestamp = i <= (associatedNodesValues.length - 1) ? associatedNodesValues[i + 1] : Infinity; + + if (timestamp >= currentTimestamp && timestamp < nextTimestamp) { + console.log('found current slide' + currentTimestamp + ' ' + nextTimestamp + ' ' + timestamp); + activeSlide = Object.keys(this.associatedNodes)[i]; + console.log(activeSlide); + setTimeout(() => { + this.activeIndex = activeSlide; + }, 3000); + break; + } + if (i == associatedNodesValues.length - 1 && this.activeIndex === null) { + console.log('last slide'); + this.activeIndex = Object.keys(this.associatedNodes)[0]; + break; + } + //@TODO: Find the current slide based on timestamp & set it + } + }, 2000); + }; + + } + })} + ${globalThis.addEventListener("hashChange", () => { + var [id, timestamp] = globalThis.location.hash.split('--'); + if(id=== '#lecture-player-video' && !timestamp){ + console.log('no timestamp'); + this.showModal(); + setTimeout(() => { + this.activeIndex = 'slide-1'; + }, 1000); + } + })} + Open Lecture Player + ${!this.open ? html`` : html``} `; } }