mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
Merge branch 'develop'
This commit is contained in:
Sam Carlton
commit
47624eebe3
5 changed files with 6936 additions and 6251 deletions
|
|
@ -35,10 +35,17 @@
|
|||
>
|
||||
</picture>
|
||||
<div
|
||||
class="video-card-overlay absolute inset-0 flex justify-center items-center bg-gradient-to-tr from-black to-transparent p-4"
|
||||
class="video-card-overlay absolute inset-0 flex flex-col justify-center items-center bg-gradient-to-tr from-black to-transparent p-4"
|
||||
style="--gradient-from-color:rgba(0, 0, 0, 1); --gradient-to-color:rgba(0, 0, 0, 0.7);"
|
||||
>
|
||||
<div class="play-circle w-16 h-16 bg-white-2 flex justify-center items-center outline-0 rounded-full ease">
|
||||
<div class="cover-top h-full">
|
||||
<slot name="cover-top">
|
||||
<!-- Top -->
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="play-circle bg-white-2 bg-blur flex justify-center items-center outline-0 rounded-full ease p-4">
|
||||
<svg
|
||||
viewBox="0 0 18 18"
|
||||
style="width:18px;height:18px;margin-left:3px"
|
||||
|
|
@ -49,6 +56,15 @@
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="cover-bottom h-full">
|
||||
|
||||
<slot name="cover-bottom">
|
||||
<!-- Bottom -->
|
||||
</slot>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<iframe
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ export default {
|
|||
|
||||
publicRuntimeConfig: {
|
||||
allUpdateSubscribe: process.env.ALL_UPDATE_SUBSCRIBE,
|
||||
testResultStore: process.env.TEST_RESULT_STORE
|
||||
testResultStore: process.env.TEST_RESULT_STORE,
|
||||
siteUrl: process.env.URL
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
|
|||
13047
package-lock.json
generated
13047
package-lock.json
generated
File diff suppressed because it is too large
Load diff
80
pages/embed/rich-results-player.vue
Normal file
80
pages/embed/rich-results-player.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<VideoPlayer
|
||||
v-if="youtubeId !== null"
|
||||
:video="video"
|
||||
class="w-100 h-100 absolute inset-0 flex justify-center items-center"
|
||||
>
|
||||
<template v-slot:cover-bottom>
|
||||
<div class="page-heading h-full flex items-end md:p-4">
|
||||
<h1 class="title text-xs text-left md:text-2xl font-bold">
|
||||
{{ video.name }}
|
||||
</h1>
|
||||
</div>
|
||||
</template>
|
||||
</VideoPlayer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import VideoPlayer from '~/components/video/player.vue'
|
||||
|
||||
export default {
|
||||
layout: 'embed',
|
||||
|
||||
components: {
|
||||
VideoPlayer
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
youtubeId: null,
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
video () {
|
||||
return {
|
||||
name: this.name,
|
||||
id: this.youtubeId,
|
||||
timestamps: [],
|
||||
thumbnail: {
|
||||
sizes: '(max-width: 640px) 100vw, 640px',
|
||||
srcset: `https://i.ytimg.com/vi/${this.youtubeId}/default.jpg 120w, https://i.ytimg.com/vi/${this.youtubeId}/mqdefault.jpg 320w, https://i.ytimg.com/vi/${this.youtubeId}/hqdefault.jpg 480w, https://i.ytimg.com/vi/${this.youtubeId}/sddefault.jpg 640w`,
|
||||
src: `https://i.ytimg.com/vi/${this.youtubeId}/default.jpg`
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
head() {
|
||||
return {
|
||||
title: 'Video - Does It ARM',
|
||||
// meta: [
|
||||
// // hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
// {
|
||||
// hid: 'description',
|
||||
// name: 'description',
|
||||
// content: 'My custom description'
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
// this.youtubeId = 'NDwmqJYJq9s'
|
||||
|
||||
// console.log('window', window)
|
||||
|
||||
if ( process.client ) {
|
||||
const urlParams = new URLSearchParams(window.location.search)
|
||||
|
||||
this.youtubeId = urlParams.get('youtube-id')
|
||||
|
||||
this.name = urlParams.get('name')
|
||||
}
|
||||
|
||||
// console.log('this.youtubeId', this.youtubeId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,14 +4,23 @@
|
|||
<VideoPlayer
|
||||
:video="video"
|
||||
class="pt-16"
|
||||
/>
|
||||
>
|
||||
|
||||
<template v-slot:cover-bottom>
|
||||
<div class="page-heading h-full flex items-end md:p-4">
|
||||
<h1 class="title text-xs text-left md:text-2xl font-bold">
|
||||
{{ video.name }}
|
||||
</h1>
|
||||
</div>
|
||||
</template>
|
||||
</VideoPlayer>
|
||||
|
||||
<div
|
||||
class="md:flex w-full justify-between space-y-4 md:space-y-0 md:px-10"
|
||||
>
|
||||
<h1 class="title text-lg md:text-2xl font-bold">
|
||||
<!-- <h1 class="title text-lg md:text-2xl font-bold">
|
||||
{{ video.name }}
|
||||
</h1>
|
||||
</h1> -->
|
||||
|
||||
<ChannelCredit
|
||||
:video="video"
|
||||
|
|
@ -88,13 +97,18 @@ function buildVideoStructuredData ( video, featuredApps ) {
|
|||
// console.log('video', video)
|
||||
|
||||
const thumbnailUrls = video.thumbnail.srcset.split(',').map( srcSetImage => {
|
||||
const [ imageUrl ] = srcSetImage.split(' ')
|
||||
const [ imageUrl ] = srcSetImage.trim().split(' ')
|
||||
|
||||
return imageUrl
|
||||
})
|
||||
|
||||
const featuredAppsString = makeFeaturedAppsString( featuredApps )
|
||||
|
||||
const embedUrl = new URL( `${ this.$config.siteUrl }/embed/rich-results-player` )
|
||||
|
||||
embedUrl.searchParams.append( 'youtube-id', video.id )
|
||||
embedUrl.searchParams.append( 'name', video.name )
|
||||
|
||||
return {
|
||||
"@context": "https://schema.org",
|
||||
// https://developers.google.com/search/docs/data-types/video
|
||||
|
|
@ -107,7 +121,7 @@ function buildVideoStructuredData ( video, featuredApps ) {
|
|||
"uploadDate": video.lastUpdated.raw,
|
||||
// "duration": "PT1M54S", // Need to updaet Youtube API Request for this
|
||||
// "contentUrl": "https://www.example.com/video/123/file.mp4",
|
||||
// "embedUrl": "https://www.example.com/embed/123",
|
||||
"embedUrl": embedUrl.href,
|
||||
// "interactionStatistic": {
|
||||
// "@type": "InteractionCounter",
|
||||
// "interactionType": { "@type": "http://schema.org/WatchAction" },
|
||||
|
|
@ -136,8 +150,6 @@ export default {
|
|||
payload
|
||||
} = data
|
||||
|
||||
|
||||
|
||||
// Manually get payload as fallback
|
||||
// Uncomment for dev
|
||||
// if ( payload === undefined ) {
|
||||
|
|
@ -151,12 +163,6 @@ export default {
|
|||
// payload = endpoint.payload
|
||||
// }
|
||||
|
||||
// console.log({
|
||||
// video,
|
||||
// featuredApps,
|
||||
// relatedVideos
|
||||
// })
|
||||
|
||||
return {
|
||||
video: payload.video,
|
||||
featuredApps: payload.featuredApps,
|
||||
|
|
@ -178,6 +184,9 @@ export default {
|
|||
getAppEndpoint
|
||||
},
|
||||
head() {
|
||||
const structuredData = buildVideoStructuredData.bind(this)( this.video, this.featuredApps )
|
||||
|
||||
|
||||
return {
|
||||
title: this.title,
|
||||
meta: [
|
||||
|
|
@ -206,7 +215,7 @@ export default {
|
|||
],
|
||||
|
||||
__dangerouslyDisableSanitizers: ['script'],
|
||||
script: [{ innerHTML: JSON.stringify( buildVideoStructuredData( this.video, this.featuredApps ) ), type: 'application/ld+json' }]
|
||||
script: [{ innerHTML: JSON.stringify( structuredData ), type: 'application/ld+json' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue