Merge branch 'issue-32' into 'develop'

Fixes #32 Add Home video vimeo possibility playing as loop except for youtube (need playlist)

See merge request ldc-web/projets/agis!33
This commit is contained in:
Vincent BRIDIER 2024-02-09 12:01:42 +00:00
commit 28625f2bf2
16 changed files with 237 additions and 41 deletions

View file

@ -68,6 +68,7 @@ class SecureHeaders
'https://recaptcha.google.com/recaptcha/',
'https://www.google.com/maps/',
'https://www.youtube.com',
'https://player.vimeo.com',
]) . ';',
"font-src 'self' data: " . \implode(' ', [
// * VITE DEV

View file

@ -2,6 +2,7 @@
namespace App\Http\Requests\Bo\Homepage;
use App\Rules\IsValidVimeoId;
use App\Rules\IsValidYoutubeId;
use App\Traits\Requests\HasPicture;
use Illuminate\Foundation\Http\FormRequest;
@ -49,9 +50,14 @@ class UpdateHomepageRequest extends FormRequest
'presentation_title' => 'required|string|between:3,255',
'presentation_content' => 'required|string',
'display_video' => 'present|boolean',
'youtube_video_id' => [
'video_id' => [
'nullable', 'required_if:display_video,true',
new IsValidYoutubeId()
function (string $attribute, mixed $value, \Closure $fail) {
if (!IsValidYoutubeId::validates($value) and !IsValidVimeoId::validates($value)) {
(new IsValidYoutubeId())->validate($attribute, $value, $fail);
(new IsValidVimeoId())->validate($attribute, $value, $fail);
}
}
],
];
return \array_merge(
@ -68,6 +74,7 @@ class UpdateHomepageRequest extends FormRequest
public function attributes(): array
{
return [
'video_id' => trans('validation.custom.video_id'),
'title_part1' => trans('validation.custom.title_part1'),
'title_part2' => trans('validation.custom.title_part2'),
'title_part3' => trans('validation.custom.title_part3'),

View file

@ -2,6 +2,8 @@
namespace App\Http\Requests\Bo\Joinuspage;
use App\Rules\IsValidVimeoId;
use App\Rules\IsValidYoutubeId;
use Illuminate\Foundation\Http\FormRequest;
class UpdateJoinuspageRequest extends FormRequest
@ -24,7 +26,15 @@ class UpdateJoinuspageRequest extends FormRequest
public function rules()
{
return [
'video_id' => 'required|string|regex:%([^"&?\/\s]{11})%i',
'video_id' => [
'required', 'string',
function (string $attribute, mixed $value, \Closure $fail) {
if (!IsValidYoutubeId::validates($value) and !IsValidVimeoId::validates($value)) {
(new IsValidYoutubeId())->validate($attribute, $value, $fail);
(new IsValidVimeoId())->validate($attribute, $value, $fail);
}
}
],
];
}

View file

@ -14,7 +14,7 @@ use Illuminate\Database\Eloquent\Model;
* @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 string $video_id The youtube or vimeo 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.
@ -40,7 +40,7 @@ class Homepage extends Model
'picture_title',
'presentation_title',
'presentation_content',
'youtube_video_id',
'video_id',
'display_video',
];

View file

@ -0,0 +1,43 @@
<?php
namespace App\Rules;
use Illuminate\Contracts\Validation\ValidationRule;
use Illuminate\Support\Str;
/**
* Validate a vimeo ID regex
*
* @package App\Rules
*/
class IsValidVimeoId implements ValidationRule
{
/**
* Run the validation rule.
*
* @param string $attribute
* @param mixed $value
* @param \Closure(string):\Illuminate\Translation\PotentiallyTranslatedString $fail
* @return void
* @phpcs:disable Generic.CodeAnalysis.UnusedFunctionParameter.FoundInImplementedInterfaceBeforeLastUsed
* @phpcs:disable Squiz.Commenting.FunctionComment.IncorrectTypeHint
*/
public function validate(string $attribute, mixed $value, \Closure $fail): void
{
// phpcs:enable
if (!self::validates($value)) {
$fail(trans('validation.vimeo_id'));
}
}
/**
* Validate a value
*
* @param mixed $value
* @return boolean
*/
public static function validates(mixed $value): bool
{
return Str::of($value)->isMatch('/^[0-9]{8,10}$/');
}
}

View file

@ -26,8 +26,19 @@ class IsValidYoutubeId implements ValidationRule
public function validate(string $attribute, mixed $value, \Closure $fail): void
{
// phpcs:enable
if (!Str::of($value)->isMatch('/[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]/')) {
if (!self::validates($value)) {
$fail(trans('validation.youtube_id'));
}
}
/**
* Validate a value
*
* @param mixed $value
* @return boolean
*/
public static function validates(mixed $value): bool
{
return Str::of($value)->isMatch('/^[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]$/');
}
}

View file

@ -0,0 +1,32 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up(): void
{
Schema::table('homepages', function (Blueprint $table) {
$table->renameColumn('youtube_video_id', 'video_id');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down(): void
{
Schema::table('homepages', function (Blueprint $table) {
$table->renameColumn('video_id', 'youtube_video_id');
});
}
};

View file

@ -36,6 +36,12 @@ return [
'labelLink' => 'Learn more',
'warning' => 'You must accept cookies to view this video',
],
'vimeo' => [
'name' => 'Vimeo',
'description' => 'Les cookies placés via les services de partage de vidéos sont destinés à permettre à l’utilisateur de visionner des contenus multimédias directement sur le site.',
'labelLink' => 'En apprendre plus',
'warning' => 'Vous devez accepter les cookies pour visionner cette vidéo',
],
'matomo' => [
'title' => 'Matomo',
'description' => 'Audience measurement services are used to generate traffic statistics, which are useful for improving the site.',

View file

@ -217,6 +217,7 @@ return [
],
'youtube_id' => ':attribute must be a valid Youtube video ID',
'vimeo_id' => ':attribute must be a valid Vimeo video ID',
'custom' => [
'of_the' => [
@ -230,7 +231,6 @@ return [
'attribute_title' => 'title attribute',
'background' => 'background',
'category' => 'category',
'category' => 'category',
'civility' => 'civility',
'cooking_advice' => 'cooking advice',
'description' => 'description',
@ -272,7 +272,6 @@ return [
'product_name' => 'product name',
'publication' => 'publication',
'publish_at' => 'publication date',
'publish_at' => 'publication date',
'send_data' => 'autorization to send data',
'seo_description' => 'SEO description',
'seo_title' => 'SEO title',
@ -287,7 +286,8 @@ return [
'title_part2' => 'title part two',
'title_part3' => 'title part three',
'unpublish_at' => 'end of publication date',
'unpublish_at' => 'end of publication date',
'video_id' => 'ID of the video',
'youtube_video_id' => 'ID of the youtube video',
'vimeo_video_id' => 'ID of the vimeo video',
],
];

View file

@ -36,6 +36,12 @@ return [
'labelLink' => 'En apprendre plus',
'warning' => 'Vous devez accepter les cookies pour visionner cette vidéo',
],
'vimeo' => [
'name' => 'Vimeo',
'description' => 'Les cookies placés via les services de partage de vidéos sont destinés à permettre à l’utilisateur de visionner des contenus multimédias directement sur le site.',
'labelLink' => 'En apprendre plus',
'warning' => 'Vous devez accepter les cookies pour visionner cette vidéo',
],
'matomo' => [
'title' => 'Matomo',
'description' => 'Les services de mesure d’audience permettent de générer des statistiques de fréquentation utiles à l’amélioration du site.',

View file

@ -219,6 +219,7 @@ return [
],
'youtube_id' => ':attribute doit être un ID de vidéo Youtube valide',
'vimeo_id' => ':attribute doit être un ID de vidéo Vimeo valide',
'custom' => [
'of_the' => [
@ -232,7 +233,6 @@ return [
'attribute_title' => 'attribut title',
'background' => 'fond',
'category' => 'catégorie',
'category' => 'catégorie',
'civility' => 'civilité',
'cooking_advice' => 'conseil de réchauffage',
'description' => 'description',
@ -274,7 +274,6 @@ return [
'product_name' => 'nom du produit',
'publication' => 'publication',
'publish_at' => 'date de publication',
'publish_at' => 'date de publication',
'send_data' => 'autorisation d\'enregistrer des données',
'seo_description' => 'description SEO',
'seo_title' => 'titre SEO',
@ -290,9 +289,9 @@ return [
'title_part3' => 'dernière partie du titre',
'type' => 'type',
'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',
'vimeo_video_id' => 'ID de la vidéo viméo',
'display_video' => 'affichage de la vidéo',
],
];

View file

@ -170,33 +170,34 @@
</fieldset>
</div>
{{-- YOUTUBE VIDEO ID --}}
{{-- VIDEO ID --}}
<div class="col-12 col-md-6 mb-3">
<fieldset class="h-100 border p-3">
<legend>{{ Str::ucfirst(__('validation.custom.youtube_video_id')) }}</legend>
<legend>{{ Str::ucfirst(__('validation.custom.video_id')) }}</legend>
<div class="row">
<div class="col-12">
@include('bo.partials.inputs.varchar', [
'id' => 'homepageVideoUrl',
'label' => __(':field :inter:model', [
'field' => Str::ucfirst(__('validation.custom.youtube_video_id')),
'field' => Str::ucfirst(__('validation.custom.video_id')),
'inter' => __('validation.custom.of_the.female'),
'model' => __('models.classes.homepage'),
]),
'hasWordCounter' => true,
'name' => 'youtube_video_id',
'name' => 'video_id',
'required' => false,
'model' => $homepageModel ?? null,
'helper' =>
__('validation.between.string', [
__('validation.string', [
'attribute' => __(':field :inter:model', [
'field' => __('validation.custom.youtube_video_id'),
'field' =>
__('validation.custom.youtube_video_id') . ' ou ' . __('validation.custom.vimeo_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)."),
]) .
' ' .
__(" Youtube eg:\u{00A0}(MH19CxWqluY) ou Vimeo eg:\u{00A0}(369521302)."),
'placeholder' => 'MH19CxWqluY',
])
</div>

View file

@ -2,7 +2,7 @@
{{-- VIDEO ID --}}
<div class="col-12 col-md-6 mb-3">
<fieldset class="h-100 border p-3">
<legend>{{ Str::ucfirst(__('validation.attributes.url')) }}</legend>
<legend>{{ Str::ucfirst(__('validation.custom.video_id')) }}</legend>
<div class="row">
<div class="col-12">
@include('bo.partials.inputs.varchar', [
@ -17,16 +17,17 @@
'required' => true,
'model' => $joinuspageModel ?? null,
'helper' =>
__('validation.between.string', [
__('validation.string', [
'attribute' => __(':field :inter:model', [
'field' => __('validation.custom.video_id'),
'field' =>
__('validation.custom.youtube_video_id') . ' ou ' . __('validation.custom.vimeo_video_id'),
'inter' => __('validation.custom.of_the.female'),
'model' => __('models.classes.joinuspage'),
]),
'min' => 3,
'max' => 255,
]) . __(' Doit être l\'id de la vidéo.'),
'placeholder' => __('crud.placeholders.beautiful', ['field' => __('validation.attributes.url')]),
]) .
' ' .
__(" Youtube eg:\u{00A0}(MH19CxWqluY) ou Vimeo eg:\u{00A0}(369521302)."),
'placeholder' => 'MH19CxWqluY',
])
</div>
</div>

View file

@ -2,8 +2,7 @@
@section('title', $staticPageModel->seo_title ?? __('Accueil'))
@section('description', $staticPageModel->seo_description ?? __('Description site'))
@section('breadcrumb',
request()->route()->getName())
@section('breadcrumb', request()->route()->getName())
@section('content')
<section class="homepage">
@ -22,14 +21,28 @@
<div class="col-12 col-md-6 col-lg-5 col-xl-4 m-xl-0 g-0 my-4">
@if ($homepageModel->display_video)
<div class="ratio ratio-16x9 y-video">
<div class="video-inlaid" type="youtube"
href="https://www.youtube.com/embed/{{ $homepageModel->youtube_video_id }}">
<a class="cn-cookie-link" id="youtube-warning" href="" rel="nofollow">
<strong class="text-underline text-bold text-normal text-danger">
{{ __('cookie-notice.custom.youtube.warning') }}
</strong>
</a>
</div>
@if (\App\Rules\IsValidVimeoId::validates($homepageModel->video_id))
<div class="video-inlaid" type="vimeo"
href="https://player.vimeo.com/video/{{ $homepageModel->video_id }}?autoplay=1&loop=1&badge=0">
<a class="cn-cookie-link" id="vimeo-warning" href="" rel="nofollow">
<strong class="text-underline text-bold text-normal text-danger">
{{ __('cookie-notice.custom.vimeo.warning') }}
</strong>
</a>
</div>
@endif
@if (\App\Rules\IsValidYoutubeId::validates($homepageModel->video_id))
{{-- For loop to work need to provide a playlist --}}
{{-- http://web.archive.org/web/20121016180134/http://brianwong.com/blog/2012-youtube-embed-code-autoplay-on-and-all-other-parameters/ --}}
<div class="video-inlaid" type="youtube"
href="https://www.youtube.com/embed/{{ $homepageModel->video_id }}?autoplay=1&loop=1">
<a class="cn-cookie-link" id="youtube-warning" href="" rel="nofollow">
<strong class="text-underline text-bold text-normal text-danger">
{{ __('cookie-notice.custom.youtube.warning') }}
</strong>
</a>
</div>
@endif
</div>
@else
<img class="img-fluid" src="{{ asset($homepageModel->picture) }}" title="{{ $homepageModel->picture_title }}"
@ -157,7 +170,8 @@
</p>
</div>
<img src="{{ asset($rangeModel->picture_thumbnail) }}"
title="{{ $rangeModel->picture_thumbnail_title }}" alt="{{ $rangeModel->picture_thumbnail_alt }}">
title="{{ $rangeModel->picture_thumbnail_title }}"
alt="{{ $rangeModel->picture_thumbnail_alt }}">
<div class="w-100 d-xl-none">
<a class="text-dark w-fit"
href="{{ route('fo.ranges.show', $rangeModel->slug) }}">{{ __('> En savoir +') }}</a>

View file

@ -104,6 +104,7 @@
<p class="m-0">{{ __('Nous sommes tous animés par la passion de nos métiers !') }}</p>
<p>{{ __('Une équipe de talents à renforcer.') }}</p>
<div class="ratio ratio-16x9">
@if (\App\Rules\IsValidYoutubeId::validates($joinuspageModel->video_id))
<div class="video-inlaid" type="youtube" href="https://www.youtube.com/embed/{{ $joinuspageModel->video_id }}">
<a class="cn-cookie-link" id="youtube-warning" href="" rel="nofollow">
<strong class="text-underline text-bold text-normal text-danger">
@ -111,6 +112,16 @@
</strong>
</a>
</div>
@endif
@if (\App\Rules\IsValidVimeoId::validates($joinuspageModel->video_id))
<div class="video-inlaid" type="vimeo" href="https://player.vimeo.com/video/{{ $joinuspageModel->video_id }}">
<a class="cn-cookie-link" id="vimeo-warning" href="" rel="nofollow">
<strong class="text-underline text-bold text-normal text-danger">
{{ __('cookie-notice.custom.vimeo.warning') }}
</strong>
</a>
</div>
@endif
</div>
<p>
{{ __('Pour consulter l\'ensemble de nos vidéos métiers, rendez-vous sur notre chaîne') }}

View file

@ -44,7 +44,7 @@ $cookies['youtube'] = [
$cookies['youtube']['script'] = <<<SCRIPT
function () {
// * Video inlaid.
const videoInlaidList = document.querySelectorAll(".video-inlaid");
const videoInlaidList = document.querySelectorAll('.video-inlaid[type="youtube"]');
for (const videoLink of videoInlaidList) {
if (!videoLink.getAttribute("type")) {
throw new Error("Missing attribute type");
@ -69,7 +69,7 @@ SCRIPT;
$cookies['youtube']['fallback'] = <<<FALLBACK
function () {
// * Video inlaid.
const videoInlaidList = document.querySelectorAll(".video-inlaid");
const videoInlaidList = document.querySelectorAll('.video-inlaid[type="youtube"]');
for (const item of videoInlaidList) {
let a = document.createElement('a');
a.innerText = 'Autoriser';
@ -87,6 +87,60 @@ function () {
}
FALLBACK;
// VIMEO
$cookies['vimeo'] = [
'name' => 'VIDEOS - Vimeo',
'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'),
'link' => 'https://vimeo.com/cookie_policy',
'labelLink' => __('En savoir +'),
'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC']
];
$cookies['vimeo']['script'] = <<<SCRIPT
function () {
let videoInlaidList = document.querySelectorAll('.video-inlaid[type="vimeo"]');
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");
}
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);
}
}
SCRIPT;
$cookies['vimeo']['fallback'] = <<<FALLBACK
function () {
let videoInlaidList = document.querySelectorAll('.video-inlaid[type="vimeo"]');
for (const item of videoInlaidList) {
let a = document.createElement('a');
a.innerText = 'Autoriser';
a.classList.add('cn-cookie-link');
a.setAttribute('role', 'button');
a.onclick = function () {
WebCookieNotice.openCookieModalToCookiePage();
};
let e = document.createElement('p');
e.innerHTML = 'Vimeo est désactivé. ';
item.innerHTML = "";
e.appendChild(a);
item.appendChild(e);
}
}
FALLBACK;
// RECAPTCHA
$cookies['recaptcha'] = [
'name' => __('cookie-notice.custom.recaptcha.title'),