-
-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Setup video.js and add video player page
- Loading branch information
Showing
14 changed files
with
504 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
describe('video player page', () => { | ||
beforeEach(() => { | ||
cy.intercept('GET', '/channel.json', { fixture: 'channel/channel.json' }).as('getChannel') | ||
cy.intercept('GET', '/playlists/uploads_from_openzim_testing-917Q.json', { | ||
fixture: 'channel/playlists/uploads_from_openzim_testing-917Q.json' | ||
}).as('getUploads') | ||
cy.visit('/') | ||
cy.wait('@getChannel') | ||
cy.wait('@getUploads') | ||
}) | ||
|
||
it('loads the video and related information', () => { | ||
cy.intercept('GET', '/videos/timelapse-9Tgo.json', { | ||
fixture: 'channel//videos/timelapse-9Tgo.json' | ||
}).as('getVideo') | ||
cy.contains('.v-card-title ', 'Timelapse').click() | ||
cy.wait('@getVideo') | ||
|
||
cy.url().should('include', '/watch') | ||
cy.contains('.video-title', 'Timelapse') | ||
cy.contains('.video-date', 'Published on Jun 4, 2024') | ||
cy.contains('.video-channel', 'openZIM_testing') | ||
cy.contains('.video-description', 'This is a short video of a timelapse.') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
{ | ||
"id": "9TgosbGRsTk", | ||
"title": "Timelapse", | ||
"description": "This is a short video of a timelapse.", | ||
"author": { | ||
"channelId": "UC8elThf5TGMpQfQc_VE917Q", | ||
"channelTitle": "openZIM_testing", | ||
"channelDescription": "", | ||
"channelJoinedDate": "2024-06-04T13:30:16.232286Z", | ||
"profilePath": "channels/UC8elThf5TGMpQfQc_VE917Q/profile.jpg", | ||
"bannerPath": "channels/UC8elThf5TGMpQfQc_VE917Q/banner.jpg" | ||
}, | ||
"publicationDate": "2024-06-04T14:57:45Z", | ||
"videoPath": "videos/9TgosbGRsTk/video.webm", | ||
"thumbnailPath": "videos/9TgosbGRsTk/video.webp", | ||
"subtitlePath": null, | ||
"subtitleList": [], | ||
"duration": "PT11S" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
.vjs-youtube, | ||
.vjs-youtube video { | ||
border-radius: 8px; | ||
} | ||
|
||
.vjs-youtube .vjs-control-bar { | ||
border-bottom-left-radius: 8px; | ||
border-bottom-right-radius: 8px; | ||
} | ||
|
||
.vjs-youtube .vjs-poster img { | ||
border-radius: 8px; | ||
} | ||
|
||
.vjs-youtube .vjs-big-play-button { | ||
background-color: rgba(0, 0, 0, 0.7); | ||
border-radius: 1rem; | ||
border: none; | ||
} | ||
|
||
.vjs-youtube .vjs-big-play-button:hover, | ||
.vjs-youtube .vjs-big-play-button:focus, | ||
.vjs-youtube:hover .vjs-big-play-button { | ||
background-color: rgba(0, 0, 0, 0.8); | ||
} | ||
|
||
.vjs-youtube .vjs-control-bar, | ||
.vjs-youtube .vjs-menu-button-popup .vjs-menu .vjs-menu-content, | ||
.vjs-youtube .vjs-modal-dialog.vjs-text-track-settings { | ||
background-color: rgba(0, 0, 0, 0.7); | ||
} | ||
|
||
.vjs-youtube .vjs-progress-holder { | ||
background-color: rgba(255, 255, 255, 0.1); | ||
} | ||
|
||
.vjs-youtube .vjs-load-progress div { | ||
background-color: rgb(0, 0, 0, 0.3); | ||
} | ||
|
||
.vjs-youtube .vjs-modal-dialog-content select { | ||
color: rgb(190, 190, 190); | ||
} | ||
|
||
.vjs-youtube .vjs-track-settings-controls button { | ||
padding-right: 5px; | ||
padding-left: 5px; | ||
border-radius: 8px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<script setup lang="ts"> | ||
import { ref, onMounted, onBeforeUnmount } from 'vue' | ||
import videojs from 'video.js' | ||
import type Player from 'video.js/dist/types/player' | ||
import 'video.js/dist/video-js.css' | ||
import '@/assets/vjs-youtube.css' | ||
const props = defineProps({ | ||
options: { | ||
type: Object, | ||
default: () => ({}) | ||
} | ||
}) | ||
const videoPlayer = ref<HTMLVideoElement>() | ||
const player = ref<Player>() | ||
// Initialize video.js when the component is mounted | ||
onMounted(() => { | ||
if (videoPlayer.value) { | ||
player.value = videojs(videoPlayer.value, props.options) | ||
} | ||
}) | ||
// Destroy video.js when the component is unmounted | ||
onBeforeUnmount(() => { | ||
if (player.value) { | ||
player.value.dispose() | ||
} | ||
}) | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<video ref="videoPlayer" class="video-js vjs-youtube"></video> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<script setup lang="ts"> | ||
import AboutDialogButton from '@/components/channel/AboutDialogButton.vue' | ||
const props = defineProps({ | ||
profilePath: { | ||
type: String, | ||
required: true | ||
}, | ||
channelTitle: { | ||
type: String, | ||
required: true | ||
}, | ||
channelDescription: { | ||
type: String, | ||
required: true | ||
}, | ||
joinedDate: { | ||
type: String, | ||
required: true | ||
} | ||
}) | ||
</script> | ||
|
||
<template> | ||
<v-row> | ||
<v-col cols="6" class="d-flex align-center py-2"> | ||
<v-avatar size="50" class="border-thin"> | ||
<v-img :src="props.profilePath" /> | ||
</v-avatar> | ||
<span class="video-channel ml-2 font-weight-medium">{{ props.channelTitle }}</span> | ||
</v-col> | ||
<v-col cols="6" class="d-flex justify-end align-center"> | ||
<about-dialog-button | ||
:title="props.channelTitle" | ||
:description="props.channelDescription" | ||
:joined-date="props.joinedDate" | ||
/> | ||
</v-col> | ||
</v-row> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<script setup lang="ts"> | ||
const props = defineProps({ | ||
description: { | ||
type: String, | ||
required: true | ||
} | ||
}) | ||
</script> | ||
|
||
<template> | ||
<v-row> | ||
<v-col> | ||
<v-card class="border-thin py-2" rounded="lg" flat> | ||
<v-card-title class="text-subtitle-1 font-weight-medium">Description</v-card-title> | ||
<v-card-text class="video-description">{{ props.description }}</v-card-text> | ||
</v-card> | ||
</v-col> | ||
</v-row> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
<script setup lang="ts"> | ||
import { formatDate } from '@/utils/format-utils' | ||
const props = defineProps({ | ||
title: { | ||
type: String, | ||
required: true | ||
}, | ||
publicationDate: { | ||
type: String, | ||
required: true | ||
} | ||
}) | ||
</script> | ||
|
||
<template> | ||
<v-row> | ||
<v-col class="d-flex flex-column py-2"> | ||
<h2 class="video-title">{{ props.title }}</h2> | ||
<p class="video-date text-caption">Published on {{ formatDate(props.publicationDate) }}</p> | ||
</v-col> | ||
</v-row> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { WebpMachine, detectWebpSupport } from 'webp-hero' | ||
import 'webp-hero/dist-cjs/polyfills.js' | ||
|
||
export const triggerWebpPolyfill = () => { | ||
detectWebpSupport().then((support_webp) => { | ||
if (!support_webp) { | ||
const webpMachine = new WebpMachine() | ||
webpMachine.polyfillDocument() | ||
} | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.