From 209559cd0c12199380bf4342faafc4fe297b6f52 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 16 Nov 2021 21:35:41 +0100 Subject: [PATCH] WIP #4822 @8 --- package-lock.json | 92 +++++++ package.json | 1 + resources/js/media-library.js | 7 +- resources/views/components/close.blade.php | 11 + .../media-library/filter-interface.blade.php | 85 +++++++ .../media-library/filter-list.blade.php | 63 +++++ .../components/media-library/index.blade.php | 81 ++++++ .../components/media-library/player.blade.php | 47 ++++ resources/views/front/media-library.blade.php | 230 ++---------------- resources/views/layouts/app.blade.php | 2 + webpack.mix.js | 4 + 11 files changed, 408 insertions(+), 215 deletions(-) create mode 100644 resources/views/components/close.blade.php create mode 100644 resources/views/components/media-library/filter-interface.blade.php create mode 100644 resources/views/components/media-library/filter-list.blade.php create mode 100644 resources/views/components/media-library/index.blade.php create mode 100644 resources/views/components/media-library/player.blade.php diff --git a/package-lock.json b/package-lock.json index 02f6688..696a89c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "isotope-layout": "^3.0.6", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", + "plyr": "^3.6.9", "postcss": "^8.3.10", "postcss-import": "^14.0.2", "tailwindcss": "^2.2.17" @@ -3267,6 +3268,17 @@ "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", "dev": true }, + "node_modules/core-js": { + "version": "3.19.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.1.tgz", + "integrity": "sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==", + "dev": true, + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/core-js-compat": { "version": "3.18.3", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.18.3.tgz", @@ -3641,6 +3653,12 @@ "node": ">=8.0.0" } }, + "node_modules/custom-event-polyfill": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz", + "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==", + "dev": true + }, "node_modules/debug": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", @@ -5899,6 +5917,12 @@ "json5": "lib/cli.js" } }, + "node_modules/loadjs": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz", + "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==", + "dev": true + }, "node_modules/locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -6907,6 +6931,19 @@ "node": ">=8" } }, + "node_modules/plyr": { + "version": "3.6.9", + "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.6.9.tgz", + "integrity": "sha512-KYi6o0799iw6yWZSmpZyx0tcrdNB+uGrUb/pskBjBzUax8fevzkqUx9A5vayYRBjlSme2UA8fHjTw3SMeHEvRA==", + "dev": true, + "dependencies": { + "core-js": "^3.10.1", + "custom-event-polyfill": "^1.0.7", + "loadjs": "^4.2.0", + "rangetouch": "^2.0.1", + "url-polyfill": "^1.1.12" + } + }, "node_modules/portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -7739,6 +7776,12 @@ "node": ">= 0.6" } }, + "node_modules/rangetouch": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz", + "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==", + "dev": true + }, "node_modules/raw-body": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", @@ -9047,6 +9090,12 @@ "querystring": "0.2.0" } }, + "node_modules/url-polyfill": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz", + "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==", + "dev": true + }, "node_modules/url/node_modules/punycode": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", @@ -12201,6 +12250,12 @@ "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", "dev": true }, + "core-js": { + "version": "3.19.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.1.tgz", + "integrity": "sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==", + "dev": true + }, "core-js-compat": { "version": "3.18.3", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.18.3.tgz", @@ -12490,6 +12545,12 @@ "css-tree": "^1.1.2" } }, + "custom-event-polyfill": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz", + "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==", + "dev": true + }, "debug": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", @@ -14227,6 +14288,12 @@ } } }, + "loadjs": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz", + "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==", + "dev": true + }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -15012,6 +15079,19 @@ "find-up": "^4.0.0" } }, + "plyr": { + "version": "3.6.9", + "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.6.9.tgz", + "integrity": "sha512-KYi6o0799iw6yWZSmpZyx0tcrdNB+uGrUb/pskBjBzUax8fevzkqUx9A5vayYRBjlSme2UA8fHjTw3SMeHEvRA==", + "dev": true, + "requires": { + "core-js": "^3.10.1", + "custom-event-polyfill": "^1.0.7", + "loadjs": "^4.2.0", + "rangetouch": "^2.0.1", + "url-polyfill": "^1.1.12" + } + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -15556,6 +15636,12 @@ "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", "dev": true }, + "rangetouch": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz", + "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==", + "dev": true + }, "raw-body": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", @@ -16606,6 +16692,12 @@ } } }, + "url-polyfill": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz", + "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==", + "dev": true + }, "util": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", diff --git a/package.json b/package.json index 1d99dfd..939c6e9 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "isotope-layout": "^3.0.6", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", + "plyr": "^3.6.9", "postcss": "^8.3.10", "postcss-import": "^14.0.2", "tailwindcss": "^2.2.17" diff --git a/resources/js/media-library.js b/resources/js/media-library.js index 9941804..49a1358 100644 --- a/resources/js/media-library.js +++ b/resources/js/media-library.js @@ -1,11 +1,16 @@ // Media Library functionality export default (options = {}) => ({ filters: options.filters || {}, // Filters JSON array is passed in from HTML - gridSelector: options.gridSelector || false, + gridSelector: options.gridSelector || false, // CSS selector for main Isotope element filtersOpen: false, activeTypeFilters: [], activeThemeFilters: [], isotope: {}, + playerOpen: false, + playerType: 'video', // Can be 'video' or 'audio' + playerSrc: '', + playerPoster: '', + playerMIME: '', get themeFilterList() { // Convert active theme filters array into class string for Isotope diff --git a/resources/views/components/close.blade.php b/resources/views/components/close.blade.php new file mode 100644 index 0000000..b473860 --- /dev/null +++ b/resources/views/components/close.blade.php @@ -0,0 +1,11 @@ +{{-- Close --}} + + Fermer + + + + + + + + diff --git a/resources/views/components/media-library/filter-interface.blade.php b/resources/views/components/media-library/filter-interface.blade.php new file mode 100644 index 0000000..a719053 --- /dev/null +++ b/resources/views/components/media-library/filter-interface.blade.php @@ -0,0 +1,85 @@ +{{-- FILTER SELECTION INTERFACE (full screen overlay) --}} + +@aware(['types', 'themes']) + +
+ + {{-- Close --}} + + +
+ +

Filtres

+ + {{-- Filter Options --}} +
+ {{-- Media Type Filters --}} +
+

Média

+
+ @foreach($types as $type_id => $type) + + @endforeach +
+
+ + {{-- Theme Filters --}} +
+

Thème

+
+ @foreach($themes as $theme_id => $theme) + + @endforeach +
+
+ +
+ +
+ +
+ +
+
diff --git a/resources/views/components/media-library/filter-list.blade.php b/resources/views/components/media-library/filter-list.blade.php new file mode 100644 index 0000000..9d20d45 --- /dev/null +++ b/resources/views/components/media-library/filter-list.blade.php @@ -0,0 +1,63 @@ +{{-- FILTERS --}} +
+ + {{-- FILTER INTERFACE BUTTON --}} + + Filtrer + + + {{-- ACTIVE [MEDIA TYPE] FILTERS (JS) --}} + {{-- Media types must be filtered separately from themes --}} + + + {{-- ACTIVE [THEME] FILTERS (JS) --}} + +
diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php new file mode 100644 index 0000000..1beda02 --- /dev/null +++ b/resources/views/components/media-library/index.blade.php @@ -0,0 +1,81 @@ +{{-- Media Library widget --}} +{{-- See alpine.js for setup and media-library.js for code --}} +@php + // Set defaults in case data is empty + $types ??= []; + $themes ??= []; + + // Format arrays for use on frontend + $media_filters = collect($types)->mapWithKeys(function($item, $key) { + return ["media-$key" => $item]; + }); + $theme_filters = collect($themes)->mapWithKeys(function($item, $key) { + return ["theme-$key" => $item]; + }); + $filters = array_merge($media_filters->toArray(), $theme_filters->toArray()); + +@endphp + +@push('before_scripts') + +@endpush + +{{-- See media_library() definition in resources/js/media-library.js --}} +
+ + + + {{-- MEDIA LIBRARY GRID --}} + {{-- Negative margins applied here to offset margins used in Isotope grid --}} +
+ @foreach ($media as $item) +
+
+ + {{-- Play Icon --}} + + {{-- Icon BG --}} + + + + @if ($item['type'] === 'audio') + {{-- Audio Play Icon --}} + + + + + @else + {{-- Video Play Icon --}} + + @endif + + + + {{ $item['duration'] }} +
+ {{-- THEME LABEL --}} +
+ {{ $item['theme']['title'] }} +
+
+ {{ $item['title'] }} +
+
+ @endforeach +
+ + + + + +
diff --git a/resources/views/components/media-library/player.blade.php b/resources/views/components/media-library/player.blade.php new file mode 100644 index 0000000..8beacd0 --- /dev/null +++ b/resources/views/components/media-library/player.blade.php @@ -0,0 +1,47 @@ +{{-- MEDIA PLAYER (full screen overlay) --}} + +@push('before_css') + +@endpush + +@push('before_scripts') + +@endpush + +
+ + + +
+ + + + + + +
+
diff --git a/resources/views/front/media-library.blade.php b/resources/views/front/media-library.blade.php index 2c86c16..16f5666 100644 --- a/resources/views/front/media-library.blade.php +++ b/resources/views/front/media-library.blade.php @@ -10,7 +10,8 @@ 'type' => 'video', 'duration' => '78', 'image' => 'https://odl.paris.cubedesigners.com/storage/46/conversions/VIDEO2-poster.jpg', - 'file' => '#', + 'file' => 'https://odl.paris.cubedesigners.com/storage/46/VIDEO2.mov', + 'mime_type' => 'video/mp4', 'theme' => [ 'id' => 1, 'title' => 'Gouvernance', @@ -22,7 +23,8 @@ 'type' => 'video', 'duration' => '192', 'image' => 'https://odl.paris.cubedesigners.com/storage/4/conversions/Big-rock-at-the-beach-poster.jpg', - 'file' => '#', + 'file' => 'https://odl.paris.cubedesigners.com/storage/4/Big-rock-at-the-beach.mp4', + 'mime_type' => 'video/mp4', 'theme' => [ 'id' => 2, 'title' => 'Communication', @@ -34,7 +36,8 @@ 'type' => 'video', 'duration' => '322', 'image' => 'https://odl.paris.cubedesigners.com/storage/46/conversions/VIDEO2-poster.jpg', - 'file' => '#', + 'file' => 'https://odl.paris.cubedesigners.com/storage/46/VIDEO2.mov', + 'mime_type' => 'video/mp4', 'theme' => [ 'id' => 3, 'title' => 'Organisation', @@ -46,7 +49,8 @@ 'type' => 'audio', 'duration' => '987', 'image' => 'https://odl.paris.cubedesigners.com/storage/4/conversions/Big-rock-at-the-beach-poster.jpg', - 'file' => '#', + 'file' => 'https://odl.paris.cubedesigners.com/storage/83/hs1mp3.mp3', + 'mime_type' => 'audio/mpeg', 'theme' => [ 'id' => 4, 'title' => 'Système d’information', @@ -58,7 +62,8 @@ 'type' => 'video', 'duration' => '414', 'image' => 'https://odl.paris.cubedesigners.com/storage/46/conversions/VIDEO2-poster.jpg', - 'file' => '#', + 'file' => 'https://odl.paris.cubedesigners.com/storage/46/VIDEO2.mov', + 'mime_type' => 'video/mp4', 'theme' => [ 'id' => 1, 'title' => 'Gouvernance', @@ -70,7 +75,8 @@ 'type' => 'audio', 'duration' => '45', 'image' => 'https://odl.paris.cubedesigners.com/storage/4/conversions/Big-rock-at-the-beach-poster.jpg', - 'file' => '#', + 'file' => 'https://odl.paris.cubedesigners.com/storage/83/hs1mp3.mp3', + 'mime_type' => 'audio/mpeg', 'theme' => [ 'id' => 2, 'title' => 'Communication', @@ -94,217 +100,13 @@ '4' => "Système d'information", '8' => "Conditions techniques", ]; - - // Format arrays for use on frontend - $media_filters = collect($media_types)->mapWithKeys(function($item, $key) { - return ["media-$key" => $item]; - }); - $theme_filters = collect($themes)->mapWithKeys(function($item, $key) { - return ["theme-$key" => $item]; - }); - $filters = array_merge($media_filters->toArray(), $theme_filters->toArray()); - @endphp - {{-- Media Library widget --}} - {{-- See alpine.js for setup and media-library.js for code --}} -
- -

Médiathèque

- - {{-- FILTERS --}} -
- - {{-- FILTER INTERFACE BUTTON --}} - - Filtrer - - - {{-- ACTIVE [MEDIA TYPE] FILTERS (JS) --}} - {{-- Media types must be filtered separately from themes --}} - - - {{-- ACTIVE [THEME] FILTERS (JS) --}} - -
- - {{-- MEDIA LIBRARY GRID --}} - {{-- Negative margins applied here to offset margins used in Isotope grid --}} -
- @foreach ($media as $item) -
-
- - {{-- Play Icon --}} - - - - - - - - {{ $item['duration'] }} -
- {{-- THEME LABEL --}} -
- {{ $item['theme']['title'] }} [{{ strtoupper($item['type']) }}] -
-
- {{ $item['title'] }} -
-
- @endforeach -
- - {{-- FILTER SELECTION INTERFACE (full screen overlay) --}} -
+

Médiathèque

- {{-- Close --}} - - Fermer - - - - - - - - - -
- -

Filtres

- - {{-- Filter Options --}} -
- {{-- Media Type Filters --}} -
-

Média

-
- @foreach($media_types as $media_type_id => $media_type) - - @endforeach -
-
- - {{-- Theme Filters --}} -
-

Thème

-
- @foreach($themes as $theme_id => $theme) - - @endforeach -
-
- -
- -
- -
- -
-
- -
+ {{-- Media library (components/media-library/index.blade.php) --}} + @endsection -@push('before_scripts') - -@endpush + diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 4722bff..c7c23ad 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -3,7 +3,9 @@ + @stack('before_css') + @stack('after_css') {{ config('app.name') }} diff --git a/webpack.mix.js b/webpack.mix.js index eacbded..233a7b0 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -9,3 +9,7 @@ mix.js('resources/js/app.js', 'public/js') // Copy pre-compiled Isotope JS package mix.copy('node_modules/isotope-layout/dist/isotope.pkgd.min.js', 'public/js/isotope.js'); + +// Copy Plyr resources +mix.copy('node_modules/plyr/dist/plyr.min.js', 'public/js/plyr.js'); +mix.copy('node_modules/plyr/dist/plyr.css', 'public/css/plyr.css'); -- 2.39.5