Skip to content

lecture-player video transplant problem #688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 19, 2024
Merged

lecture-player video transplant problem #688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
84e0276
lecture-player video transplant problem
Apr 19, 2024
640a879
Merge branch 'elmsln:master' into master
Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions elements/video-player/demo/lecture-player.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
12 changes: 6 additions & 6 deletions elements/video-player/lib/lecture-anchor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
};
Expand All @@ -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";
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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() {
Expand Down
72 changes: 38 additions & 34 deletions elements/video-player/lib/lecture-player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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();
Expand All @@ -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) => {
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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")
Expand All @@ -237,7 +239,7 @@ class LecturePlayer extends DDDSuper(LitElement) {
document
.querySelector("video-player")
.shadowRoot.querySelector("a11y-media-player")
.seek(timestamp);
.seek(value);
}
}

Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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;
}

Expand All @@ -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;
}

Expand Down Expand Up @@ -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,
Expand All @@ -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>
`;
}
}
Expand Down
Loading