From 608629307f3aeae044fdd0fe6870d915f0ed19ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= Date: Thu, 21 Dec 2023 15:42:36 +0100 Subject: [PATCH] Closes #32 Add youtube video on Homepage + remove Unused video Frame + FIX Video Inlaid in Cookie Notice --- .../Bo/Homepage/UpdateHomepageRequest.php | 11 ++- app/Models/Homepage.php | 15 +++- app/Rules/IsValidYoutubeId.php | 33 +++++++++ ...2_21_132810_add_homepage_youtube_video.php | 43 ++++++++++++ resources/lang/en/validation.php | 3 + resources/lang/fr/validation.php | 5 ++ resources/ts/fo/base/common.ts | 68 ------------------- .../views/bo/pages/homepages/form.blade.php | 56 ++++++++++++++- .../views/fo/modules/video-frame.blade.php | 14 ---- resources/views/fo/pages/home.blade.php | 23 +++++-- resources/views/vendor/cn-cookies.blade.php | 41 +++++++++-- 11 files changed, 218 insertions(+), 94 deletions(-) create mode 100644 app/Rules/IsValidYoutubeId.php create mode 100644 database/migrations/2023_12_21_132810_add_homepage_youtube_video.php delete mode 100644 resources/views/fo/modules/video-frame.blade.php diff --git a/app/Http/Requests/Bo/Homepage/UpdateHomepageRequest.php b/app/Http/Requests/Bo/Homepage/UpdateHomepageRequest.php index 0b145fd..daa7f4a 100644 --- a/app/Http/Requests/Bo/Homepage/UpdateHomepageRequest.php +++ b/app/Http/Requests/Bo/Homepage/UpdateHomepageRequest.php @@ -2,6 +2,7 @@ namespace App\Http\Requests\Bo\Homepage; +use App\Rules\IsValidYoutubeId; use App\Traits\Requests\HasPicture; use Illuminate\Foundation\Http\FormRequest; @@ -26,6 +27,9 @@ class UpdateHomepageRequest extends FormRequest */ protected function prepareForValidation() { + $this->merge([ + 'display_video' => $this->boolean('display_video') + ]); $this->mergePicture('picture'); } @@ -44,10 +48,15 @@ class UpdateHomepageRequest extends FormRequest 'picture_title' => 'required|string|between:3,255', 'presentation_title' => 'required|string|between:3,255', 'presentation_content' => 'required|string', + 'display_video' => 'present|boolean', + 'youtube_video_id' => [ + 'nullable', 'required_if:display_video,true', + new IsValidYoutubeId() + ], ]; return \array_merge( $rules, - $this->pictureRules('picture', 640, 390, 640, 390, false), + $this->pictureRules('picture', 640, 390, 640, 390, true, requiredIf: 'display_video,false'), ); } diff --git a/app/Models/Homepage.php b/app/Models/Homepage.php index 313c975..1f05782 100644 --- a/app/Models/Homepage.php +++ b/app/Models/Homepage.php @@ -11,9 +11,11 @@ use Illuminate\Database\Eloquent\Model; * @property string $title_part1 Title part 1. * @property string $title_part2 Title part 2. * @property string $title_part3 Title part 3. - * @property string $picture Path of the picture (640px * 390px). + * @property string|null $picture Path of the picture (640px * 390px). * @property string $picture_alt Picture alt attribute. * @property string $picture_title Picture title attribute. + * @property string $youtube_video_id The youtube video Id. + * @property boolean $display_video Wether to display video or picture. * @property string $presentation_title Presentation title. * @property string $presentation_content WYSIWYG - Presentation content. * @property-read \Carbon\Carbon $created_at Created date. @@ -38,6 +40,17 @@ class Homepage extends Model 'picture_title', 'presentation_title', 'presentation_content', + 'youtube_video_id', + 'display_video', + ]; + + /** + * The attributes that should be cast. + * + * @var string[] + */ + protected $casts = [ + 'display_video' => 'bool' ]; /** diff --git a/app/Rules/IsValidYoutubeId.php b/app/Rules/IsValidYoutubeId.php new file mode 100644 index 0000000..c1db71f --- /dev/null +++ b/app/Rules/IsValidYoutubeId.php @@ -0,0 +1,33 @@ +isMatch('/[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]/')) { + $fail(trans('validation.youtube_id')); + } + } +} diff --git a/database/migrations/2023_12_21_132810_add_homepage_youtube_video.php b/database/migrations/2023_12_21_132810_add_homepage_youtube_video.php new file mode 100644 index 0000000..31069fc --- /dev/null +++ b/database/migrations/2023_12_21_132810_add_homepage_youtube_video.php @@ -0,0 +1,43 @@ +string('picture')->nullable()->change() + ->comment('Path de l\'image de la page d\'accueil (640px * 390px)'); + $table->string('youtube_video_id')->after('picture_title') + ->nullable() + ->default(null) + ->comment('L\ídentifiant de la vidéo Youtube'); + $table->boolean('display_video')->after('youtube_video_id') + ->default(false) + ->comment('Afficher la video ou l\'image'); + }); + } + + /** + * Reverse the migrations. + * + * @return void + */ + public function down(): void + { + Schema::table('homepages', function (Blueprint $table) { + $table->string('picture')->change() + ->comment('Path de l\'image de la page d\'accueil (640px * 390px)'); + $table->dropColumn('youtube_video_id'); + $table->dropColumn('display_video'); + }); + } +}; diff --git a/resources/lang/en/validation.php b/resources/lang/en/validation.php index dfe075d..ce3c3cf 100644 --- a/resources/lang/en/validation.php +++ b/resources/lang/en/validation.php @@ -215,6 +215,9 @@ return [ 'year' => 'year', 'url' => 'URL', ], + + 'youtube_id' => ':attribute must be a valid Youtube video ID', + 'custom' => [ 'of_the' => [ 'male' => 'of the ', diff --git a/resources/lang/fr/validation.php b/resources/lang/fr/validation.php index bc9cd54..7d70f5a 100644 --- a/resources/lang/fr/validation.php +++ b/resources/lang/fr/validation.php @@ -217,6 +217,9 @@ return [ 'year' => 'année', 'url' => 'URL', ], + + 'youtube_id' => ':attribute doit être un ID de vidéo Youtube valide', + 'custom' => [ 'of_the' => [ 'male' => 'du ', @@ -287,5 +290,7 @@ return [ 'unpublish_at' => 'date de fin de publication', 'unpublish_at' => 'date de fin de publication', 'video_id' => 'ID de la vidéo', + 'youtube_video_id' => 'ID de la vidéo youtube', + 'display_video' => 'affichage de la vidéo', ], ]; diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts index 6dcbba1..774207c 100644 --- a/resources/ts/fo/base/common.ts +++ b/resources/ts/fo/base/common.ts @@ -2,74 +2,6 @@ import Swiper from "swiper"; import { Navigation } from "swiper/modules"; document.addEventListener("DOMContentLoaded", function () { - // * Video frames. - const videoFrameList = document.querySelectorAll( - ".video-frame" - ) as NodeListOf; - for (const videoLink of videoFrameList) { - if (!videoLink.dataset.type) { - throw new Error("Missing dataset type"); - } - if (!videoLink.dataset.frame) { - throw new Error("Missing dataset frame"); - } - // @ts-ignore - window.__CN_VIDEO = window.__CN_VIDEO ?? {}; - - const newIframe = document.createElement("iframe"); - newIframe.frameBorder = "0"; - newIframe.allow = "fullscreen"; - newIframe.width = "1920px"; - newIframe.height = "1080px"; - newIframe.setAttribute("allowfullscreen", "allowfullscreen"); - - // @ts-ignore - const instance = new FsLightbox(); - instance.props.sources = [newIframe]; - - setTimeout(() => { - videoLink.addEventListener("click", (e) => { - e.preventDefault(); - - // * This comes fslightbox lib - // @ts-ignore - instance.open(); - setTimeout(function () { - // @ts-ignore - newIframe.src = window.__CN_VIDEO[videoLink.dataset.type] - ? String(videoLink.href) - : String(videoLink.dataset.frame); - }, 50); - return false; - }); - }, 300); - } - // * Video inlaid. - const videoInlaidList = document.querySelectorAll( - ".video-inlaid" - ) as NodeListOf; - for (const videoLink of videoInlaidList) { - if (!videoLink.getAttribute("type")) { - throw new Error("Missing attribute type"); - } - if (!videoLink.getAttribute("href")) { - throw new Error("Missing attribute href"); - } - // @ts-ignore - if (window.__CN_VIDEO[videoLink.getAttribute("type")]) { - videoLink.innerHTML = ""; - const newIframe = document.createElement("iframe"); - newIframe.frameBorder = "0"; - newIframe.allow = "fullscreen"; - newIframe.width = "1920px"; - newIframe.height = "1080px"; - newIframe.classList.add("w-100"); - newIframe.classList.add("h-100"); - newIframe.setAttribute("allowfullscreen", "allowfullscreen"); - newIframe.src = String(videoLink.getAttribute("href")); - videoLink.appendChild(newIframe); - } - } // SWIPER const swiperConfig = { "swiper-homepage-news": { diff --git a/resources/views/bo/pages/homepages/form.blade.php b/resources/views/bo/pages/homepages/form.blade.php index 727ad26..714fbc4 100644 --- a/resources/views/bo/pages/homepages/form.blade.php +++ b/resources/views/bo/pages/homepages/form.blade.php @@ -162,13 +162,67 @@ 'widthpx' => '640px', 'heightpx' => '390px', ]), - 'required' => true, + 'required' => false, 'preview' => true, ]) + + {{-- YOUTUBE VIDEO ID --}} +
+
+ {{ Str::ucfirst(__('validation.custom.youtube_video_id')) }} +
+
+ @include('bo.partials.inputs.varchar', [ + 'id' => 'homepageVideoUrl', + 'label' => __(':field :inter:model', [ + 'field' => Str::ucfirst(__('validation.custom.youtube_video_id')), + 'inter' => __('validation.custom.of_the.female'), + 'model' => __('models.classes.homepage'), + ]), + 'hasWordCounter' => true, + 'name' => 'youtube_video_id', + 'required' => false, + 'model' => $homepageModel ?? null, + 'helper' => + __('validation.between.string', [ + 'attribute' => __(':field :inter:model', [ + 'field' => __('validation.custom.youtube_video_id'), + 'inter' => __('validation.custom.of_the.female'), + 'model' => __('models.classes.homepage'), + ]), + 'min' => 11, + 'max' => 12, + ]) . __("Doit être l\'id de la vidéo Youtube eg:\u{00A0}(MH19CxWqluY)."), + 'placeholder' => 'MH19CxWqluY', + ]) +
+
+
+
+ + {{-- DISPLAY VIDEO --}} +
+
+ {{ Str::ucfirst(__('validation.custom.display_video')) }} +
+
+ @include('bo.partials.inputs.tinyint-boolean', [ + 'id' => 'homepageDisplayVideo', + 'name' => 'display_video', + 'model' => $homepageModel ?? null, + 'label' => __('validation.custom.display_video'), + 'label' => __('crud.minicrud.visibility_label'), + 'helper' => __('crud.minicrud.visibility_helper'), + ]) +
+
+
+
+ {{-- PRESENTATION TITLE --}}
diff --git a/resources/views/fo/modules/video-frame.blade.php b/resources/views/fo/modules/video-frame.blade.php deleted file mode 100644 index 6694fc6..0000000 --- a/resources/views/fo/modules/video-frame.blade.php +++ /dev/null @@ -1,14 +0,0 @@ -@php $uniqueID = uniqid(); @endphp - - {{ $alt }} - - diff --git a/resources/views/fo/pages/home.blade.php b/resources/views/fo/pages/home.blade.php index bfc474e..4f2d4fd 100644 --- a/resources/views/fo/pages/home.blade.php +++ b/resources/views/fo/pages/home.blade.php @@ -9,8 +9,8 @@
-
-
+
+

{{ $homepageModel->title_part1 }}

@@ -19,9 +19,22 @@

{{ Str::of($homepageModel->title_part3)->ucFirst()->value() }}

-
- {{ $homepageModel->picture_alt }} +
+ @if ($homepageModel->display_video) +
+
+ + + {{ __('cookie-notice.custom.youtube.warning') }} + + +
+
+ @else + {{ $homepageModel->picture_alt }} + @endif
diff --git a/resources/views/vendor/cn-cookies.blade.php b/resources/views/vendor/cn-cookies.blade.php index 1dc7fe0..856cc66 100644 --- a/resources/views/vendor/cn-cookies.blade.php +++ b/resources/views/vendor/cn-cookies.blade.php @@ -43,14 +43,47 @@ $cookies['youtube'] = [ $cookies['youtube']['script'] = <<