mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
Enable player api
This commit is contained in:
Sam Carlton
parent
2ac5f693b4
commit
50f679698e
2 changed files with 58 additions and 12 deletions
|
|
@ -1,3 +1,22 @@
|
|||
function renderTimestamps ( video ) {
|
||||
const timestampsForRender = video.timestamps.map( timestamp => {
|
||||
const [ minutes, seconds ] = timestamp.time.split(':')
|
||||
|
||||
return {
|
||||
...timestamp,
|
||||
inSeconds: (minutes * 60) + Number(seconds)
|
||||
}
|
||||
})
|
||||
|
||||
return timestampsForRender.map( timestamp => (/* html */`
|
||||
<button
|
||||
time="${timestamp.time}"
|
||||
class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner">
|
||||
${ timestamp.fullText }
|
||||
</button>
|
||||
`) ).join('')
|
||||
}
|
||||
|
||||
export default async function ( video, options = {} ) {
|
||||
const {
|
||||
width = '325px',
|
||||
|
|
@ -14,6 +33,8 @@ export default async function ( video, options = {} ) {
|
|||
|
||||
// console.log('video', video)
|
||||
|
||||
const timestampsHtml = renderTimestamps( video )
|
||||
|
||||
return /* html */`
|
||||
<lite-youtube
|
||||
class="video-canvas w-screen flex flex-col justify-center items-center bg-black pt-16"
|
||||
|
|
@ -46,8 +67,10 @@ export default async function ( video, options = {} ) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-timestamps w-full max-w-4xl">
|
||||
<div class="featured-apps overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2"><button data-time="00:00" class-groups="[object Object]" class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner">00:00 What is Parallels?</button><button data-time="00:35" class-groups="[object Object]" class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner">00:35 What’s New In Version 16.5?</button><button data-time="01:42" class-groups="[object Object]" class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner">01:42 Performance Improvements</button><button data-time="03:11" class-groups="[object Object]" class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner">03:11 Windows 10 Gaming Improvements</button><button data-time="05:11" class-groups="[object Object]" class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner">05:11 Does Valorant Work?</button></div>
|
||||
<div class="player-timestamps w-full max-w-4xl">
|
||||
<div class="player-timestamps-wrapper overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2">
|
||||
${ timestampsHtml }
|
||||
</div>
|
||||
</div>
|
||||
</lite-youtube>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -21,6 +21,14 @@ class LiteYTEmbed extends HTMLElement {
|
|||
super()
|
||||
|
||||
this._uid = Date.now()
|
||||
this.$refs = {}
|
||||
|
||||
this.playerLoaded = false
|
||||
this.player = null
|
||||
this.playing = false
|
||||
this.progressInterval = null
|
||||
this.playerTime = 0
|
||||
this.preconnected = false
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
|
|
@ -46,7 +54,10 @@ class LiteYTEmbed extends HTMLElement {
|
|||
// Once the user clicks, add the real iframe and drop our play button
|
||||
// TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
|
||||
// We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
|
||||
this.playerPoster.addEventListener('click', e => this.addIframe())
|
||||
this.playerPoster.addEventListener('click', e => {
|
||||
this.addIframe()
|
||||
this.startPlayerLoad()
|
||||
})
|
||||
|
||||
|
||||
// Mounted
|
||||
|
|
@ -114,6 +125,8 @@ class LiteYTEmbed extends HTMLElement {
|
|||
|
||||
const iframeEl = document.createElement('iframe')
|
||||
|
||||
this.$refs['frame'] = iframeEl
|
||||
|
||||
iframeEl.width = '100%'
|
||||
iframeEl.height = '100%'
|
||||
// No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
|
||||
|
|
@ -168,7 +181,7 @@ class LiteYTEmbed extends HTMLElement {
|
|||
}
|
||||
|
||||
hasTimestamps () {
|
||||
return this.timestamps.length > 0
|
||||
return this.timestamps().length > 0
|
||||
}
|
||||
|
||||
hasPlayer () {
|
||||
|
|
@ -179,7 +192,7 @@ class LiteYTEmbed extends HTMLElement {
|
|||
const currentTime = this.playerTime// / 100
|
||||
|
||||
const reversesTimestamps = [
|
||||
...this.timestamps
|
||||
...this.timestamps()
|
||||
]
|
||||
|
||||
// reversesTimestamps.reverse()
|
||||
|
|
@ -256,7 +269,7 @@ class LiteYTEmbed extends HTMLElement {
|
|||
// },
|
||||
|
||||
static addPrefetch(kind, url, as) {
|
||||
console.log('prefetching', url)
|
||||
// console.log('prefetching', url)
|
||||
|
||||
const linkEl = document.createElement('link')
|
||||
|
||||
|
|
@ -288,6 +301,8 @@ class LiteYTEmbed extends HTMLElement {
|
|||
}
|
||||
|
||||
async startPlayerLoad () {
|
||||
// console.log('Starting player load')
|
||||
|
||||
this.playerLoaded = true
|
||||
|
||||
await this.initializePlayer()
|
||||
|
|
@ -298,7 +313,7 @@ class LiteYTEmbed extends HTMLElement {
|
|||
}
|
||||
|
||||
async initializePlayer () {
|
||||
// console.log('Youtube Embed API Ready')
|
||||
console.log('Initializing player')
|
||||
|
||||
// Clear player
|
||||
this.player = null
|
||||
|
|
@ -308,7 +323,9 @@ class LiteYTEmbed extends HTMLElement {
|
|||
|
||||
// If there are no timestamps
|
||||
// then stop
|
||||
if (!this.hasTimestamps) {
|
||||
if ( !this.hasTimestamps() ) {
|
||||
console.log('No timestamps. Skipping Youtube API initialization')
|
||||
|
||||
this.playerLoaded = true
|
||||
return
|
||||
}
|
||||
|
|
@ -337,9 +354,13 @@ class LiteYTEmbed extends HTMLElement {
|
|||
|
||||
const onReady = () => new Promise( resolve => {
|
||||
|
||||
// console.log('Started onReady')
|
||||
|
||||
this.player = new YT.Player(this.$refs['frame'].id, {
|
||||
events: {
|
||||
'onReady': readyEvent => {
|
||||
// console.log('Resolving onReady')
|
||||
|
||||
this.onPlayerReady( readyEvent )
|
||||
|
||||
resolve( readyEvent )
|
||||
|
|
@ -356,9 +377,11 @@ class LiteYTEmbed extends HTMLElement {
|
|||
|
||||
})
|
||||
|
||||
await onReady()
|
||||
// console.log('Waiting for ready')
|
||||
|
||||
// console.log('Youtube Player API ready', JSON.stringify(this.player))
|
||||
const readyEvent = await onReady()
|
||||
|
||||
// console.log('Youtube Player API ready', readyEvent, JSON.stringify(this.player))
|
||||
}
|
||||
|
||||
initializeApi () {
|
||||
|
|
@ -375,8 +398,8 @@ class LiteYTEmbed extends HTMLElement {
|
|||
})
|
||||
}
|
||||
|
||||
onPlayerPlaying () {
|
||||
console.log('Player playing')
|
||||
onPlayerPlaying = () => {
|
||||
// console.log('Player playing')
|
||||
this.playing = true
|
||||
|
||||
this.progressInterval = setInterval(() => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue