Merge pull request #431 from cloudinary/edge

Update master

CHANGELOG.md

@@ -1,11 +1,15 @@
+1.9.16 / 2023-09-12
+==================
+
+* Video player face-lift - redesigned themes, icons, volume-bar.
+
 1.9.15 / 2023-08-30
 ==================
 
 * Support camelCase cloud config (i.e. cloudName)
 * Use cloudinary-video-analytics
 * Collect video player usage
 
-
 1.9.15 / 2023-08-29
 ==================
 

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",

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.

src/assets/fonts/icons.json → 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/"
   }]
 }