From: Stephen Cameron Date: Thu, 25 Nov 2021 23:06:27 +0000 (+0100) Subject: WIP #4781 @9 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=aa70af3db3133001d700a9800159d9c64a3291aa;p=odl.git WIP #4781 @9 --- diff --git a/resources/css/common/plyr.css b/resources/css/common/plyr.css index 03a12c3..08eb7d5 100644 --- a/resources/css/common/plyr.css +++ b/resources/css/common/plyr.css @@ -9,8 +9,12 @@ --plyr-range-fill-background: #000; } -.plyr__time { - @apply font-secondary; +.plyr-timecode { + /* Ensure layout doesn't shift as timecodes change */ font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } + +[data-plyr="play"] { + background: var(--plyr-color-main); +} diff --git a/resources/js/media-library.js b/resources/js/media-library.js index acb2c8e..cf9e7e5 100644 --- a/resources/js/media-library.js +++ b/resources/js/media-library.js @@ -17,7 +17,10 @@ export default (options = {}) => ({ player: {}, // Holds the Plyr instance playerOptions: { // Settings used for Plyr instantiation (https://github.com/sampotts/plyr#options) debug: false, + loadSprite: false, // Custom SVG sprite is already embedded in the page }, + playerDuration: '00’00', + playerTime: '00’00', /***********\ | Filtering | @@ -91,16 +94,21 @@ export default (options = {}) => ({ this.player = new Plyr(selector, this.playerOptions); window.player = this.player; // Make player object available in console + this.player.on('loadedmetadata', event => { + // Duration is only available once metadata is loaded + this.playerDuration = this.formatTime(this.player.duration); + }); + this.player.on('timeupdate', event => { - const instance = event.detail.plyr; - console.log('timeupdate', instance.currentTime); + // Reformat the time code every time it changes + this.playerTime = this.formatTime(event.detail.plyr.currentTime); }); }, openPlayer(sourceData) { - this.playerOpen = true; this.player.source = sourceData; this.player.play(); + this.playerOpen = true; }, closePlayer() { @@ -108,4 +116,11 @@ export default (options = {}) => ({ this.playerOpen = false; }, + formatTime(rawSeconds) { + let minutes = Math.trunc(rawSeconds / 60).toString().padStart(2, '0'), + seconds = Math.trunc(rawSeconds % 60).toString().padStart(2, '0'); + + return `${minutes}’${seconds}`; + }, + }); diff --git a/resources/views/components/close.blade.php b/resources/views/components/close.blade.php index b473860..8e041af 100644 --- a/resources/views/components/close.blade.php +++ b/resources/views/components/close.blade.php @@ -1,5 +1,8 @@ {{-- Close --}} - +@php + $class = $class ?? 'absolute top-8 right-8 flex'; // Overridable default classes +@endphp + Fermer

diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php index ba56df4..163e9c2 100644 --- a/resources/views/components/media-library/index.blade.php +++ b/resources/views/components/media-library/index.blade.php @@ -27,7 +27,7 @@ {{-- MEDIA LIBRARY GRID --}} {{-- Negative margins applied here to offset margins used in Isotope grid --}} -

@foreach ($media as $item)

{{-- Play Icon --}} -

{{-- Time codes --}} -

diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php index 9848cdf..b54db0b 100644 --- a/resources/views/components/search.blade.php +++ b/resources/views/components/search.blade.php @@ -26,7 +26,7 @@ x-transition:leave-end="opacity-0" x-cloak> - + {{-- Search Field --}}

diff --git a/resources/views/front/resources.blade.php b/resources/views/front/resources.blade.php index 2730ef2..8368c75 100644 --- a/resources/views/front/resources.blade.php +++ b/resources/views/front/resources.blade.php @@ -11,13 +11,13 @@ 'document_title' => "CÅur de l'offre", 'document_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.', 'document_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png', - 'document_pdf' => '#', + 'document_pdf' => '../../data/links/test1.pdf#page=1', ], [ 'document_title' => 'Offre dÃ©taillÃ©e', 'document_subtitle' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tellus ipsum, vel elementum eros vehicula quis.', 'document_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png', - 'document_pdf' => '#', + 'document_pdf' => '../../data/links/test2.pdf#page=2', ], ]; @@ -32,12 +32,12 @@ 'subchapter_memos' => [ [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo1.pdf', + 'memo_pdf' => '../../data/links/test1.pdf#page=1', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png', ], [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo2.pdf', + 'memo_pdf' => '../../data/links/test2.pdf', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png', ], ], @@ -48,17 +48,17 @@ 'subchapter_memos' => [ [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo1.pdf', + 'memo_pdf' => '../../data/links/test1.pdf#page=1', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png', ], [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo2.pdf', + 'memo_pdf' => '../../data/links/test2.pdf', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png', ], [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo3.pdf', + 'memo_pdf' => '../../data/links/test1.pdf', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png', ], ], @@ -74,17 +74,17 @@ 'subchapter_memos' => [ [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo1.pdf', + 'memo_pdf' => '../../data/links/test1.pdf#page=1', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png', ], [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo2.pdf', + 'memo_pdf' => '../../data/links/test2.pdf', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png', ], [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo2.pdf', + 'memo_pdf' => '../../data/links/test2.pdf', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png', ], ], @@ -95,12 +95,12 @@ 'subchapter_memos' => [ [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo1.pdf', + 'memo_pdf' => '../../data/links/test1.pdf#page=1', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/107/groupe-133-at-2x.png', ], [ 'memo_title' => 'Lorem ipsum dolor sit', - 'memo_pdf' => 'memo2.pdf', + 'memo_pdf' => '../../data/links/test2.pdf', 'memo_image' => 'https://odl.paris.cubedesigners.com/storage/108/groupe-134-at-2x.png', ], ], @@ -110,55 +110,113 @@ ]; @endphp -

{{ $title }}

{{ $subtitle }}

- - {{-- DOCUMENTS --}} -

- @foreach($documents as $doc) -

- ${{ $doc['document_title'] }}$ -

{{ $doc['document_title'] }}

{{ $doc['document_subtitle'] }}

-

- @endforeach -

+ {{-- RESOURCES --}} +

+ + +

{{ $title }}

+

{{ $subtitle }}

- {{-- MEMOS --}} -

+ {{-- DOCUMENTS --}} +

+ @foreach($documents as $doc) + +

+ ${{ $doc['document_title'] }}$ +

{{ $doc['document_title'] }}

{{ $doc['document_subtitle'] }}

+ + @endforeach +

+ + {{-- MEMOS --}} +

{{ $memo_part_title }} -

- - - {{-- CHAPTERS --}} - @foreach ($chapters as $chapter) -

-

{{ $chapter['chapter_title'] }}

- - {{-- SUB-CHAPTERS --}} - @foreach ($chapter['subchapters'] as $subchapter) -

{{ $subchapter['subchapter_title'] }}

-

{{ $subchapter['subchapter_subtitle'] }}

- - {{-- MEMOS --}} -

- @foreach ($subchapter['subchapter_memos'] as $memo) -

- ${{ $memo['memo_title'] }}$ -

-

{{ $memo['memo_title'] }}

- -

-

- @endforeach -

- @endforeach +

+ + + {{-- CHAPTERS --}} + @foreach ($chapters as $chapter) +

+

{{ $chapter['chapter_title'] }}

+ + {{-- SUB-CHAPTERS --}} + @foreach ($chapter['subchapters'] as $subchapter) +

{{ $subchapter['subchapter_title'] }}

+

{{ $subchapter['subchapter_subtitle'] }}

+ + {{-- MEMOS --}} +

+ @foreach ($subchapter['subchapter_memos'] as $memo) + +

+ ${{ $memo['memo_title'] }}$ +

{{ $memo['memo_title'] }}

+ + @endforeach +

+ @endforeach +

+ @endforeach + + {{-- PDF Viewer Overlay --}} +

+ + {{-- PDF Viewer iframe --}} + +

- @endforeach + + {{-- Close button sits outside overlay so it can sit above and cover header search button --}} + {{-- TODO: Rework this so it's less awkward when the main menu is opened on top of the PDF viewer --}} + {{-- TODO: instead of using the same main element, consider having a header widget that can be used to redisplay header inside overlays (with option to disable / replace items via slots --}} + + + +

@endsection diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 6d6034c..326745e 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -8,8 +8,8 @@ @stack('after_css') {{ config('app.name') }} -