From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 17 Jan 2022 13:29:40 +0000 (+0100)
Subject: Support opening video / audio assets from any page. Wait #5022 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=003f9d553887db624465826b5f430f34259b0cc6;p=odl.git

Support opening video / audio assets from any page. Wait #5022 @3
---

diff --git a/app/Http/Controllers/FrontController.php b/app/Http/Controllers/FrontController.php
index 58033d1..1c7f1e5 100644
--- a/app/Http/Controllers/FrontController.php
+++ b/app/Http/Controllers/FrontController.php
@@ -67,7 +67,7 @@ class FrontController extends Controller
         $res = [];
 
         foreach (Menu::all() as $item) {
-            $res[] = array_merge(['title' => $item->title], self::getLinkData($item->link));
+            $res[] = array_merge(self::getLinkData($item->link), ['title' => $item->title]);
         }
         return $res;
     }
@@ -81,11 +81,15 @@ class FrontController extends Controller
 
         $res = [];
         if (str_starts_with($link, 'asset_')) {
-            $assetId = substr($link, 6);
+            $asset_ID = substr($link, 6);
             /** @var Asset $asset */
-            $asset = Asset::find($assetId);
+            $asset = Asset::find($asset_ID);
+
+            $res['id'] = $asset_ID;
+            $res['title'] = $asset->title;
             $res['type'] = $asset->type;
             $res['url'] = $asset->getFirstMediaUrl($asset->file_upload);
+            $res['image'] = $asset->file_thumb ? $asset->getFirstMediaUrl($asset->file_thumb) : '';
         } else {
             $res['type'] = 'page';
             $res['url'] = isset($map[$link]) ? '/front' . $map[$link] : $link;
diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php
index 25aa452..c2b21d2 100644
--- a/resources/views/components/header.blade.php
+++ b/resources/views/components/header.blade.php
@@ -42,7 +42,7 @@
             {{ $center }}
         @else
             {{-- VEOLIA Logo --}}
-            <x-link class="header-logo {{ $logoClass ?? 'text-red' }}" href="/accueil.html">
+            <x-link class="header-logo {{ $logoClass ?? 'text-red' }}" href="home">
                 <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="130" height="31.878" viewBox="0 0 130 31.878"><path d="M13.704 31.795A16.13 16.13 0 0 1 .278 19.079a19.191 19.191 0 0 1-.189-5.063A16.014 16.014 0 0 1 13.598.139a19.613 19.613 0 0 1 5.536.127 16.063 16.063 0 0 1 11.993 10.7 15.252 15.252 0 0 1 .794 4.983 16.007 16.007 0 0 1-12.536 15.626 23.994 23.994 0 0 1-5.681.22Zm1.658-7.262a19.68 19.68 0 0 1-2.509-3.99 4.469 4.469 0 0 1-.4-2.247 3.587 3.587 0 0 1 .346-2.02 3.386 3.386 0 0 1 3.156-2.1c2.061-.012 3.576 1.758 3.567 4.166q-.009 2.367-2.468 5.525l-.947 1.215.914-.083a11.289 11.289 0 0 0 7.03-3.344 9.91 9.91 0 0 0 2.146-3.057 9.655 9.655 0 0 0 1.066-4.821 9.577 9.577 0 0 0-.262-2.748 11.391 11.391 0 0 0-12.229-8.536 11.425 11.425 0 0 0-9.762 8.536 13.065 13.065 0 0 0 .01 5.46 11.419 11.419 0 0 0 8.977 8.38 11.273 11.273 0 0 0 1.33.167l.468.011Zm63.629.811a12.141 12.141 0 0 1-3.307-1.111 7.234 7.234 0 0 1-3.274-5.455 16.528 16.528 0 0 1 .2-4.7 7.168 7.168 0 0 1 2.883-4.3 11.8 11.8 0 0 1 6.823-1.261c2.5.255 4.008.871 5.278 2.153a6.778 6.778 0 0 1 1.844 3.475 16.166 16.166 0 0 1 .051 5.776 6.754 6.754 0 0 1-5.2 5.254 16.019 16.019 0 0 1-5.298.17Zm4.092-3.055a3.074 3.074 0 0 0 1.737-1.57 7.571 7.571 0 0 0 .736-3.75c0-3.9-1.372-5.6-4.516-5.6a4.05 4.05 0 0 0-3.041.95c-1.035.93-1.478 2.323-1.478 4.647 0 3.219 1 5.013 3.1 5.541a7.933 7.933 0 0 0 3.461-.221Zm-39.092 2.622c-.062-.158-1.636-3.728-3.5-7.932s-3.387-7.689-3.387-7.744a6.066 6.066 0 0 1 1.548-.1c1.387 0 1.6.029 2.079.28a2.662 2.662 0 0 1 .841.753c.171.26 1.2 2.562 2.278 5.114s2.006 4.715 2.053 4.8a40.742 40.742 0 0 0 2.044-4.732c1.078-2.693 2.076-5.068 2.218-5.278a2.56 2.56 0 0 1 .789-.661c.484-.255.684-.28 2.246-.28h1.715l-3.31 7.323c-1.821 4.027-3.445 7.5-3.609 7.715-.506.666-1.126.9-2.6.966-1.278.068-1.298.062-1.406-.223Zm17.04-.007a6.749 6.749 0 0 1-4.9-5.126 12.989 12.989 0 0 1 0-5.393 7.238 7.238 0 0 1 3.253-4.507c1.366-.728 1.823-.787 6.226-.8l3.978-.008v2.893l-3.438.06-3.438.06-.794.391a2.765 2.765 0 0 0-1.13.877 4.562 4.562 0 0 0-.661 2.012v.274l4.55.032 4.55.032v2.772l-4.55.032-4.55.032v.266a5.392 5.392 0 0 0 .2.964 3.036 3.036 0 0 0 1.826 2.043c.647.257.9.276 4.094.318l3.405.045v2.873l-4.008-.013c-2.2-.007-4.279-.065-4.611-.128Zm35.54-.1a8.52 8.52 0 0 1-1.373-.486 5.251 5.251 0 0 1-1.992-2.091c-.544-1.188-.585-1.718-.59-7.609V9.073h1.266c1.094 0 1.323.036 1.688.264.806.505.777.3.844 5.943l.06 5.123.3.536a1.956 1.956 0 0 0 .9.844c.586.3.662.309 3.526.347l2.927.04v2.874l-3.345-.007a16.7 16.7 0 0 1-4.207-.233Zm9.869-7.2c.032-7.081.045-7.46.263-7.781.382-.563.851-.73 2.212-.785l1.235-.05v7.433c0 8.2.026 7.911-.759 8.39-.32.195-.609.235-1.685.236h-1.3Zm5.7 7.3c.034-.088 1.464-3.387 3.178-7.331 3.49-8.032 3.517-8.08 4.711-8.388a7.507 7.507 0 0 1 3.108-.019c.1.119 6.534 14.861 6.847 15.676.071.186-.066.2-1.505.2-2.346 0-2.719-.236-3.635-2.308l-.552-1.248-3.217-.032-3.217-.032-.124.325c-.068.179-.361.82-.652 1.426a3.114 3.114 0 0 1-1.039 1.455c-.5.345-.552.355-2.238.393-1.4.032-1.716.008-1.666-.121Zm11.231-6.518c-.92-2.207-2.181-5.116-2.249-5.19a38.91 38.91 0 0 0-2.253 4.949l-.164.392h2.365c1.844 0 2.35-.034 2.301-.151Z"/></svg>
             </x-link>
         @endif
diff --git a/resources/views/components/link.blade.php b/resources/views/components/link.blade.php
index f7e6e0b..f08c97e 100644
--- a/resources/views/components/link.blade.php
+++ b/resources/views/components/link.blade.php
@@ -1,15 +1,37 @@
 {{-- Standard Link --}}
 @php
     use Illuminate\Support\Str;
+    use App\Http\Controllers\FrontController;
 
-    if (!Str::startsWith($href, 'http') && !Str::startsWith($href, '/tools/')  && !Str::startsWith($href, '/storage/')  && !Str::startsWith($href, '/front/')) {
-        $linkData=\App\Http\Controllers\FrontController::getLinkData($href);
+    if (!Str::startsWith($href, 'http') &&
+        !Str::startsWith($href, '/tools/') &&
+        !Str::startsWith($href, '/storage/') &&
+        !Str::startsWith($href, '/front/')) {
+        $linkData = FrontController::getLinkData($href);
 
-        $href=$linkData['url'];
-        if($linkData['type']==='pdf'){
-            $attributes["@click.prevent"]='openPDF($el.attributes.href.value)';
-        }else if($linkData['type']=='video'){
-            $attributes['@click.prevent']='openPDF($el.attributes.href.value)';
+        $href = $linkData['url'];
+
+        if ($linkData['type'] === 'pdf') {
+            $attributes['@click.prevent'] = 'openPDF($el.attributes.href.value)';
+        } else if ($linkData['type'] == 'video' || $linkData['type'] == 'audio') {
+            // Set data needed to launch media player
+            $player_data = [
+                'ID' => $linkData['id'],
+                'player' => [
+                    'type' => $linkData['type'], // video / audio
+                    'sources' => [
+                        [
+                            'src' => $href,
+                        ]
+                    ]
+                ],
+                'title' => $linkData['title'] ?? '',
+                'image' => $linkData['image'],
+            ];
+
+            $attributes['id'] = "media_{$linkData['id']}"; // Needed so media can be found on page load via querystring ID
+            $attributes['data-player'] = htmlspecialchars(json_encode($player_data));
+            $attributes['@click.prevent'] = "\$dispatch('player-open', { sourceData: JSON.parse(\$el.dataset.player) })";
         }
     }
 @endphp
diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php
index 2da4d50..32d951d 100644
--- a/resources/views/components/media-library/index.blade.php
+++ b/resources/views/components/media-library/index.blade.php
@@ -103,8 +103,6 @@
         @endforeach
     </div>
 
-    <x-media-library.player/>
-
     <x-media-library.filter-interface/>
 
 </div>
diff --git a/resources/views/components/media-library/player.blade.php b/resources/views/components/media-library/player.blade.php
index c9e05ac..ed02990 100644
--- a/resources/views/components/media-library/player.blade.php
+++ b/resources/views/components/media-library/player.blade.php
@@ -22,16 +22,13 @@
                 playerImage: '',
 
                 /****************\
-                 | Initialisation |
-                 \****************/
+                | Initialisation |
+                \****************/
 
                 init() {
-
-                    console.log('initplayer...')
-
                     // Open player if querystring is already set
                     let querystring = new URLSearchParams(location.search);
-                    let ID = querystring.get('id');
+                    let ID = querystring.get('player');
                     if (ID) {
                         let media = document.querySelector(`#media_${ID}`)
                         if (media) {
@@ -44,8 +41,8 @@
                 },
 
                 /**************\
-                 | Media Player |
-                 \**************/
+                | Media Player |
+                \**************/
 
                 initPlayer(selector) {
 
@@ -76,7 +73,7 @@
 
                     if (updateQuerystring) {
                         const location = new URL(window.location.href);
-                        location.searchParams.set('id', sourceData.ID);
+                        location.searchParams.set('player', sourceData.ID);
                         history.replaceState(null, document.title, location.toString());
                     }
 
@@ -94,7 +91,7 @@
 
                     // Update the page URL to remove querystring
                     const location = new URL(window.location.href);
-                    location.searchParams.delete('id');
+                    location.searchParams.delete('player');
                     history.replaceState(null, document.title, location.toString());
                 },
 
diff --git a/resources/views/front/home.blade.php b/resources/views/front/home.blade.php
index 1b50225..ecb6c03 100644
--- a/resources/views/front/home.blade.php
+++ b/resources/views/front/home.blade.php
@@ -69,6 +69,4 @@
 
     </div>
 
-    <x-media-library.player/>
-
 @endsection
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 745fac6..5103500 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -25,8 +25,8 @@
 
                     // Open PDF viewer if querystring is already set
                     let querystring = new URLSearchParams(location.search);
-                    if (querystring.get('file')) {
-                        this.openPDF(querystring.get('file'), false);
+                    if (querystring.get('pdf')) {
+                        this.openPDF(querystring.get('pdf'), false);
                     }
                 },
 
@@ -62,7 +62,7 @@
 
                     if (updateQuerystring) {
                         const location = new URL(window.location.href);
-                        location.searchParams.set('file', PDF_URL);
+                        location.searchParams.set('pdf', PDF_URL);
                         history.replaceState(null, document.title, location.toString());
                     }
 
@@ -78,7 +78,7 @@
 
                     // Update the page URL to remove querystring
                     const location = new URL(window.location.href);
-                    location.searchParams.delete('file');
+                    location.searchParams.delete('pdf');
                     history.replaceState(null, document.title, location.toString());
                 },
             }
@@ -90,112 +90,115 @@
     <body x-data="app()"
           @resize.window.debounce="measureWidth()"
           class="font-primary p-8 @stack('extra_body_classes')">
-    @endsection
-
-    @section('main')
-        {{--
-            Content has constrained width so that nothing shifts when overlay is opened and scrolling is disabled.
-            The body width changes when scrollbars are removed, which causes alignment problems, especially with
-            fixed-position elements.
-        --}}
-        <div style="width: var(--content-width)">
-            <x-header main="true"/>
-
-            <div class="min-h-content flex flex-col mx-22 pt-22 opacity-0" :class="{ 'opacity-0': maskContents }">
-                @yield('content')
-            </div>
+@endsection
+
+@section('main')
+    {{--
+        Content has constrained width so that nothing shifts when overlay is opened and scrolling is disabled.
+        The body width changes when scrollbars are removed, which causes alignment problems, especially with
+        fixed-position elements.
+    --}}
+    <div style="width: var(--content-width)">
+        <x-header main="true"/>
+
+        <div class="min-h-content flex flex-col mx-22 pt-22 opacity-0" :class="{ 'opacity-0': maskContents }">
+            @yield('content')
         </div>
+    </div>
 
 
 
-        {{-- MENU OVERLAY --}}
-        <div class="overlay menu-overlay
-                bg-blue text-white
-                z-30"
-             x-show="menuOpen"
-             x-transition.opacity.duration.500ms
-             x-transition:leave.opacity.duration.500ms.delay.500ms
-             x-cloak>
+    {{-- MENU OVERLAY --}}
+    <div class="overlay menu-overlay
+            bg-blue text-white
+            z-30"
+         x-show="menuOpen"
+         x-transition.opacity.duration.500ms
+         x-transition:leave.opacity.duration.500ms.delay.500ms
+         x-cloak>
 
-            <x-header logo-class="text-white"/>
+        <x-header logo-class="text-white"/>
 
-            <ul class="w-full font-medium text-6xl">
-                @foreach ($menu as $link)
+        <ul class="w-full font-medium text-6xl">
+            @foreach ($menu as $link)
 
-                    @php
-                        $prevent='menuOpen = false; setTimeout(() => window.location = $event.target.href, 200);';
-                        if($link['type']==='pdf'){
-                            $prevent='menuOpen = false;openPDF($el.attributes.href.value)';
-                        }
-                    @endphp
-                    {{-- Overflow is hidden for text entrance animation. --}}
-                    {{-- Extra padding and negative margin added so hover scale effect isn't clipped --}}
-                    <li class="overflow-hidden pl-4 -ml-4">
-                        <div x-show="menuOpen"
-                             class="transition transform ease-out-quint"
-                             style="transition-delay: {{ 250 + (50 * $loop->index) }}ms"
-                             x-transition:enter="duration-1000"
-                             x-transition:enter-start="translate-y-[100px]"
-                             x-transition:enter-end="translate-x-0"
-                             x-transition:leave="duration-500"
-                             x-transition:leave-start="translate-x-0"
-                             x-transition:leave-end="translate-y-[100px]">
-                            <x-link
-                                href="{{ $link['url'] }}"
-                                @click.prevent="{!! $prevent !!}"
-                                class="block py-8 text-current
-                                   transform origin-bottom-left
-                                   transition-transform duration-200
-                                   hover:scale-105">
-                                {{ $link['title'] }}
-                            </x-link>
-                        </div>
-                    </li>
-                    <li class="bg-blue-dark h-px
-                           transform origin-left
-                           transition ease-out-quint"
-                        x-show="menuOpen"
-                        style="transition-delay: {{ 250 + (50 * $loop->index) }}ms"
-                        x-transition:enter="duration-2000"
-                        x-transition:enter-start="scale-x-0"
-                        x-transition:enter-end="scale-x-100"
-                        x-transition:leave="duration-500"
-                        x-transition:leave-start="scale-x-100"
-                        x-transition:leave-end="scale-x-0">
-                    </li>
-                @endforeach
-            </ul>
-        </div>
-
-        {{-- Search Overlay --}}
-        <x-search/>
-
-        {{-- PDF Viewer Overlay --}}
-        <div class="overlay pdf-overlay
-                    bg-white text-black
-                    pt-20
-                    z-20"
-             x-show="PDFOpen"
-             x-transition:enter.opacity.duration.500ms
-             x-transition:leave.opacity.duration.200ms
-             x-cloak>
-
-            {{-- PDF Viewer iframe --}}
-            <iframe x-ref="PDFViewer" src="" frameborder="0"
-                    class="absolute left-0 w-full top-[90px] h-[calc(100vh-90px)]"></iframe>
-
-            <x-header>
-                <x-slot name="right">
-                    <div x-show="PDFOpen && !menuOpen" x-transition:enter.opacity.duration.500ms.delay.300ms
-                         x-transition:leave.opacity.duration.0ms.delay.0ms>
-                        <x-close
-                            x-show="PDFOpen"
-                            @click.prevent="closePDF()"
-                            class="flex"
-                        />
+                @php
+                    $prevent='menuOpen = false; setTimeout(() => window.location = $event.target.href, 200);';
+                    if($link['type']==='pdf'){
+                        $prevent='menuOpen = false;openPDF($el.attributes.href.value)';
+                    }
+                @endphp
+                {{-- Overflow is hidden for text entrance animation. --}}
+                {{-- Extra padding and negative margin added so hover scale effect isn't clipped --}}
+                <li class="overflow-hidden pl-4 -ml-4">
+                    <div x-show="menuOpen"
+                         class="transition transform ease-out-quint"
+                         style="transition-delay: {{ 250 + (50 * $loop->index) }}ms"
+                         x-transition:enter="duration-1000"
+                         x-transition:enter-start="translate-y-[100px]"
+                         x-transition:enter-end="translate-x-0"
+                         x-transition:leave="duration-500"
+                         x-transition:leave-start="translate-x-0"
+                         x-transition:leave-end="translate-y-[100px]">
+                        <x-link
+                            href="{{ $link['url'] }}"
+                            @click.prevent="{!! $prevent !!}"
+                            class="block py-8 text-current
+                               transform origin-bottom-left
+                               transition-transform duration-200
+                               hover:scale-105">
+                            {{ $link['title'] }}
+                        </x-link>
                     </div>
-                </x-slot>
-            </x-header>
-        </div>
+                </li>
+                <li class="bg-blue-dark h-px
+                       transform origin-left
+                       transition ease-out-quint"
+                    x-show="menuOpen"
+                    style="transition-delay: {{ 250 + (50 * $loop->index) }}ms"
+                    x-transition:enter="duration-2000"
+                    x-transition:enter-start="scale-x-0"
+                    x-transition:enter-end="scale-x-100"
+                    x-transition:leave="duration-500"
+                    x-transition:leave-start="scale-x-100"
+                    x-transition:leave-end="scale-x-0">
+                </li>
+            @endforeach
+        </ul>
+    </div>
+
+    {{-- Search Overlay --}}
+    <x-search/>
+
+    {{-- PDF Viewer Overlay --}}
+    <div class="overlay pdf-overlay
+                bg-white text-black
+                pt-20
+                z-20"
+         x-show="PDFOpen"
+         x-transition:enter.opacity.duration.500ms
+         x-transition:leave.opacity.duration.200ms
+         x-cloak>
+
+        {{-- PDF Viewer iframe --}}
+        <iframe x-ref="PDFViewer" src="" frameborder="0"
+                class="absolute left-0 w-full top-[90px] h-[calc(100vh-90px)]"></iframe>
+
+        <x-header>
+            <x-slot name="right">
+                <div x-show="PDFOpen && !menuOpen" x-transition:enter.opacity.duration.500ms.delay.300ms
+                     x-transition:leave.opacity.duration.0ms.delay.0ms>
+                    <x-close
+                        x-show="PDFOpen"
+                        @click.prevent="closePDF()"
+                        class="flex"
+                    />
+                </div>
+            </x-slot>
+        </x-header>
+    </div>
+
+    {{-- Media Player --}}
+    <x-media-library.player/>
 
 @endsection