Skip to content
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

Feature: Autoplay on Hover supported M3U8 and MPD Videos #709

Closed
wants to merge 4 commits into from
Closed

Feature: Autoplay on Hover supported M3U8 and MPD Videos #709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
851fd34
added m3u8 and mpd video samples
Rajgupta36 May 26, 2024
537be0d
Added video player supporting m3u8 and mpd videos
Rajgupta36 May 26, 2024
b83945b
implement debouncing
Rajgupta36 May 26, 2024
6be8ff1
Merge branch 'main' into main
Rajgupta36 Jun 15, 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
190 changes: 159 additions & 31 deletions prisma/seed.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,24 @@ async function seedContent() {
parentId: folderId,
commentsCount: 0,
},
{
type: 'video',
title: 'test video 2 for week 1',
hidden: false,
thumbnail:
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
parentId: folderId,
commentsCount: 0,
},
{
type: 'video',
title: 'test video-3 for week 1',
hidden: false,
thumbnail:
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
parentId: folderId,
commentsCount: 0,
},
];

const createdContent = await db.content.createMany({ data: contentData });
Expand Down Expand Up @@ -181,37 +199,147 @@ async function seedNotionMetadata() {

async function seedVideoMetadata() {
try {
await db.videoMetadata.create({
data: {
id: 1,
contentId: 3,
video_1080p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
slides:
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
},
await db.videoMetadata.createMany({
data: [
{
id: 1,
contentId: 3,
video_1080p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_1080p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_720p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
slides:
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
},
{
id: 2,
contentId: 4,
video_1080p_mp4_1:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_1080p_mp4_2:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_1080p_mp4_3:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_1080p_mp4_4:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_1080p_1:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_1080p_2:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_1080p_3:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_1080p_4:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_720p_mp4_1:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_720p_mp4_2:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_720p_mp4_3:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_720p_mp4_4:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_720p_1:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_720p_2:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_720p_3:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_720p_4:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_360p_mp4_1:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_360p_mp4_2:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_360p_mp4_3:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_360p_mp4_4:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_360p_1:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_360p_2:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_360p_3:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
video_360p_4:
'https://live-par-2-cdn-alt.livepush.io/live/bigbuckbunnyclip/index.m3u8',
slides:
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
},
{
id: 3,
contentId: 5,
video_1080p_mp4_1:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_1080p_mp4_2:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_1080p_mp4_3:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_1080p_mp4_4:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_1080p_1:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_1080p_2:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_1080p_3:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_1080p_4:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_720p_mp4_1:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_720p_mp4_2:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_720p_mp4_3:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_720p_mp4_4:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_720p_1:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_720p_2:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_720p_3:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_720p_4:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_360p_mp4_1:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_360p_mp4_2:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_360p_mp4_3:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_360p_mp4_4:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_360p_1:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_360p_2:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_360p_3:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
video_360p_4:
'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
slides:
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
},
],
});
} catch (error) {
console.error('Error seeding video metadata:', error);
Expand Down
21 changes: 15 additions & 6 deletions src/actions/videopreview/videoPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,24 @@ import db from '@/db';
export default async function VideoPreview({
contentId,
}: {
contentId: number;
contentId: number | undefined;
}) {
if (!contentId) return null;
const videoMetadata = await db.videoMetadata.findFirst({
where: { contentId },
select: { video_360p_1: true },
select: {
video_360p_1: true,
video_360p_2: true,
video_360p_3: true,
video_360p_4: true,
},
});
if (!videoMetadata) return null;
const videoUrl =
videoMetadata.video_360p_1 ||
videoMetadata.video_360p_2 ||
videoMetadata.video_360p_3 ||
videoMetadata.video_360p_4;

if (videoMetadata) {
return videoMetadata.video_360p_1;
}
return null;
return videoUrl;
}
3 changes: 2 additions & 1 deletion src/components/ContentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ export const ContentCard = ({
{type === 'video' && (
<div className="relative overflow-hidden rounded-md">
<VideoThumbnail
contentId={contentId ?? 0}
//@ts-ignore
contentId={contentId}
imageUrl={
'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png'
}
Expand Down
Loading
Loading