Skip to content

Commit

Permalink
Merge pull request #690 from kchar601/master
Browse files Browse the repository at this point in the history 
lecture-player
  • Loading branch information
@btopro
btopro authored Apr 26, 2024
2 parents cde7147 + 3c3af9b commit 64fa542
Show file tree
Hide file tree
Showing 3 changed files with 227 additions and 181 deletions.
1 change: 1 addition & 0 deletions elements/video-player/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
</head>
<body>
<div class="vertical-section-container centered">
<a href="/elements/video-player/demo/lecture-player.html#video-player-1--300">Click Here</a>
<h1>video-player Demo</h1>
<h2>video-player with progressive enhancement</h2>
<demo-snippet>
Expand Down
73 changes: 46 additions & 27 deletions elements/video-player/demo/lecture-player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,19 @@
<lecture-player>
<div class="pageContent">
<h2 id="title1">Start of Video</h2>
<p>Lorem ipsum dolor sit amet, consectetur
<lecture-anchor data-primary="11" data-accent="1" value=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>
<p data-lecture-slide data-value=422 target="video-player" data-associatedID="title1">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.</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 value=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>
<p data-lecture-slide data-value=213 target="video-player" data-associatedID="section2">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 >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>
<h2 id="final">Final value section goes here</h2>
<p>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 <lecture-anchor icon="icons:language" value=253 data-primary="17" data-accent="5" target="video-player" associatedID="final">Run the API</lecture-anchor> 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.</p>
<h2 id="heading3">Third Section of the video</h2>
<lecture-anchor data-primary="11" data-accent="1" value=322 target="video-player" associatedID="heading3">Self Check</lecture-anchor>
<self-check accent-color="light-blue" title="Sharks Self Check" image="https://upload.wikimedia.org/wikipedia/commons/5/56/White_shark.jpg"
<p data-lecture-slide data-value=253 target="video-player" data-associatedID="final">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.</p>
<h2 id="heading3">Self Check</h2>
<self-check data-lecture-slide data-value=322 target="video-player" data-associatedID="heading3" accent-color="light-blue" title="Sharks Self Check" image="https://upload.wikimedia.org/wikipedia/commons/5/56/White_shark.jpg"
alt="Great White Shark">
<span slot="question">How large can the average great white shark grow to be?</span>
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" value=12 target="video-player" associatedID="testSection">Extra 1</lecture-anchor>
<lecture-anchor data-primary="11" data-accent="1" value=462 target="video-player" associatedID="section2">Extra 2</lecture-anchor>
<h2 data-lecture-slide data-primary="11" data-accent="1" data-value=12 target="video-player" data-associatedID="testSection">Test Section</h2>
<span id="testSection">Extra 1</span>
</div>
<video-player id="video-player-1" source="https://www.youtube.com/embed/-MTSQjw5DrM?si=TDthCE9uHS07JxO0"></video-player>
</lecture-player>
Expand Down Expand Up @@ -92,21 +88,44 @@ <h2 id="testSection">Test Section</h2>
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;
});

</script>
Loading

0 comments on commit 64fa542

Please sign in to comment.