diff --git a/.gitignore b/.gitignore index 48b49c94e..19008f347 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ **node_modules/ .DS_Store .pi/extensions/emdash-hook.ts +.factory/settings.json diff --git a/backend/src/api/project/content-types/project/schema.json b/backend/src/api/project/content-types/project/schema.json index bd0501795..e5a163898 100644 --- a/backend/src/api/project/content-types/project/schema.json +++ b/backend/src/api/project/content-types/project/schema.json @@ -116,6 +116,16 @@ } } }, + "video": { + "type": "component", + "repeatable": false, + "component": "video.video-embed", + "pluginOptions": { + "i18n": { + "localized": true + } + } + }, "related_projects": { "type": "relation", "relation": "oneToMany", diff --git a/backend/src/components/video/video-embed.json b/backend/src/components/video/video-embed.json new file mode 100644 index 000000000..82318e0dd --- /dev/null +++ b/backend/src/components/video/video-embed.json @@ -0,0 +1,22 @@ +{ + "collectionName": "components_video_video_embeds", + "info": { + "displayName": "video_embed", + "icon": "play", + "description": "" + }, + "options": {}, + "attributes": { + "url": { + "type": "string" + }, + "orientation": { + "type": "enumeration", + "enum": [ + "paysage", + "portrait" + ], + "default": "paysage" + } + } +} diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json index 5f7203831..f377af5e4 100644 --- a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json +++ b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json @@ -14,7 +14,7 @@ "name": "Apache 2.0", "url": "https://www.apache.org/licenses/LICENSE-2.0.html" }, - "x-generation-date": "2026-06-10T10:21:11.749Z" + "x-generation-date": "2026-06-29T16:26:56.132Z" }, "x-strapi-config": { "plugins": [ @@ -13437,6 +13437,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -16059,6 +16062,24 @@ } } }, + "VideoVideoEmbedComponent": { + "type": "object", + "properties": { + "id": { + "type": "number" + }, + "url": { + "type": "string" + }, + "orientation": { + "type": "string", + "enum": [ + "paysage", + "portrait" + ] + } + } + }, "KpiKpiComponent": { "type": "object", "properties": { @@ -17442,6 +17463,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -20964,6 +20988,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -23958,6 +23985,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -26711,6 +26741,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -32376,6 +32409,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -35221,6 +35257,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -40364,6 +40403,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -43312,6 +43354,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -47581,6 +47626,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -49852,6 +49900,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -51259,6 +51310,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -53343,6 +53397,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -54432,6 +54489,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -57779,6 +57839,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -61290,6 +61353,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -64613,6 +64679,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -67442,6 +67511,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -71210,6 +71282,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { @@ -74973,6 +75048,9 @@ "demo_video_embed": { "type": "string" }, + "video": { + "$ref": "#/components/schemas/VideoVideoEmbedComponent" + }, "related_projects": { "type": "array", "items": { diff --git a/backend/types/generated/components.d.ts b/backend/types/generated/components.d.ts index dcd1d1344..18ed3ebff 100644 --- a/backend/types/generated/components.d.ts +++ b/backend/types/generated/components.d.ts @@ -164,6 +164,20 @@ export interface TestimonialTestimonial extends Struct.ComponentSchema { }; } +export interface VideoVideoEmbed extends Struct.ComponentSchema { + collectionName: 'components_video_video_embeds'; + info: { + description: ''; + displayName: 'video_embed'; + icon: 'play'; + }; + attributes: { + orientation: Schema.Attribute.Enumeration<['paysage', 'portrait']> & + Schema.Attribute.DefaultTo<'paysage'>; + url: Schema.Attribute.String; + }; +} + declare module '@strapi/strapi' { export module Public { export interface ComponentSchemas { @@ -179,6 +193,7 @@ declare module '@strapi/strapi' { 'kpi.kpi-with-cta': KpiKpiWithCta; 'seo-meta.seo-meta': SeoMetaSeoMeta; 'testimonial.testimonial': TestimonialTestimonial; + 'video.video-embed': VideoVideoEmbed; } } } diff --git a/backend/types/generated/contentTypes.d.ts b/backend/types/generated/contentTypes.d.ts index f9cfc926d..90fbe18c8 100644 --- a/backend/types/generated/contentTypes.d.ts +++ b/backend/types/generated/contentTypes.d.ts @@ -1505,6 +1505,12 @@ export interface ApiProjectProject extends Struct.CollectionTypeSchema { localized: true; }; }>; + video: Schema.Attribute.Component<'video.video-embed', false> & + Schema.Attribute.SetPluginOptions<{ + i18n: { + localized: true; + }; + }>; volunteers: Schema.Attribute.Relation< 'manyToMany', 'api::volunteer.volunteer' diff --git a/frontend/src/app/[locale]/layout.tsx b/frontend/src/app/[locale]/layout.tsx index 99370f720..af1916da9 100644 --- a/frontend/src/app/[locale]/layout.tsx +++ b/frontend/src/app/[locale]/layout.tsx @@ -3,7 +3,6 @@ import { hasLocale, NextIntlClientProvider } from 'next-intl'; import { getTranslations } from 'next-intl/server'; import { DM_Mono } from 'next/font/google'; import { notFound } from 'next/navigation'; -import Script from 'next/script'; import { routing } from '@/i18n/routing'; import Footer from './_partials/footer'; import Header from './_partials/header'; @@ -71,14 +70,13 @@ export default async function RootLayout({ return ( - `, + url: 'https://www.youtube.com/watch?v=k6Z1yqrITCc', + format: 'portrait', }, }; -export const DailymotionVideo: Story = { +export const WithRawEmbed: Story = { args: { - video: `
`, + video: ``, }, }; diff --git a/frontend/src/components/molecules/BannerVideo/BannerVideo.tsx b/frontend/src/components/molecules/BannerVideo/BannerVideo.tsx index f15b8ab0e..47e6e9308 100644 --- a/frontend/src/components/molecules/BannerVideo/BannerVideo.tsx +++ b/frontend/src/components/molecules/BannerVideo/BannerVideo.tsx @@ -1,30 +1,76 @@ import clsx from 'clsx'; +function getYoutubeVideoId(url: string): string | null { + const patterns = [ + /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})(?:[?&]|$)/, + /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})(?:[?&]|$)/, + ]; + for (const pattern of patterns) { + const match = url.match(pattern); + if (match) return match[1]; + } + return null; +} + +function isShortsUrl(url: string): boolean { + return /youtube\.com\/shorts\//.test(url); +} + export type BannerVideoProps = { video?: string; + url?: string; altVideo?: string; + format?: 'paysage' | 'portrait'; className?: string; }; const BannerVideo: React.FC = ({ video, + url, altVideo, + format, className, ...props }) => { + const resolvedFormat = format ?? (url && isShortsUrl(url) ? 'portrait' : 'paysage'); + + if (url) { + const videoId = getYoutubeVideoId(url); + if (!videoId) return null; + + const embedUrl = `https://www.youtube.com/embed/${videoId}`; + + return ( +
+