bennot/church-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feature: youtube player

Browse source
This commit is contained in:
Benno Tielen 2025-11-20 12:01:26 +01:00
parent 4d562eab26
commit 550fad876a
11 changed files with 7291 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/collections/Blog.ts
View file

@ -6,6 +6,7 @@ import { ContactformBlock } from '@/collections/blocks/Contactform'
import { GalleryBlock } from '@/collections/blocks/Gallery'
import { DonationBlock } from '@/collections/blocks/Donation'
import { ButtonBlock } from '@/collections/blocks/Button'
import { YoutubePlayerBlock } from '@/collections/blocks/YoutubePlayer'
export const Blog: CollectionConfig = {
@ -60,6 +61,7 @@ export const Blog: CollectionConfig = {
DonationBlock,
ContactformBlock,
GalleryBlock,
YoutubePlayerBlock,
ButtonBlock,
],
required: true,

2
src/collections/Groups.ts
View file

@ -7,6 +7,7 @@ import { DocumentBlock } from '@/collections/blocks/Document'
import { lexicalHTML } from '@payloadcms/richtext-lexical'
import { DonationBlock } from '@/collections/blocks/Donation'
import { ButtonBlock } from '@/collections/blocks/Button'
import { YoutubePlayerBlock } from '@/collections/blocks/YoutubePlayer'
export const Groups: CollectionConfig = {
slug: 'group',
@ -69,6 +70,7 @@ export const Groups: CollectionConfig = {
GalleryBlock,
DocumentBlock,
DonationBlock,
YoutubePlayerBlock,
ContactformBlock,
ButtonBlock
]

20
src/collections/blocks/YoutubePlayer.ts Normal file
View file

@ -0,0 +1,20 @@
import { Block } from 'payload'
export const YoutubePlayerBlock: Block = {
slug: 'youtube',
labels: {
singular: {
de: 'Youtube'
},
plural: {
de: 'Youtube'
}
},
fields: [
{
name: 'youtube_id',
type: 'text',
required: true
}
]
}

15
src/components/YoutubePlayer/YoutubePlayer.stories.tsx Normal file
View file

@ -0,0 +1,15 @@
import { Meta, StoryObj } from '@storybook/react'
import { YoutubePlayer } from './YoutubePlayer'
const meta: Meta<typeof YoutubePlayer> = {
component: YoutubePlayer,
}
type Story = StoryObj<typeof YoutubePlayer>;
export default meta
export const Default: Story = {
args: {
id: "VMWnjhy2Mqo"
},
}

16
src/components/YoutubePlayer/YoutubePlayer.tsx Normal file
View file

@ -0,0 +1,16 @@
import styles from './styles.module.scss'
type YoutubePlayerProps = {
id: string
}
export const YoutubePlayer = ({id}: YoutubePlayerProps) => {
return (
<div className={styles.container}>
<iframe src={`https://www.youtube-nocookie.com/embed/${id}`}
title="YouTube video player" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
</div>
)
}

10
src/components/YoutubePlayer/styles.module.scss Normal file
View file

@ -0,0 +1,10 @@
.container {
display: flex;
justify-content: left;
}
.container iframe {
aspect-ratio: 16 / 9;
width: 100% !important;
max-width: 560px;
}

9
src/compositions/Blocks/Blocks.tsx
View file

@ -7,6 +7,7 @@ import { ContactSection } from '@/compositions/ContactSection/ContactSection'
import { Gallery } from '@/components/Gallery/Gallery'
import { transformGallery } from '@/utils/dto/gallery'
import { DonationForm } from '@/components/DonationForm/DonationForm'
import { YoutubePlayer } from '@/components/YoutubePlayer/YoutubePlayer'
type BlocksProps = {
content: Blog['content']['content']
@ -65,6 +66,14 @@ export function Blocks({ content }: BlocksProps) {
</Section>
}
if (item.blockType === "youtube") {
return <Section key={item.id} padding={"small"}>
<Container>
<YoutubePlayer id={item.youtube_id} />
</Container>
</Section>
}
if (item.blockType === "button") {
return <Section key={item.id} padding={"small"}>
<Container>

7139
src/migrations/20251118_150529_youtube_player.json Normal file
View file

File diff suppressed because it is too large Load diff

45
src/migrations/20251118_150529_youtube_player.ts Normal file
View file

@ -0,0 +1,45 @@
import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
await db.execute(sql`
CREATE TABLE "blog_blocks_youtube" (
"_order" integer NOT NULL,
"_parent_id" uuid NOT NULL,
"_path" text NOT NULL,
"id" varchar PRIMARY KEY NOT NULL,
"youtube_id" varchar NOT NULL,
"block_name" varchar
);
CREATE TABLE "group_blocks_youtube" (
"_order" integer NOT NULL,
"_parent_id" uuid NOT NULL,
"_path" text NOT NULL,
"id" varchar PRIMARY KEY NOT NULL,
"youtube_id" varchar NOT NULL,
"block_name" varchar
);
ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2025-11-23T15:05:28.806Z';
ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2025-11-23T15:05:28.910Z';
ALTER TABLE "classifieds" ALTER COLUMN "until" SET DEFAULT '2025-12-18T15:05:28.976Z';
ALTER TABLE "blog_blocks_youtube" ADD CONSTRAINT "blog_blocks_youtube_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."blog"("id") ON DELETE cascade ON UPDATE no action;
ALTER TABLE "group_blocks_youtube" ADD CONSTRAINT "group_blocks_youtube_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."group"("id") ON DELETE cascade ON UPDATE no action;
CREATE INDEX "blog_blocks_youtube_order_idx" ON "blog_blocks_youtube" USING btree ("_order");
CREATE INDEX "blog_blocks_youtube_parent_id_idx" ON "blog_blocks_youtube" USING btree ("_parent_id");
CREATE INDEX "blog_blocks_youtube_path_idx" ON "blog_blocks_youtube" USING btree ("_path");
CREATE INDEX "group_blocks_youtube_order_idx" ON "group_blocks_youtube" USING btree ("_order");
CREATE INDEX "group_blocks_youtube_parent_id_idx" ON "group_blocks_youtube" USING btree ("_parent_id");
CREATE INDEX "group_blocks_youtube_path_idx" ON "group_blocks_youtube" USING btree ("_path");`)
}
export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
await db.execute(sql`
ALTER TABLE "blog_blocks_youtube" DISABLE ROW LEVEL SECURITY;
ALTER TABLE "group_blocks_youtube" DISABLE ROW LEVEL SECURITY;
DROP TABLE "blog_blocks_youtube" CASCADE;
DROP TABLE "group_blocks_youtube" CASCADE;
ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2025-09-21T07:52:17.724Z';
ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2025-09-21T07:52:17.817Z';
ALTER TABLE "classifieds" ALTER COLUMN "until" SET DEFAULT '2025-10-15T07:52:17.878Z';`)
}

8
src/migrations/index.ts
View file

@ -12,6 +12,7 @@ import * as migration_20250827_093559_magazine from './20250827_093559_magazine'
import * as migration_20250827_105121_new_payload_version from './20250827_105121_new_payload_version';
import * as migration_20250909_075603 from './20250909_075603';
import * as migration_20250915_075218 from './20250915_075218';
import * as migration_20251118_150529_youtube_player from './20251118_150529_youtube_player';
export const migrations = [
{
@ -82,6 +83,11 @@ export const migrations = [
{
up: migration_20250915_075218.up,
down: migration_20250915_075218.down,
name: '20250915_075218'
name: '20250915_075218',
},
{
up: migration_20251118_150529_youtube_player.up,
down: migration_20251118_150529_youtube_player.down,
name: '20251118_150529_youtube_player'
},
];

26
src/payload-types.ts
View file

@ -386,6 +386,12 @@ export interface Blog {
blockName?: string | null;
blockType: 'gallery';
}
| {
youtube_id: string;
id?: string | null;
blockName?: string | null;
blockType: 'youtube';
}
| {
text: string;
url: string;
@ -541,6 +547,12 @@ export interface Group {
blockName?: string | null;
blockType: 'donation';
}
| {
youtube_id: string;
id?: string | null;
blockName?: string | null;
blockType: 'youtube';
}
| {
title: string;
description: string;
@ -904,6 +916,13 @@ export interface BlogSelect<T extends boolean = true> {
id?: T;
blockName?: T;
};
youtube?:
| T
| {
youtube_id?: T;
id?: T;
blockName?: T;
};
button?:
| T
| {
@ -1044,6 +1063,13 @@ export interface GroupSelect<T extends boolean = true> {
id?: T;
blockName?: T;
};
youtube?:
| T
| {
youtube_id?: T;
id?: T;
blockName?: T;
};
contactform?:
| T
| {