From: Vincent Vanwaelscappel Date: Wed, 23 Mar 2022 13:16:28 +0000 (+0100) Subject: wait #5171 @3 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f6dac62739171ed5439cbe48de12f2a753c37f4a;p=odl.git wait #5171 @3 --- diff --git a/app/Http/Controllers/FrontController.php b/app/Http/Controllers/FrontController.php index 14c9ca5..1636c68 100644 --- a/app/Http/Controllers/FrontController.php +++ b/app/Http/Controllers/FrontController.php @@ -10,6 +10,8 @@ use App\Models\Resource; use App\Models\Settings; use Cubist\Backpack\Magic\PageData; use Cubist\Util\Files\Files; +use FFMpeg\FFProbe; +use SplFileInfo; class FrontController extends Controller { @@ -65,12 +67,59 @@ class FrontController extends Controller protected function _getDataFromCMS() { - return ['menu' => $this->_getMenuFromCMS(), + $res = ['menu' => $this->_getMenuFromCMS(), 'resources' => $this->_getResourcesFromCMS(), 'home' => $this->_getHomeFromCMS(), 'medialibrary' => $this->_getMediaLibraryFromCMS(), 'resources_pdf' => $this->_getResourcesPDFFromCMS(), 'settings' => $this->_getSettingsFromCMS()]; + + $theme_order = [1, 5, 2, 6, 3, 7, 4, 8, 9, 10, 11, 12, 13, 14, 15, 16]; + + $themes = []; + foreach ($theme_order as $id) { + if (isset($res['medialibrary']['themes'][$id])) { + $themes[$id] = $res['medialibrary']['themes'][$id]; + } + } + $res['theme_order'] = $theme_order; + $res['themes'] = $themes; + $res['media_types'] = [ + 'video' => 'Vidéos', + 'audio' => 'Podcast', + ]; + + $media=[]; + $ffprobe = FFProbe::create(); + foreach ($res['medialibrary']['assets'] as $a) { + /** @var $a \Cubist\Backpack\Magic\PageData */ + $file=$a->getMediaPathsByCollection($a->get('file_upload'))[0]??null; + if(null===$file){ + continue; + } + + $spf=new SplFileInfo($file); + $ext=mb_strtolower($spf->getExtension()); + if(in_array($ext,['pdf','jpg','jpeg','gif','png'])){ + continue; + } + $map=['mp3'=>'audio','mp4'=>'video']; + $type=$map[$ext]??$a->get('type'); + + $media[$a['id']]=[ + 'id'=>$a->get('id'), + 'type'=>$type, + 'theme'=>$a->get('theme'), + 'code'=>$a->get('code'), + 'title'=>$a->get('title'), + 'file'=>$a->getImageURLbyCollection($a->get('file_upload')), + 'image'=>$a->getImageURLbyCollection($a->get('file_thumb'))??$a->getImageURLbyCollection($a->get('file_upload'),'poster'), + 'duration'=>$ffprobe->format($file)->get('duration') + ]; + } + $res['media']=$media; + + return $res; } protected function _getMenuFromCMS() diff --git a/app/Jobs/ProcessFluidbook.php b/app/Jobs/ProcessFluidbook.php index d4b0bf1..67e9756 100644 --- a/app/Jobs/ProcessFluidbook.php +++ b/app/Jobs/ProcessFluidbook.php @@ -4,7 +4,9 @@ namespace App\Jobs; use App\Models\Asset; use App\Models\Publication; +use Cubist\Backpack\Magic\PageData; use Cubist\Util\Files\Files; +use Cubist\Util\Text; use Cubist\Util\Zip; use Fluidbook\Tools\Compiler\Compiler; use Spatie\MediaLibrary\MediaCollections\Models\Media; @@ -29,7 +31,7 @@ class ProcessFluidbook extends Compiler $this->addSource($media->getPath()); /** @var Media $precompiled */ - $precompiled = $this->pub->getMediaInField($this->pub->getAttributeValue('precompiled'))->first()->getPath(); + $precompiled = resource_path('precompiled.zip'); $stubuid = md5($precompiled . '//' . filemtime($precompiled) . '///' . filesize($precompiled)); $this->stub = storage_path('fluidbook/stubs/' . $stubuid . '/'); if (!file_exists($this->stub)) { @@ -132,12 +134,18 @@ class ProcessFluidbook extends Compiler $this->config->mediaIDToFile = []; $res = []; + // Add media + $assets = PageData::fromEntities(Asset::getAssetsInMediaLibrary()); + foreach ($assets as $asset) { + $links[] = ['page' => 'background', 'to' => 'video-popup:' . $asset->id, 'left' => -1, 'top' => -1, 'width' => 1, 'height' => 1, 'uid' => 'media_' . $asset->id]; + } + foreach ($links as $k => $link) { $e = explode(':', $link['to']); - $ee = explode('/', $e[0]); + $ee = Text::multiExplode('/-', $e[0]); if ($ee[0] == 'anim') { - $base = [['type'=>'','ease' => 'Power2.easeOut', 'duration' => 1.5, 'transformOrigin' => 'center', 'delay' => 1], []]; + $base = [['type' => '', 'ease' => 'Power2.easeOut', 'duration' => 1.5, 'transformOrigin' => 'center', 'delay' => 1], []]; switch ($ee[1]) { case 'fadein': $link['type'] = 14; @@ -211,7 +219,7 @@ class ProcessFluidbook extends Compiler $link['loop'] = false; $link['sound'] = true; } - } else if (stripos($e[0], 'slideshow/') === 0) { + } else if ($ee[0] === 'slideshow') { $link['inline'] = $ee[1] === 'inline'; $link['to'] = $this->_zipAssets($e[1]); if ($link['inline']) { diff --git a/app/Models/Publication.php b/app/Models/Publication.php index 578d858..925338f 100644 --- a/app/Models/Publication.php +++ b/app/Models/Publication.php @@ -24,8 +24,6 @@ class Publication extends CubistMagicAbstractModel parent::setFields(); $this->addField('document', Files::class, 'Document', ['tab' => 'Publication interactive']); - $this->addField('precompiled', Files::class, 'Fluidbook Précompilé', ['can' => 'precompiled', 'tab' => 'Publication interactive']); - $this->addField('animdemo', Files::class, 'Fluidbook Démo', ['can' => 'precompiled', 'tab' => 'Publication interactive']); $this->addField('logo', Images::class, 'Logo', ['tab' => 'Contenus']); $this->addField('subtitle', Text::class, 'Sous-titre', ['tab' => 'Contenus']); $this->addField('illustration', Images::class, 'Image', ['tab' => 'Contenus']); diff --git a/resources/pdfjs/build/pdf.js b/resources/pdfjs/build/pdf.js index e7a6031..4c10cab 100644 --- a/resources/pdfjs/build/pdf.js +++ b/resources/pdfjs/build/pdf.js @@ -975,6 +975,10 @@ function _isValidProtocol(url) { case "tel:": case "pdf:": case "tooltip:": + case "video/popup:": + case "video/inline:": + case "video-popup:": + case "video-inline:": return true; default: diff --git a/resources/pdfjs/build/pdf.worker.js b/resources/pdfjs/build/pdf.worker.js index e317b3d..310c9f1 100644 --- a/resources/pdfjs/build/pdf.worker.js +++ b/resources/pdfjs/build/pdf.worker.js @@ -1149,6 +1149,10 @@ case "tel:": case "pdf:": case "tooltip:": + case "video/popup:": + case "video/inline:": + case "video-popup:": + case "video-inline:": return true; default: diff --git a/resources/pdfjs/web/viewer.html b/resources/pdfjs/web/viewer.html index 92bc0c6..1d7cd89 100644 --- a/resources/pdfjs/web/viewer.html +++ b/resources/pdfjs/web/viewer.html @@ -41,6 +41,18 @@ See https://github.com/adobe-type-tools/cmap-resources return true; }); + $(document).on('click', 'a[href^="video"]', function () { + var e = $(this).attr('href').split(':'); + var videoid = e[1]; + + if (inFluidbook) { + window.parent.fluidbook.links.triggerLinkById('media_' + videoid); + } else { + window.parent.openVideo(videoid); + } + return false; + }); + $(document).on('click', 'a[href^="pdf:"]', function () { var e = $(this).attr('href').split('#'); var file; diff --git a/resources/precompiled.zip b/resources/precompiled.zip new file mode 100644 index 0000000..8595cf6 Binary files /dev/null and b/resources/precompiled.zip differ diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php index 32d951d..ce2a751 100644 --- a/resources/views/components/media-library/index.blade.php +++ b/resources/views/components/media-library/index.blade.php @@ -28,79 +28,7 @@ {{-- MEDIA LIBRARY GRID --}} {{-- Negative margins applied here to offset margins used in Isotope grid --}}
- @foreach ($media as $item) - - @php - $filters = []; - if (!is_array($item['theme'])) { - $item['theme'] = [$item['theme']]; - } - foreach ($item['theme'] as $t) { - $filters[] = 'theme-'.$t; - } - $theme = $themes[$item['theme'][0]]; - $player_data = [ - 'ID' => $item['id'], - 'player' => [ - 'type' => $item['type'], // video / audio - 'sources' => [ - [ - 'src' => $item['file'], - ] - ] - ], - 'title' => $item['title'], - 'image' => $item['image'], - ]; - @endphp - -
-
- - {{-- Play Icon --}} - - {{-- Icon BG --}} - - - - @if ($item['type'] === 'audio') - {{-- Audio Play Icon --}} - - - - - @else - {{-- Video Play Icon --}} - - @endif - - - - - {{ $item['duration'] }} - -
- {{-- THEME LABEL --}} -
- {{ $theme['name'] }} -
- {{-- Set min height of 2 lines so intial float layout is less likely to have misplaced blocks --}} -
- ({{$item['code']}}) {{ $item['title'] }} -
-
- @endforeach + @include('front.media')
diff --git a/resources/views/front/media-library.blade.php b/resources/views/front/media-library.blade.php index 2dca625..fda0708 100644 --- a/resources/views/front/media-library.blade.php +++ b/resources/views/front/media-library.blade.php @@ -1,52 +1,6 @@ @extends('layouts.app') @section('content') - - @php - $media_types = [ - 'video' => 'Vidéos', - 'audio' => 'Podcast', - ]; - - $theme_order=[1,5,2,6,3,7,4,8,9,10,11,12,13,14,15,16]; - - $themes=[]; - foreach ($theme_order as $id){ - if(isset($medialibrary['themes'][$id])){ - $themes[$id]=$medialibrary['themes'][$id]; - } - } - - $media=[]; - $ffprobe = FFMpeg\FFProbe::create(); - foreach ($medialibrary['assets'] as $a) { - /** @var $a \Cubist\Backpack\Magic\PageData */ - $file=$a->getMediaPathsByCollection($a->get('file_upload'))[0]??null; - if(null===$file){ - continue; - } - - $spf=new SplFileInfo($file); - $ext=mb_strtolower($spf->getExtension()); - if(in_array($ext,['pdf','jpg','jpeg','gif','png'])){ - continue; - } - $map=['mp3'=>'audio','mp4'=>'video']; - $type=$map[$ext]??$a->get('type'); - - $media[$a['id']]=[ - 'id'=>$a->get('id'), - 'type'=>$type, - 'theme'=>$a->get('theme'), - 'code'=>$a->get('code'), - 'title'=>$a->get('title'), - 'file'=>$a->getImageURLbyCollection($a->get('file_upload')), - 'image'=>$a->getImageURLbyCollection($a->get('file_thumb'))??$a->getImageURLbyCollection($a->get('file_upload'),'poster'), - 'duration'=>$ffprobe->format($file)->get('duration') - ]; - } - @endphp -
{{-- vertical padding so accents don't get cropped --}}

diff --git a/resources/views/front/media.blade.php b/resources/views/front/media.blade.php new file mode 100644 index 0000000..a82291a --- /dev/null +++ b/resources/views/front/media.blade.php @@ -0,0 +1,73 @@ +@foreach ($media as $item) + + @php + $filters = []; + if (!is_array($item['theme'])) { + $item['theme'] = [$item['theme']]; + } + foreach ($item['theme'] as $t) { + $filters[] = 'theme-'.$t; + } + $theme = $themes[$item['theme'][0]]; + $player_data = [ + 'ID' => $item['id'], + 'player' => [ + 'type' => $item['type'], // video / audio + 'sources' => [ + [ + 'src' => $item['file'], + ] + ] + ], + 'title' => $item['title'], + 'image' => $item['image'], + ]; + @endphp + +
+
+ + {{-- Play Icon --}} + + {{-- Icon BG --}} + + + + @if ($item['type'] === 'audio') + {{-- Audio Play Icon --}} + + + + + @else + {{-- Video Play Icon --}} + + @endif + + + + + {{ $item['duration'] }} + +
+ {{-- THEME LABEL --}} +
+ {{ $theme['name'] }} +
+ {{-- Set min height of 2 lines so intial float layout is less likely to have misplaced blocks --}} +
+ ({{$item['code']}}) {{ $item['title'] }} +
+
+@endforeach diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index be46663..4e503d5 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -90,6 +90,21 @@ }, } } + + function simulateClick(elem) { + // Create our event (with options) + var evt = new MouseEvent('click', { + bubbles: true, + cancelable: true, + view: window + }); + // If cancelled, don't dispatch our event + var canceled = !elem.dispatchEvent(evt); + } + + function openVideo(id) { + simulateClick(document.getElementById('media_' + id)); + } @endpush @@ -97,115 +112,118 @@ -@endsection + @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. - --}} -
- - -
- @yield('content') + @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. + --}} +
+ + +
+ @yield('content') +
-
- {{-- MENU OVERLAY --}} -
+ x-show="menuOpen" + x-transition.opacity.duration.500ms + x-transition:leave.opacity.duration.500ms.delay.500ms + x-cloak> - + -
    - @foreach ($menu as $link) +
      + @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 --}} -
    • -
      -
      • -
    • -
      • - @endforeach -
    -
- - {{-- PDF Viewer Overlay --}} -
+ + @endforeach + +
+ + {{-- PDF Viewer Overlay --}} +
- - {{-- PDF Viewer iframe --}} - - - - -
- -
- - -
- - {{-- Media Player --}} - - - {{-- Search Overlay (placed last so it sits above other modals, like the PDF viewer, with the same z-index) --}} - + x-show="PDFOpen" + x-transition:enter.opacity.duration.500ms + x-transition:leave.opacity.duration.200ms + x-cloak> + + {{-- PDF Viewer iframe --}} + + + + +
+ +
+ + +
+ + {{-- Media Player --}} + + + {{-- Search Overlay (placed last so it sits above other modals, like the PDF viewer, with the same z-index) --}} + @endsection