diff --git a/CHANGELOG.md b/CHANGELOG.md index 8cfacc97..d78a4c82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +1.9.16 / 2023-09-12 +================== + +* Video player face-lift - redesigned themes, icons, volume-bar. + 1.9.15 / 2023-08-30 ================== @@ -5,7 +10,6 @@ * Use cloudinary-video-analytics * Collect video player usage - 1.9.15 / 2023-08-29 ================== diff --git a/package.json b/package.json index 0fa7e1cc..6f4f35fd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cloudinary-video-player", - "version": "1.9.15", + "version": "1.9.17-edge.0", "description": "Cloudinary Video Player", "author": "Cloudinary", "license": "MIT", diff --git a/src/assets/fonts/VideoJS.svg b/src/assets/fonts/VideoJS.svg deleted file mode 100755 index 507c1bb3..00000000 --- a/src/assets/fonts/VideoJS.svg +++ /dev/null @@ -1,120 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/fonts/VideoJS.ttf b/src/assets/fonts/VideoJS.ttf deleted file mode 100755 index 858294f6..00000000 Binary files a/src/assets/fonts/VideoJS.ttf and /dev/null differ diff --git a/src/assets/fonts/VideoJS.woff b/src/assets/fonts/VideoJS.woff deleted file mode 100755 index 06161dc9..00000000 Binary files a/src/assets/fonts/VideoJS.woff and /dev/null differ diff --git a/src/assets/icon-font/README.md b/src/assets/icon-font/README.md new file mode 100644 index 00000000..caae8d76 --- /dev/null +++ b/src/assets/icon-font/README.md @@ -0,0 +1,5 @@ +# Cloudinary Video Player Icons + +## How to generate an updated icon-font + +Use the utility from https://github.com/videojs/font with the custom icons in the `cld` folder and the configuration in the `icons.json` provided here. diff --git a/src/assets/icon-font/VideoJS.svg b/src/assets/icon-font/VideoJS.svg new file mode 100755 index 00000000..613c6bac --- /dev/null +++ b/src/assets/icon-font/VideoJS.svg @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icon-font/VideoJS.ttf b/src/assets/icon-font/VideoJS.ttf new file mode 100755 index 00000000..1969881c Binary files /dev/null and b/src/assets/icon-font/VideoJS.ttf differ diff --git a/src/assets/icon-font/VideoJS.woff b/src/assets/icon-font/VideoJS.woff new file mode 100755 index 00000000..ffb4e69d Binary files /dev/null and b/src/assets/icon-font/VideoJS.woff differ diff --git a/src/assets/icon-font/custom-icons/cld/check.svg b/src/assets/icon-font/custom-icons/cld/check.svg new file mode 100644 index 00000000..b88942cc --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icon-font/custom-icons/cld/forward-10.svg b/src/assets/icon-font/custom-icons/cld/forward-10.svg new file mode 100644 index 00000000..bb6bf1fc --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/forward-10.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/fullscreen-exit.svg b/src/assets/icon-font/custom-icons/cld/fullscreen-exit.svg new file mode 100644 index 00000000..387080e7 --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/fullscreen-exit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/fullscreen.svg b/src/assets/icon-font/custom-icons/cld/fullscreen.svg new file mode 100644 index 00000000..2b1930ca --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/fullscreen.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/pause.svg b/src/assets/icon-font/custom-icons/cld/pause.svg new file mode 100644 index 00000000..05bc4106 --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/pause.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/picture-in-picture-off.svg b/src/assets/icon-font/custom-icons/cld/picture-in-picture-off.svg new file mode 100644 index 00000000..4064c768 --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/picture-in-picture-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/picture-in-picture-on.svg b/src/assets/icon-font/custom-icons/cld/picture-in-picture-on.svg new file mode 100644 index 00000000..b13da659 --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/picture-in-picture-on.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/play.svg b/src/assets/icon-font/custom-icons/cld/play.svg new file mode 100644 index 00000000..e5f20c9c --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/play.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/replay-10.svg b/src/assets/icon-font/custom-icons/cld/replay-10.svg new file mode 100644 index 00000000..5e23bcba --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/replay-10.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/settings.svg b/src/assets/icon-font/custom-icons/cld/settings.svg new file mode 100644 index 00000000..825dc37c --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/subtitles-off.svg b/src/assets/icon-font/custom-icons/cld/subtitles-off.svg new file mode 100644 index 00000000..5e57880d --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/subtitles-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/subtitles-on.svg b/src/assets/icon-font/custom-icons/cld/subtitles-on.svg new file mode 100644 index 00000000..e1aa18f0 --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/subtitles-on.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/volume-down.svg b/src/assets/icon-font/custom-icons/cld/volume-down.svg new file mode 100644 index 00000000..22ca71b3 --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/volume-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/volume-off.svg b/src/assets/icon-font/custom-icons/cld/volume-off.svg new file mode 100644 index 00000000..8cc34917 --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/volume-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-font/custom-icons/cld/volume-up.svg b/src/assets/icon-font/custom-icons/cld/volume-up.svg new file mode 100644 index 00000000..d1a7dba2 --- /dev/null +++ b/src/assets/icon-font/custom-icons/cld/volume-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/fonts/icons.json b/src/assets/icon-font/icons.json similarity index 51% rename from src/assets/fonts/icons.json rename to src/assets/icon-font/icons.json index 69055dab..50ab51cf 100644 --- a/src/assets/fonts/icons.json +++ b/src/assets/icon-font/icons.json @@ -3,52 +3,82 @@ "root-dir": "./node_modules/material-design-icons/", "icons": [{ "name": "play", - "svg": "av/svg/production/ic_play_arrow_48px.svg" + "svg": "play.svg", + "root-dir": "./custom-icons/cld/" }, { "name": "play-circle", "svg": "av/svg/production/ic_play_circle_outline_48px.svg" }, { "name": "pause", - "svg": "av/svg/production/ic_pause_48px.svg" + "svg": "pause.svg", + "root-dir": "./custom-icons/cld/" }, { "name": "volume-mute", - "svg": "av/svg/production/ic_volume_off_48px.svg" + "svg": "volume-off.svg", + "root-dir": "./custom-icons/cld/" }, { + "TODO": "missing custom icon", "name": "volume-low", "svg": "av/svg/production/ic_volume_mute_48px.svg" }, { "name": "volume-mid", - "svg": "av/svg/production/ic_volume_down_48px.svg" + "svg": "volume-down.svg", + "root-dir": "./custom-icons/cld/" }, { "name": "volume-high", - "svg": "av/svg/production/ic_volume_up_48px.svg" + "svg": "volume-up.svg", + "root-dir": "./custom-icons/cld/" }, { "name": "fullscreen-enter", - "svg": "navigation/svg/production/ic_fullscreen_48px.svg" + "svg": "fullscreen.svg", + "root-dir": "./custom-icons/cld/" }, { "name": "fullscreen-exit", - "svg": "navigation/svg/production/ic_fullscreen_exit_48px.svg" - }, { - "name": "square", - "svg": "image/svg/production/ic_crop_square_48px.svg" + "svg": "fullscreen-exit.svg", + "root-dir": "./custom-icons/cld/" }, { "name": "spinner", "svg": "image/svg/production/ic_camera_48px.svg" }, { + "TODO": "there's no subtitles off icon, not a toggle", "name": "subtitles", - "svg": "av/svg/production/ic_subtitles_48px.svg" + "svg": "subtitles-on.svg", + "root-dir": "./custom-icons/cld/" }, { "name": "captions", "svg": "av/svg/production/ic_closed_caption_48px.svg" + }, { + "name": "hd", + "svg": "av/svg/production/ic_hd_24px.svg" }, { "name": "chapters", "svg": "action/svg/production/ic_list_48px.svg" + }, { + "name": "downloading", + "svg": "downloading.svg", + "root-dir": "./custom-icons/mdi-v4/" + }, { + "name": "file-download", + "svg": "file_download.svg", + "root-dir": "./custom-icons/mdi-v4/" + }, { + "name": "file-download-done", + "svg": "file_download_done.svg", + "root-dir": "./custom-icons/mdi-v4/" + }, { + "name": "file-download-off", + "svg": "file_download_off.svg", + "root-dir": "./custom-icons/mdi-v4/" }, { "name": "share", "svg": "social/svg/production/ic_share_48px.svg" }, { "name": "cog", - "svg": "action/svg/production/ic_settings_48px.svg" + "svg": "settings.svg", + "root-dir": "./custom-icons/cld/" + }, { + "name": "square", + "svg": "image/svg/production/ic_crop_square_48px.svg" }, { "name": "circle", "svg": "image/svg/production/ic_brightness_1_48px.svg" @@ -58,38 +88,69 @@ }, { "name": "circle-inner-circle", "svg": "image/svg/production/ic_adjust_48px.svg" - }, { - "name": "hd", - "svg": "av/svg/production/ic_hd_24px.svg" }, { "name": "cancel", "svg": "navigation/svg/production/ic_cancel_48px.svg" + }, { + "name": "repeat", + "svg": "av/svg/production/ic_repeat_48px.svg" }, { "name": "replay", "svg": "av/svg/production/ic_replay_48px.svg" }, { - "name": "play-previous", - "svg": "av/svg/production/ic_skip_previous_48px.svg" + "name": "replay-5", + "svg": "replay-5.svg", + "root-dir": "./custom-icons/skip-forward-backward/" + }, { + "name": "replay-10", + "svg": "replay-10.svg", + "root-dir": "./custom-icons/cld/" + }, { + "name": "replay-30", + "svg": "replay-30.svg", + "root-dir": "./custom-icons/skip-forward-backward/" }, { - "name": "play-next", + "name": "forward-5", + "svg": "forward-5.svg", + "root-dir": "./custom-icons/skip-forward-backward/" + }, { + "name": "forward-10", + "svg": "forward-10.svg", + "root-dir": "./custom-icons/cld/" + }, { + "name": "forward-30", + "svg": "forward-30.svg", + "root-dir": "./custom-icons/skip-forward-backward/" + }, { + "name": "audio", + "svg": "hardware/svg/production/ic_headset_48px.svg" + }, { + "name": "next-item", "svg": "av/svg/production/ic_skip_next_48px.svg" }, { - "name": "close", - "svg": "navigation/svg/production/ic_close_48px.svg" + "name": "previous-item", + "svg": "av/svg/production/ic_skip_previous_48px.svg" + }, { + "name": "shuffle", + "svg": "av/svg/production/ic_shuffle_48px.svg" }, { - "name": "skip-10-min", - "svg": "av/svg/production/ic_replay_10_48px.svg" + "name": "cast", + "svg": "hardware/svg/production/ic_cast_48px.svg" }, { - "name": "skip-10-plus", - "svg": "av/svg/production/ic_forward_10_48px.svg" + "name": "picture-in-picture-enter", + "svg": "picture-in-picture-on.svg", + "root-dir": "./custom-icons/cld/" + }, { + "name": "picture-in-picture-exit", + "svg": "picture-in-picture-off.svg", + "root-dir": "./custom-icons/cld/" + }, { + "name": "close", + "svg": "navigation/svg/production/ic_close_48px.svg" }, { "name": "facebook", "svg": "facebook.svg", "root-dir": "./custom-icons/fontawesome/" - }, { - "name": "gplus", - "svg": "gplus.svg", - "root-dir": "./custom-icons/fontawesome/" }, { "name": "linkedin", "svg": "linkedin.svg", @@ -110,11 +171,12 @@ "name": "audio-description", "svg": "audio-description.svg", "root-dir": "./custom-icons/" - }, { - "name": "audio", - "svg": "hardware/svg/production/ic_headset_48px.svg" }, { "name": "cart", "svg": "action/svg/production/ic_shopping_cart_48px.svg" + }, { + "name": "check", + "svg": "check.svg", + "root-dir": "./custom-icons/cld/" }] } diff --git a/src/assets/icons/cloudinary_icon_for_black_bg.svg b/src/assets/icons/cloudinary_icon_for_black_bg.svg index 5c684461..5a108827 100644 --- a/src/assets/icons/cloudinary_icon_for_black_bg.svg +++ b/src/assets/icons/cloudinary_icon_for_black_bg.svg @@ -1,69 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/icons/cloudinary_icon_for_white_bg.svg b/src/assets/icons/cloudinary_icon_for_white_bg.svg index 6bc08145..a284090d 100644 --- a/src/assets/icons/cloudinary_icon_for_white_bg.svg +++ b/src/assets/icons/cloudinary_icon_for_white_bg.svg @@ -1,69 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/icons/cloudinary_logo_for_dark_bg.svg b/src/assets/icons/cloudinary_logo_for_dark_bg.svg deleted file mode 100644 index 6e3f0be7..00000000 --- a/src/assets/icons/cloudinary_logo_for_dark_bg.svg +++ /dev/null @@ -1,188 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/icons/cloudinary_logo_for_white_bg.svg b/src/assets/icons/cloudinary_logo_for_white_bg.svg deleted file mode 100644 index 5e651d54..00000000 --- a/src/assets/icons/cloudinary_logo_for_white_bg.svg +++ /dev/null @@ -1,188 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/styles/_icons.scss b/src/assets/styles/_icons.scss new file mode 100644 index 00000000..6431af6d --- /dev/null +++ b/src/assets/styles/_icons.scss @@ -0,0 +1,97 @@ +// https://github.com/sass/sass/issues/659#issuecomment-64819075 +@function char($character-code) { + @if function-exists("selector-append") { + @return unquote("\"\\#{$character-code}\""); + } + + @return str-slice("\x", 1, 1) + $character-code; +} + +$icon-font-family: VideoJS; + +@font-face { + font-family: $icon-font-family; + src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'); + font-weight: normal; + font-style: normal; +} + +// https://sass-lang.com/documentation/values/maps +$icons: ( + play: 'f101', + play-circle: 'f102', + pause: 'f103', + volume-mute: 'f104', + volume-low: 'f105', + volume-mid: 'f106', + volume-high: 'f107', + fullscreen-enter: 'f108', + fullscreen-exit: 'f109', + spinner: 'f10a', + subtitles: 'f10b', + captions: 'f10c', + hd: 'f10d', + chapters: 'f10e', + downloading: 'f10f', + file-download: 'f110', + file-download-done: 'f111', + file-download-off: 'f112', + share: 'f113', + cog: 'f114', + square: 'f115', + circle: 'f116', + circle-outline: 'f117', + circle-inner-circle: 'f118', + cancel: 'f119', + repeat: 'f11a', + replay: 'f11b', + replay-5: 'f11c', + replay-10: 'f11d', + replay-30: 'f11e', + forward-5: 'f11f', + forward-10: 'f120', + forward-30: 'f121', + audio: 'f122', + next-item: 'f123', + previous-item: 'f124', + shuffle: 'f125', + cast: 'f126', + picture-in-picture-enter: 'f127', + picture-in-picture-exit: 'f128', + close: 'f129', + facebook: 'f12a', + linkedin: 'f12b', + twitter: 'f12c', + tumblr: 'f12d', + pinterest: 'f12e', + audio-description: 'f12f', + cart: 'f130', + check: 'f131', +); + +// NOTE: This is as complex as we want to get with SCSS functionality. +// +// Now that we have a map of icons above, we can iterate over that map and create an icon class +// for each icon in that list. The iterator below produces CSS classes like this: +// +// .vjs-icon-play { +// font-family: VideoJS; +// font-weight: normal; +// font-style: normal; +// } +// .vjs-icon-play:before { content: "\f101"; } +// +// We can then use @extend in the codebase when we need to add an icon to a class. @extend builds up +// the selectors for you so you can avoid duplication. This is generally a bad idea, but since each +// icon should only be extended one or two other places, we'll roll with it. +@each $name, $content in $icons { + .vjs-icon-#{$name} { + font-family: $icon-font-family; + font-weight: normal; + font-style: normal; + + &:before { + content: char($content); + } + } +} diff --git a/src/assets/styles/ads-label.scss b/src/assets/styles/ads-label.scss deleted file mode 100644 index cad7bb75..00000000 --- a/src/assets/styles/ads-label.scss +++ /dev/null @@ -1,16 +0,0 @@ -.vjs-label-hidden { - display: none!important; -} - -.cld-video-player .vjs-control-bar .vjs-control.vjs-ads-label { - line-height: 3em; - font-weight: normal; - text-align: center; - display: none; - width: auto; - padding: 0 1em; - } - -.cld-video-player.vjs-ad-playing .vjs-control.vjs-ads-label { - display: block; - } diff --git a/src/assets/styles/components/themedButton.scss b/src/assets/styles/components/loading-button.scss similarity index 100% rename from src/assets/styles/components/themedButton.scss rename to src/assets/styles/components/loading-button.scss diff --git a/src/assets/styles/components/playlist.scss b/src/assets/styles/components/playlist.scss index b01965fe..95a47b29 100644 --- a/src/assets/styles/components/playlist.scss +++ b/src/assets/styles/components/playlist.scss @@ -148,7 +148,7 @@ text-shadow: 1px 1px 1px rgba(#000, .3); @media only screen and (max-width: 768px) { - background: #272727; + background: var(--color-base);; } } } diff --git a/src/assets/styles/components/thumbnail.scss b/src/assets/styles/components/thumbnail.scss index 30af4682..c442a792 100644 --- a/src/assets/styles/components/thumbnail.scss +++ b/src/assets/styles/components/thumbnail.scss @@ -1,94 +1,52 @@ - -@mixin thumbnail() { - position: relative; - display: block; - width: 100%; - overflow: hidden; - font-size: 1em; - text-align: left; - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - - .cld-thumbnail-img { - display: none; - } -} - .cld-thumbnail { - @include thumbnail(); - - .cld-video-player-skin-light & { - .cld-plw-item-info-wrap { - background: #fff; - } - - &.cld-plw-panel-item-active { - border: 1px solid #0078FF; - box-sizing: border-box; - - .cld-plw-item-info-wrap { - background: rgba(0, 119, 255, 0.8); - } - - .cld-plw-item-info-wrap { - color: #fff; - } - - &:hover { - .cld-plw-item-info-wrap { - color: #fff; - } - } - } - } - - .cld-video-player-skin-dark & { - &:before { - content: ''; - position: absolute; - top: 40%; - max-height: 60%; - right: 0; - bottom: 0; - left: 0; - background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 80%); - opacity: 1; - } - - &.cld-plw-panel-item-active { - border: 1px solid #FF620C; - box-sizing: border-box; - - @media only screen and (min-width: 769px) { - &:before { - background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 90%); - } + position: relative; + display: block; + width: 100%; + overflow: hidden; + font-size: 1em; + text-align: left; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + .cld-thumbnail-img { + display: none; + } - .cld-plw-item-info-wrap { - font-weight: 500; - } - } + &:before { + content: ''; + position: absolute; + top: 40%; + max-height: 60%; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient(to top, var(--color-base), transparent 80%); + opacity: 0.6; + } - .cld-plw-item-info-wrap { - color: #FF620C; - } - } + &.cld-plw-panel-item-active { + border: 1px solid var(--color-accent); + box-sizing: border-box; + .cld-plw-item-info-wrap { + color: var(--color-accent); } + } } .cld-plw-panel-item:hover:after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - top: 0px; - left: 0px; - background-color: rgba(255, 255, 255, 0.2); - } + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + background-color: var(--color-text); + opacity: 0.2; +} @media only screen and (max-width: 768px) { - .cld-thumbnail:before { - background: none; - } + .cld-thumbnail:before { + background: none; + } } diff --git a/src/assets/styles/components/title-bar.scss b/src/assets/styles/components/title-bar.scss index 2e6b41c3..db269c84 100644 --- a/src/assets/styles/components/title-bar.scss +++ b/src/assets/styles/components/title-bar.scss @@ -1,50 +1,48 @@ -.video-js .vjs-title-bar { - display: none; +.cld-video-player .vjs-title-bar { + display: flex; + flex-direction: column; + align-items: center; + + visibility: visible; + opacity: 1; + + transition: opacity 0.1s; width: 100%; position: absolute; top: 0; left: 0; - height: 7.2em; - text-align: left; - padding: 16px 21px; + padding: 2em; + padding: clamp(1.3em, 4cqw, 2em); pointer-events: none; + container-type: inline-size; .vjs-title-bar-title { width: 100%; - font-size: 1.2em; - font-weight: 500; - line-height: 1.2em; - margin-bottom: 0.55em; + font-weight: 700; + line-height: 1.2; + margin-bottom: 0.5em; + margin-bottom: clamp(0.2em, 1.5cqw, 0.5em);; + font-size: 1.8em; + font-size: clamp(1.3em, 4cqw, 1.8em); } .vjs-title-bar-subtitle { width: 100%; + font-weight: 100; + line-height: 1; font-size: 1em; - font-weight: 300; - line-height: 1em; + font-size: clamp(0.8em, 3cqw, 1.1em); } } -// Video has started playing -.vjs-has-started .vjs-title-bar { - display: flex; - flex-direction: column; - align-items: center; - - visibility: visible; - opacity: 1; - - transition: visibility 0.1s, opacity 0.1s; // Var needed because of comma -} - // Video has started playing AND user is inactive .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-title-bar { // Remain visible for screen reader and keyboard users visibility: visible; opacity: 0; - transition: visibility 1.0s, opacity 1.0s; + transition: opacity 1.0s; } .vjs-controls-disabled .vjs-title-bar, @@ -60,8 +58,3 @@ opacity: 1; visibility: visible; } - -// IE 8 + 9 Support -.vjs-has-started.vjs-no-flex .vjs-title-bar { - display: table; -} diff --git a/src/assets/styles/components/triangle-volume-bar.scss b/src/assets/styles/components/triangle-volume-bar.scss deleted file mode 100644 index 888a51ab..00000000 --- a/src/assets/styles/components/triangle-volume-bar.scss +++ /dev/null @@ -1,52 +0,0 @@ -.video-js { - $size: 20px; - $height: 1.2em; - $width: 6em; - - %triangle-volume-bar { - content: ''; - font-size: $size; - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; - line-height: 0px; - border-style: solid; - border-width: 0 0 $height $width; - border-color: transparent transparent #0e2f5a transparent; - } - - .vjs-volume-panel-horizontal { - - // Background triangle - .vjs-volume-control { - overflow: hidden; - height: 3em; - - &:before { - @extend %triangle-volume-bar; - } - } - - // Inner Container - .vjs-volume-bar { - margin: 0; - height: 100%; - background-color: transparent; - } - - // Inner triangle - .vjs-volume-level { - overflow: hidden; - height: 100%; - background: transparent; - box-shadow: none; - - &:before { - @extend %triangle-volume-bar; - border-color: transparent transparent #e8e8e9 transparent; - } - } - } -} diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss deleted file mode 100644 index bf31ba57..00000000 --- a/src/assets/styles/icons.scss +++ /dev/null @@ -1,189 +0,0 @@ -@font-face { - font-family: VideoJS; - src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff"); -} - -.vjs-icon-play, -.vjs-icon-play-circle, -.vjs-icon-pause, -.vjs-icon-volume-mute, -.vjs-icon-volume-low, -.vjs-icon-volume-mid , -.vjs-icon-volume-high, -.vjs-icon-fullscreen-enter, -.vjs-icon-fullscreen-exit, -.vjs-icon-square, -.vjs-icon-spinner, -.vjs-icon-subtitles, -.vjs-icon-captions, -.vjs-icon-chapters, -.vjs-icon-share, -.vjs-icon-cog, -.vjs-icon-circle, -.vjs-icon-circle-outline, -.vjs-icon-circle-inner-circle, -.vjs-icon-hd, -.vjs-icon-cancel, -.vjs-icon-replay, -.vjs-icon-play-previous, -.vjs-icon-play-next, -.vjs-icon-close, -.vjs-icon-skip-10-min, -.vjs-icon-skip-10-plus, -.vjs-icon-facebook, -.vjs-icon-gplus, -.vjs-icon-linkedin, -.vjs-icon-twitter, -.vjs-icon-tumblr, -.vjs-icon-pinterest, -.vjs-icon-audio-description, -.vjs-icon-audio, -.vjs-icon-cart { - font-family: VideoJS !important; - font-weight: normal; - font-style: normal; -} - -.vjs-icon-play:before { - content: "\f101"; -} - -.vjs-icon-play-circle:before { - content: "\f102"; -} - -.vjs-icon-pause:before { - content: "\f103"; -} - -.vjs-icon-volume-mute:before { - content: "\f104"; -} - -.vjs-icon-volume-low:before { - content: "\f105"; -} - -.vjs-icon-volume-mid:before { - content: "\f106"; -} - -.vjs-icon-volume-high:before { - content: "\f107"; -} - -.vjs-icon-fullscreen-enter:before { - content: "\f108"; -} - -.vjs-icon-fullscreen-exit:before { - content: "\f109"; -} - -.vjs-icon-square:before { - content: "\f10a"; -} - -.vjs-icon-spinner:before { - content: "\f10b"; -} - -.vjs-icon-subtitles:before { -content: "\f10c"; -} - -.vjs-icon-captions:before { - content: "\f10d"; -} - -.vjs-icon-chapters:before { - content: "\f10e"; -} - -.vjs-icon-share:before { - content: "\f10f"; -} - -.vjs-icon-cog:before { - content: "\f110"; -} - -.vjs-icon-circle:before { - content: "\f111"; -} - -.vjs-icon-circle-outline:before { - content: "\f112"; -} - -.vjs-icon-circle-inner-circle:before { - content: "\f113"; -} - -.vjs-icon-hd:before { - content: "\f114"; -} - -.vjs-icon-cancel:before { - content: "\f115"; -} - -.vjs-icon-replay:before { - content: "\f116"; -} - -.vjs-icon-play-previous:before { - content: "\f117"; -} - -.vjs-icon-play-next:before { - content: "\f118"; -} - -.vjs-icon-close:before { - content: "\f119"; -} - -.vjs-icon-skip-10-min:before { - content: "\f11a"; -} - -.vjs-icon-skip-10-plus:before { - content: "\f11b"; -} - -.vjs-icon-facebook:before { - content: "\f11c"; -} - -.vjs-icon-gplus:before { - content: "\f11d"; -} - -.vjs-icon-linkedin:before { - content: "\f11e"; -} - -.vjs-icon-twitter:before { - content: "\f11f"; -} - -.vjs-icon-tumblr:before { - content: "\f120"; -} - -.vjs-icon-pinterest:before { - content: "\f121"; -} - -.vjs-icon-audio-description:before { - content: "\f122"; -} - -.vjs-icon-audio:before { - content: "\f123"; -} - -.vjs-icon-cart:before { - content: "\f124"; -} diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index ae2026d4..06dbb37c 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -1,5 +1,5 @@ // Dependencies -$icon-font-path: '../fonts' !default; +$icon-font-path: '../icon-font' !default; // Video.js overrides @import 'variables'; @@ -8,74 +8,55 @@ $icon-font-path: '../fonts' !default; @import '~video.root.js/dist/video-js.min.css'; @import 'mixins/skin'; @import 'icons'; -@import 'ads-label'; @import 'videojs-ima'; @import 'components/interaction-areas.scss'; -@import 'components/themedButton'; +@import 'components/loading-button.scss'; - -// control bar control size -.video-js .vjs-control:before { - font-size: 2.0em; - line-height: 1.5em; -} -.video-js .vjs-control { - width: 3em; -} - - -.video-js { +.cld-video-player { + // container-type: inline-size; + font-family: $text-font-family; overflow: hidden; -} -.video-js .vjs-control, -.vjs-icon-close, -.vjs-volume-bar{ - z-index: 1; -} - -// focus and hover states -.video-js .vjs-control, -.vjs-big-play-button, -.vjs-icon-close, -.vjs-volume-bar { + // The base font size controls the size of everything, not just text. + // All dimensions use em-based sizes so that the scale along with the font size. + font-size: 12px; + font-weight: 300; &:focus { outline: none; } - &:hover { - opacity: 0.95; - } -} - -.vjs-cloudinary-button:focus { - opacity: 0.8; -} - -.vjs-big-play-button:focus { - .cld-video-player.cld-video-player-skin-dark & { - background-color: rgba(40, 40, 40, 0.8); + .vjs-control, + .vjs-icon-close, + .vjs-volume-bar { + z-index: 1; } - .cld-video-player.cld-video-player-skin-light & { - background-color: rgba(223, 234, 252, 0.8); + // focus and hover states + .vjs-control, + .vjs-big-play-button, + .vjs-icon-close, + .vjs-volume-bar { + &:focus { + outline: none; + } } -} -// light skin focus glow effect -.cld-video-player-skin-light { - .vjs-control:focus { - text-shadow: 0 0 1em #0E2F5A; + .vjs-control::before, + .vjs-icon-placeholder::before, + .vjs-time-divider, + .vjs-duration, + .vjs-playback-rate-value, + .vjs-cloudinary-button:focus { + opacity: 0.8; } -} - -.cld-video-player { - font-family: $text-font-family; - - - &:focus { - outline: none; + .vjs-control:hover::before, + .vjs-icon-placeholder:hover::before, + .vjs-time-divider:hover, + .vjs-duration:hover, + .vjs-playback-rate:hover .vjs-playback-rate-value { + opacity: 1; + text-shadow: none; } &.cld-fluid { @@ -92,19 +73,18 @@ $icon-font-path: '../fonts' !default; } } - // The base font size controls the size of everything, not just text. - // All dimensions use em-based sizes so that the scale along with the font size. - // Try increasing it to 15px and see what happens. - font-size: 12px; - font-weight: 300; - .vjs-time-control { - padding-left: 0; - padding-right: 0; + padding-left: 0.15em; + padding-right: 0.15em; + width: auto; + font-variant-numeric: tabular-nums; + > * { + font-size: 90%; + } } .vjs-time-divider { - min-width: 1em; + min-width: 0; display: block; } @@ -120,11 +100,15 @@ $icon-font-path: '../fonts' !default; display: block; } - .vjs-big-play-button { + .vjs-time-tooltip { + padding: 0.4em 0.6em; + top: -2.6em; + } + .vjs-big-play-button { // The font size is what makes the big play button...big. // All width/height values use ems, which are a multiple of the font size. - // If the .video-js font-size is 10px, then 3em equals 30px.*/ + // If the .cld-video-player font-size is 10px, then 3em equals 30px.*/ font-size: 5em; width: 1.5em; height: auto; @@ -155,7 +139,7 @@ $icon-font-path: '../fonts' !default; overflow: hidden; &:before { - content: ""; + content: ''; position: absolute; top: 50%; left: 100%; @@ -170,7 +154,7 @@ $icon-font-path: '../fonts' !default; border-top: 200px solid transparent; border-bottom: 200px solid transparent; margin-left: -300px; - margin-top:-200px; + margin-top: -200px; } } } @@ -199,19 +183,19 @@ $icon-font-path: '../fonts' !default; } .vjs-modal-dialog-content { - font-size: 20px; - font-weight: 500; - text-align: left; - padding: 0 10%; - display: flex; - align-items: center; + font-size: 20px; + font-weight: 500; + text-align: left; + padding: 0 10%; + display: flex; + align-items: center; &:before { - content: ""; + content: ''; width: 34px; height: 34px; margin-right: 10px; - background: url("../icons/info-circle.svg"); + background: url('../icons/info-circle.svg'); transform: translateY(-1px); flex-shrink: 0; } @@ -228,42 +212,62 @@ $icon-font-path: '../fonts' !default; opacity: 0; } - .vjs-control-bar { - z-index: 2; - - .vjs-volume-panel { - margin-right: 1em; + .vjs-progress-control.vjs-control { + &::before { + content: ''; + pointer-events: none; + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 5rem; + background: linear-gradient(to bottom, transparent 0%, currentColor 100%); + opacity: 0.4; + z-index: 0; } + } - .vjs-menu-button-inline:hover, - .vjs-menu-button-inline:focus, - .vjs-menu-button-inline.vjs-slider-active, - .vjs-no-flex .vjs-menu-button-inline { - // This width is currently specific to the inline volume bar. - width: 10em; - } + .vjs-control { + width: 2.5em; + } - .vjs-menu-button-inline:before { - width: 1.6em; - } + .vjs-control::before, + .vjs-icon-placeholder:before { + font-size: 1.8em; + line-height: 1.7; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } + + .vjs-control-bar { + z-index: 2; + backdrop-filter: blur(10px); + font-size: 120%; + // responsive controls sizes, based on container width + // font-size: clamp(100%, 2cqw, 150%); - .vjs-menu-button-inline .vjs-menu { - left: 3em; + .vjs-volume-panel { + margin-right: 0.5em; + &.vjs-volume-panel-horizontal { + max-width: 8em; + } } .vjs-progress-control { + backdrop-filter: blur(10px); position: absolute; left: 0px; width: 100%; - height: 1.2em; + height: 3px; bottom: 100%; - transform: translateY(50%); } .vjs-progress-holder { margin: 0; - height: 0.15em; z-index: 1; + height: 100%; &::after { // Make the interactive area bigger than the visible bar. content: ''; @@ -276,11 +280,12 @@ $icon-font-path: '../fonts' !default; } } .vjs-progress-control:hover { + z-index: 2; .vjs-progress-holder { - font-size: 1.2em; + font-size: inherit; transition: none; } - .vjs-time-tooltip { + .vjs-progress-holder .vjs-time-tooltip { font-size: 0.8em; } .vjs-progress-holder::after { @@ -289,25 +294,36 @@ $icon-font-path: '../fonts' !default; } } + .vjs-load-progress div { + background: none; + } .vjs-play-progress { &::before { - content: "\f111"; + display: none; } } - .vjs-progress-control-events-blocker { background-color: transparent; - @extend .vjs-progress-control + @extend .vjs-progress-control; } } + .vjs-playback-rate-value { + font-size: 1.3em; + line-height: 2.3em; + } + .vjs-subs-caps-button { .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder { vertical-align: top; display: inline-block; margin-bottom: -0.3em; } + + > .vjs-icon-placeholder:before { + content: '\f10b' !important; + } } .vjs-menu { @@ -317,15 +333,36 @@ $icon-font-path: '../fonts' !default; overflow: visible; padding: 0.2em 0; } + .vjs-selected { + background: none; + color: var(--color-text); + } .vjs-menu-item { text-align: left; white-space: nowrap; text-transform: capitalize; - font-size: 1em; + font-size: 0.9em; padding: 0 1em; line-height: 2em; - &.vjs-selected { - font-weight: bold; + } + &:has(.vjs-selected) { + .vjs-menu-item { + padding-left: 2em; + &.vjs-selected { + &:before { + font-family: VideoJS; + font-weight: 400; + font-style: normal; + + content: "\f131"; + display: block; + position: absolute; + width: 1em; + margin-left: -1.3em; + font-size: 1.2em; + line-height: 1.6; + } + } } } } diff --git a/src/assets/styles/mixins/skin.scss b/src/assets/styles/mixins/skin.scss index d3b3ca25..9cc86cad 100644 --- a/src/assets/styles/mixins/skin.scss +++ b/src/assets/styles/mixins/skin.scss @@ -1,64 +1,7 @@ -.cld-video-player { - - .vjs-time-tooltip, - .vjs-mouse-display:after, - .vjs-play-progress:after { - font-weight: 300; - padding: 0.4em 0.6em; - top: -2.6em; +.cld-video-player.cld-video-player-skin- { + // light skin focus glow effect + .vjs-control:focus { + opacity: 1; + text-shadow: 0 0 1em var(--color-text); } - - .vjs-recommendations-overlay .vjs-recommendations-overlay-item:active:after, - .vjs-recommendations-overlay .vjs-recommendations-overlay-item:hover:after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - top: 0px; - left: 0px; - background-color: rgba(255, 255, 255, 0.2); - } - - .vjs-context-menu-ui .vjs-menu-content .vjs-menu-item { - text-align: left; - } - - &.vjs-ad-playing .vjs-play-control.vjs-paused, - &.vjs-ad-playing .vjs-volume-level { - background-color: transparent !important; - } - - &.vjs-ad-playing .vjs-play-progress:before { - display: none; - } - -} - -.cld-video-player.cld-video-player-skin-light { - - .video-js button:hover, - .vjs-volume-menu-button:hover { - opacity: 0.9; - } - - .vjs-title-bar .vjs-title-bar-title:not(:empty) + - .vjs-title-bar-subtitle:not(:empty):before { - content: "\2022"; - padding: 0 0.45em; - font-size: 1.4em; - font-weight: 500; - } - - .vjs-title-bar { - flex-direction: row; - justify-content: left; - height: 3.6em; - - > div { - width: auto; - padding: 0; - margin: 0; - } - } - } diff --git a/src/components/index.js b/src/components/index.js index bf2c099f..a063341f 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -7,8 +7,6 @@ import RecommendationsOverlay from './recommendations-overlay'; import ShoppablePanel from './shoppable-bar/panel/shoppable-panel'; import TitleBar from './title-bar/title-bar'; -import 'assets/styles/components/triangle-volume-bar.scss'; - export { JumpForwardButton, JumpBackButton, diff --git a/src/components/jumpButtons/jump-10-minus.js b/src/components/jumpButtons/jump-10-minus.js index 4668346f..9b427e19 100644 --- a/src/components/jumpButtons/jump-10-minus.js +++ b/src/components/jumpButtons/jump-10-minus.js @@ -11,7 +11,7 @@ class JumpBackButton extends ClickableComponent { createEl() { return videojs.dom.createEl('button', { - className: 'vjs-control vjs-icon-skip-10-min vjs-button' + className: 'vjs-control vjs-icon-skip-10-min vjs-icon-replay-10 vjs-button' }); } } diff --git a/src/components/jumpButtons/jump-10-plus.js b/src/components/jumpButtons/jump-10-plus.js index 66b75be9..f3744278 100644 --- a/src/components/jumpButtons/jump-10-plus.js +++ b/src/components/jumpButtons/jump-10-plus.js @@ -10,7 +10,7 @@ class JumpForwardButton extends ClickableComponent { createEl() { return videojs.dom.createEl('button', { - className: 'vjs-control vjs-icon-skip-10-plus vjs-button' + className: 'vjs-control vjs-icon-skip-10-plus vjs-icon-forward-10 vjs-button' }); } } diff --git a/src/components/logoButton/logo-button.scss b/src/components/logoButton/logo-button.scss index 63b53ebe..e9d26aca 100644 --- a/src/components/logoButton/logo-button.scss +++ b/src/components/logoButton/logo-button.scss @@ -4,6 +4,7 @@ background-size: 25px; background-position: center; background-repeat: no-repeat; + color: inherit; .cld-video-player-skin-light & { background-image: url("../../assets/icons/cloudinary_icon_for_white_bg.svg"); @@ -12,4 +13,19 @@ &:hover { cursor: pointer; } + + &:last-child { + margin-right: 0.4em; + margin-left: 0.8em; + &::before { + content: ''; + position: absolute; + left: -0.25em; + top: 0.3em; + bottom: 0.3em; + border-left: 1px solid currentColor; + opacity: 0.25; + } + } + } diff --git a/src/components/playlist/components/playlist-button.js b/src/components/playlist/components/playlist-button.js index 26370502..6d322804 100644 --- a/src/components/playlist/components/playlist-button.js +++ b/src/components/playlist/components/playlist-button.js @@ -21,7 +21,7 @@ class PlaylistButton extends ClickableComponent { // The `createEl` function of a component creates its DOM element. createEl() { const type = this.options_.type; - const typeCssClass = `vjs-icon-play-${type}`; + const typeCssClass = `vjs-icon-${type}-item`; return videojs.dom.createEl('button', { // Prefixing classes of elements within a player with "vjs-" diff --git a/src/components/qualitySelector/quality-selector.scss b/src/components/qualitySelector/quality-selector.scss index f81c3cab..a57f73a5 100644 --- a/src/components/qualitySelector/quality-selector.scss +++ b/src/components/qualitySelector/quality-selector.scss @@ -1,10 +1,14 @@ -.video-js { - +.cld-video-player { .vjs-http-source-selector { - - .vjs-button { - font-size: 17px; + > .vjs-button { + > .vjs-icon-placeholder { + font-family: VideoJS; + font-weight: 400; + font-style: normal; + &:before { + content: "\f114"; + } + } } - } } diff --git a/src/plugins/aiHighlightsGraph/aiHighlightsGraph.scss b/src/plugins/aiHighlightsGraph/aiHighlightsGraph.scss index 5804cf82..0169816b 100644 --- a/src/plugins/aiHighlightsGraph/aiHighlightsGraph.scss +++ b/src/plugins/aiHighlightsGraph/aiHighlightsGraph.scss @@ -1,35 +1,23 @@ -.vjs-progress-control { - &::before { - content: ''; - pointer-events: none; +.cld-video-player { + .vjs-highlights-graph-display { position: absolute; - bottom: 50%; left: 0; right: 0; - width: 100%; - height: 600%; - background: linear-gradient(to bottom, transparent 0%, currentColor 100%); - opacity: 0.4; + bottom: 50%; z-index: 0; + pointer-events: none; + opacity: 0; + transition: opacity 0.2s; + svg { + width: 100%; + height: 100%; + } + path { + fill: currentColor; + } } -} -.vjs-highlights-graph-display { - position: absolute; - left: 0; - right: 0; - bottom: 50%; - z-index: 0; - pointer-events: none; - opacity: 0; - transition: opacity 0.2s; - .vjs-progress-control:hover & { + + .vjs-progress-control:hover .vjs-highlights-graph-display { opacity: 0.8; } - svg { - width: 100%; - height: 100%; - } - path { - fill: currentColor; - } } diff --git a/src/plugins/colors/index.js b/src/plugins/colors/index.js index 1c43fa35..d5a97ad9 100644 --- a/src/plugins/colors/index.js +++ b/src/plugins/colors/index.js @@ -14,20 +14,22 @@ const playerColors = ` .PLAYER-CLASS-PREFIX .vjs-time-tooltip, .PLAYER-CLASS-PREFIX .vjs-mouse-display:after, .PLAYER-CLASS-PREFIX .vjs-play-progress:after { - color: --base-color; - background-color: --text-color; + color: --text-color; + background-color: --base-color; } .PLAYER-CLASS-PREFIX .vjs-slider { - background-color: rgba(--accent-color, 0.3); + background-color: rgba(--text-color, 0.2); } - .PLAYER-CLASS-PREFIX .vjs-load-progress, - .PLAYER-CLASS-PREFIX .vjs-load-progress div { - background: rgba(--accent-color, 0.2); + .PLAYER-CLASS-PREFIX .vjs-load-progress { + background: rgba(--text-color, 0.3); + } + + .PLAYER-CLASS-PREFIX .vjs-volume-level { + background: --text-color; } - .PLAYER-CLASS-PREFIX .vjs-volume-level, .PLAYER-CLASS-PREFIX .vjs-play-progress { background: --accent-color; } @@ -54,6 +56,7 @@ const playerColors = ` .PLAYER-CLASS-PREFIX .vjs-title-bar { color: --text-color; + background-image: linear-gradient(rgba(--base-color, 0.4), rgba(255, 255, 255, 0) 100%); } .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay { @@ -73,10 +76,11 @@ const playerColors = ` border: 1px solid --accent-color !important; } - .PLAYER-CLASS-PREFIX .vjs-context-menu-ui .vjs-menu-content .vjs-menu-item:active, - .PLAYER-CLASS-PREFIX .vjs-context-menu-ui .vjs-menu-content .vjs-menu-item:hover { + .PLAYER-CLASS-PREFIX .vjs-menu-content .vjs-menu-item:active, + .PLAYER-CLASS-PREFIX .vjs-menu-content .vjs-menu-item:focus, + .PLAYER-CLASS-PREFIX .vjs-menu-content .vjs-menu-item:hover { color: --text-color; - background-color: --accent-color; + background-color: rgba(--text-color, 0.2); } .PLAYER-CLASS-PREFIX.vjs-ad-playing .vjs-progress-control .vjs-play-progress { @@ -91,10 +95,6 @@ const playerColors = ` color: --text-color; } - .PLAYER-CLASS-PREFIX .cld-plw-panel-item { - border-color: --text-color; - } - .PLAYER-CLASS-PREFIX .cld-video-player-floater-close polygon { fill: --base-color; } @@ -131,17 +131,11 @@ const playerColors = ` `; const darkOnlyColors = ` - .PLAYER-CLASS-PREFIX.cld-video-player-skin-dark .base-color-bg, .PLAYER-CLASS-PREFIX.cld-video-player-skin-dark .vjs-control-bar, .PLAYER-CLASS-PREFIX.cld-video-player-skin-dark .vjs-big-play-button, - .PLAYER-CLASS-PREFIX.cld-video-player-skin-dark .vjs-menu-button - .vjs-menu-content { - background-color: rgba(--base-color, 0.4); - } - - .PLAYER-CLASS-PREFIX .vjs-title-bar { - background-image: linear-gradient(rgba(--base-color, 0.4), rgba(255, 255, 255, 0) 100%); + .PLAYER-CLASS-PREFIX.cld-video-player-skin-dark .vjs-menu-button .vjs-menu-content { + background-color: rgba(--base-color, 0.6); } .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content { @@ -166,24 +160,11 @@ const darkOnlyColors = ` `; const lightOnlyColors = ` - .PLAYER-CLASS-PREFIX .vjs-title-bar { - flex-direction: row; - justify-content: left; - height: 3.6em; - background: --base-color; - } - - .PLAYER-CLASS-PREFIX .vjs-title-bar div { - width: auto; - padding: 0 inherit; - margin: 0; - } - .PLAYER-CLASS-PREFIX.cld-video-player-skin-light .base-color-bg, .PLAYER-CLASS-PREFIX.cld-video-player-skin-light .vjs-control-bar, .PLAYER-CLASS-PREFIX.cld-video-player-skin-light .vjs-big-play-button, .PLAYER-CLASS-PREFIX.cld-video-player-skin-light .vjs-menu-button .vjs-menu-content { - background-color: --base-color; + background-color: rgba(--base-color, 0.8); } .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content { @@ -232,13 +213,13 @@ const lightOnlyColors = ` const defaults = { colorsDark: { 'base': '#000000', - 'accent': '#FF620C', + 'accent': '#0D9AFF', 'text': '#FFFFFF' }, colorsLight: { 'base': '#FFFFFF', - 'accent': '#0078FF', - 'text': '#0E2F5A' + 'accent': '#0D9AFF', + 'text': '#000000' } }; diff --git a/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js b/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js index c1d59aec..970df650 100644 --- a/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js +++ b/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js @@ -37,10 +37,6 @@ class SourceMenuButton extends MenuButton { }); } - buildCSSClass() { - return `vjs-icon-cog ${super.buildCSSClass()}`; - } - createItems() { const menuItems = []; const levels = this.player().qualityLevels(); diff --git a/src/plugins/vtt-thumbnails/vtt-thumbnails.scss b/src/plugins/vtt-thumbnails/vtt-thumbnails.scss index 1b0ddb8c..6526b80f 100644 --- a/src/plugins/vtt-thumbnails/vtt-thumbnails.scss +++ b/src/plugins/vtt-thumbnails/vtt-thumbnails.scss @@ -1,30 +1,35 @@ -.vjs-vtt-thumbnail-display { - position: absolute; - left: 0; - bottom: 15px; - z-index: 1; - opacity: 0; - transition: opacity 0.2s; - bottom: 3em; - pointer-events: none; - border: 3px solid #fff; - // border: 3px solid var(--color-base); - border-radius: 3px; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(12px); -} +.cld-video-player { + .vjs-vtt-thumbnail-display { + position: absolute; + left: 0; + bottom: 15px; + z-index: 1; + opacity: 0; + transition: opacity 0.2s; + bottom: 3em; + pointer-events: none; + border: 1px solid var(--color-base); + border-radius: 2px; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(12px); + } -.vjs-vtt-time-display { - position: absolute; - bottom: -1.7em; - left: 0; - right: 0; - margin: auto; - color: #fff; - // color: var(--color-base); - text-shadow: 0 0 3px #000; -} + .vjs-vtt-time-display { + font-size: 80%; + line-height: 1.4; + position: absolute; + bottom: -2.8em; + left: 0; + right: 0; + margin: auto; + color: var(--color-text); + background: var(--color-base); + padding: 0.3em 0.6em; + width: fit-content; + border-radius: 4px; + } -.vjs-vtt-thumbnails .vjs-time-tooltip { - display: none !important; + &.vjs-vtt-thumbnails .vjs-time-tooltip { + display: none !important; + } } diff --git a/src/utils/fontFace.js b/src/utils/fontFace.js index 40fb4259..f9ffc9ff 100644 --- a/src/utils/fontFace.js +++ b/src/utils/fontFace.js @@ -1,6 +1,6 @@ import WebFont from 'webfontloader'; -const FONT_FAMILY = 'Fira Sans'; +const FONT_FAMILY = 'Inter'; const fontFace = (elem, options) => { let fontFace = options.cloudinary.fontFace; diff --git a/src/video-player.utils.js b/src/video-player.utils.js index 9eb6dc2f..5181e2f1 100644 --- a/src/video-player.utils.js +++ b/src/video-player.utils.js @@ -122,9 +122,9 @@ export const overrideDefaultVideojsComponents = () => { children.splice(children.indexOf('progressControl'), 0, 'spacer', 'progressControlEventsBlocker'); // Add 'play-previous' and 'play-next' buttons around the 'play-toggle' - children.splice(children.indexOf('playToggle'), 1, 'playlistPreviousButton', 'JumpBackButton', 'playToggle', 'JumpForwardButton', 'playlistNextButton'); + children.splice(children.indexOf('playToggle'), 1, 'playlistPreviousButton', 'playToggle', 'JumpBackButton', 'JumpForwardButton', 'playlistNextButton'); - // Position the 'logo-button' button right next to 'fullscreenToggle' - children.splice(children.indexOf('fullscreenToggle'), 1, 'logoButton', 'fullscreenToggle'); + // Position the 'logo-button' button last + children.push('logoButton'); } };