From: Stephen Cameron Date: Mon, 29 Nov 2021 23:56:59 +0000 (+0100) Subject: WIP #4781 @11 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4a08ca2f8ced9decc06a41e3e0ee809017a2d330;p=odl.git WIP #4781 @11 --- diff --git a/public/images/splash-bg.jpg b/public/images/splash-bg.jpg new file mode 100644 index 0000000..9898465 Binary files /dev/null and b/public/images/splash-bg.jpg differ diff --git a/public/images/splash-illustration.png b/public/images/splash-illustration.png new file mode 100644 index 0000000..51cfa30 Binary files /dev/null and b/public/images/splash-illustration.png differ diff --git a/public/images/splash-text.svg b/public/images/splash-text.svg new file mode 100644 index 0000000..92f0917 --- /dev/null +++ b/public/images/splash-text.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/resources/css/common/global.css b/resources/css/common/global.css index 5b8f38b..21e8a5d 100644 --- a/resources/css/common/global.css +++ b/resources/css/common/global.css @@ -13,7 +13,7 @@ h1, h2, h3, h4 { h1 { @apply text-6xl; } h2 { @apply text-4xl; } -[x-cloak] { visibility: hidden !important; } +[x-cloak] { display: none !important; } .circle-arrow { display: inline-block; diff --git a/resources/css/common/plyr.css b/resources/css/common/plyr.css index 08eb7d5..8b7edc9 100644 --- a/resources/css/common/plyr.css +++ b/resources/css/common/plyr.css @@ -1,12 +1,14 @@ :root { - --plyr-color-main: theme('colors.blue-dark'); - --plyr-range-fill-background: #fff; - --plyr-control-radius: 50%; + --plyr-color-main: theme('colors.blue'); --plyr-control-spacing: 21.45px; -} - -.plyr--audio { - --plyr-range-fill-background: #000; + --plyr-control-radius: 50%; + --plyr-range-track-height: 4px; + --plyr-range-fill-background: #fff; + --plyr-range-thumb-height: 12px; /* Size of drag circle on sliders */ + --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.8); + --plyr-video-control-background-hover: theme('colors.blue-dark'); + --plyr-audio-control-background-hover: theme('colors.blue-dark'); + --plyr-audio-control-color: #000; } .plyr-timecode { @@ -18,3 +20,66 @@ [data-plyr="play"] { background: var(--plyr-color-main); } + +[data-plyr="mute"] { + padding: 0; + border-radius: 0; + margin-left: 20px; +} + +[data-plyr="mute"]:hover { + background: none !important; + color: currentColor !important; +} + +[data-plyr="mute"] svg { + width: 23px; + height: 23px; +} + +.plyr__volume input[type="range"] { + min-width: 100px; +} + +/* Progress / volume slider bars */ +input[type="range"][data-plyr="seek"]::-webkit-slider-container { + /* Main seek slider centre line is the same height as the slider but the linear gradient only fills the central 50% */ + /* This gives the effect of a central line that is half the height and the progress bar overfills it */ + background-size: 100% var(--plyr-range-track-height, 4px); + background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%); + background-repeat: no-repeat; + background-position: center; +} +input[type=range][data-plyr="seek"]::-webkit-slider-runnable-track { + background-color: transparent !important; /* No bg here because we have the container background for the track line instead */ +} + +.plyr__progress__buffer::-webkit-progress-value { + height: calc(var(--plyr-range-track-height, 4px) / 2); /* Make progress indication the same height as the slider centre line */ + margin-top: calc(var(--plyr-range-track-height, 4px) / 4); /* Make sure progress line is aligned with main slider centre line */ +} + +.plyr--full-ui input[type=range]::-webkit-slider-thumb { + opacity: 0; /* Only visible on hover */ +} +.plyr--full-ui input[type=range]:hover::-webkit-slider-thumb { + opacity: 1; +} +input[type=range][data-plyr="volume"]::-webkit-slider-runnable-track { + height: calc(var(--plyr-range-track-height, 4px) / 2); + background-color: rgba(255, 255, 255, 0.25) !important; /* Non-filled volume range on videos */ +} + + +/* Audio Player */ +.plyr--audio { + --plyr-range-fill-background: #000; +} + +.plyr--audio [data-plyr="play"] { + color: #fff; +} + +.plyr--audio input[type=range][data-plyr="volume"]::-webkit-slider-runnable-track { + background-color: rgba(0, 0, 0, 0.25) !important; /* Non-filled volume range on audio player */ +} diff --git a/resources/js/media-library.js b/resources/js/media-library.js index cf9e7e5..0397ee3 100644 --- a/resources/js/media-library.js +++ b/resources/js/media-library.js @@ -19,8 +19,11 @@ export default (options = {}) => ({ debug: false, loadSprite: false, // Custom SVG sprite is already embedded in the page }, + playerType: '', // Set when opening the player: video or audio playerDuration: '00’00', playerTime: '00’00', + playerTitle: '', + playerImage: '', /***********\ | Filtering | @@ -106,7 +109,10 @@ export default (options = {}) => ({ }, openPlayer(sourceData) { - this.player.source = sourceData; + this.playerType = sourceData.player.type; + this.playerTitle = sourceData.title; + this.playerImage = sourceData.image; + this.player.source = sourceData.player; this.player.play(); this.playerOpen = true; }, diff --git a/resources/views/components/duration.blade.php b/resources/views/components/duration.blade.php index a85486a..d713d25 100644 --- a/resources/views/components/duration.blade.php +++ b/resources/views/components/duration.blade.php @@ -6,5 +6,5 @@ @endphp - {{ str_pad($minutes, 2, STR_PAD_LEFT) }}’{{ str_pad($seconds, 2, STR_PAD_LEFT) }} + {{ str_pad($minutes, 2, '0', STR_PAD_LEFT) }}’{{ str_pad($seconds, 2, '0', STR_PAD_LEFT) }} diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php index 163e9c2..72e188a 100644 --- a/resources/views/components/media-library/index.blade.php +++ b/resources/views/components/media-library/index.blade.php @@ -30,12 +30,15 @@
@foreach ($media as $item)
{{ $item['theme']['title'] }}
-
+ {{-- Set min height of 2 lines so intial float layout is less likely to have misplaced blocks --}} +
{{ $item['title'] }}
diff --git a/resources/views/components/media-library/player.blade.php b/resources/views/components/media-library/player.blade.php index 0ccc306..c085c5b 100644 --- a/resources/views/components/media-library/player.blade.php +++ b/resources/views/components/media-library/player.blade.php @@ -49,9 +49,18 @@