cloudinary-video-player 1.5.5 → 1.5.9

package/dist/cld-video-player.min.js.LICENSE.txt

@@ -0,0 +1,26 @@
+/*!
+ * Programatically add the following
+ */
+
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*! @name @videojs/http-streaming @version 2.9.1 @license Apache-2.0 */
+
+/*! @name aes-decrypter @version 3.1.2 @license Apache-2.0 */
+
+/*! @name pkcs7 @version 1.0.4 @license Apache-2.0 */
+
+/*! @name videojs-contrib-ads @version 6.9.0 @license Apache-2.0 */
+
+/*! @name videojs-contrib-quality-levels @version 2.1.0 @license Apache-2.0 */
+
+/*! codem-isoboxer v0.3.6 https://github.com/madebyhiro/codem-isoboxer/blob/master/LICENSE.txt */
+
+/*! http://mths.be/fromcodepoint v0.1.0 by @mathias */
+
+/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */

package/docs/interaction-area.html

@@ -27,36 +27,49 @@
 
       var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
 
-      var interactionAreas = [
-        {
-          left : 10 ,
-          top: 10,
-          width: 80,
-          height: 40,
-          id: 'topSource'
-        },
-        {
-          left : 10 ,
-          top: 75,
-          width: 80,
-          height : 20,
-          id: 'bottomSource'
-        }
-      ];
+      var playerOption = {
+          bigPlayButton: false,
+          interactionDisplay: {
+              theme:{
+                template : 'pulsing'
+              },
+              layout: {
+                  enable: true,
+                  showAgain: false
+              }
+          }
+      };
 
-      const sources = {
+      var sources = {
          topSource : 'https://res.cloudinary.com/eran2903/video/upload/w_880,x_800,y_200,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4',
          bottomSource: 'https://res.cloudinary.com/eran2903/video/upload/w_540,x_1260,y_3100,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4'
-      }
-
-      var player = cld.videoPlayer('manually');
+      };
 
-      player.source('video-player/girl_in_a_dress');
+      var player = cld.videoPlayer('manually', playerOption);
 
-      player.addInteractionAreas(interactionAreas, {
-          onClick: (event) => {
+      player.source('video-player/girl_in_a_dress', {
+        interactionAreas:{
+          enable: true,
+          template: [
+            {
+              left : 10 ,
+              top: 10,
+              width: 80,
+              height: 40,
+              id: 'topSource'
+            },
+            {
+              left : 10 ,
+              top: 75,
+              width: 80,
+              height : 20,
+              id: 'bottomSource'
+            }
+          ],
+          onClick: function (event) {
             event.zoom(sources[event.item.id]);
-         }
+          }
+        }
       });
 
       var videoZoomSources = {
@@ -65,14 +78,14 @@
         bottom:'https://res.cloudinary.com/eran2903/video/upload/w_540,x_1260,y_3100,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4'
       }
 
-      var player2 = cld.videoPlayer('custom-template');
+      var player2 = cld.videoPlayer('custom-template', playerOption);
 
       player2.source('video-player/girl_in_a_dress', {
         interactionAreas: {
           enable: true,
           template: 'portrait',
-          onClick: (event) => {
-            const src = videoZoomSources[event.item.id];
+          onClick:function (event) {
+            var src = videoZoomSources[event.item.id];
             if(event.item.id === 'middle'){
                 if(window.confirm('Do you like this shirt ?')) {
                     window.open(src, '_blank').focus();
@@ -85,24 +98,24 @@
         }
       });
 
-        var player3 = cld.videoPlayer('custom-vtt');
+        var player3 = cld.videoPlayer('custom-vtt', playerOption);
 
         var videoZoomSources3 = {
             center : 'https://res.cloudinary.com/eran2903/video/upload/w_880,x_800,y_200,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4'
         }
 
-        player3.source('https://res.cloudinary.com/eran2903/video/upload/eo_8,w_270,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4', {
+        player3.source('video-player/girl_in_a_dress', {
             interactionAreas: {
                 enable: true,
                 vttUrl: 'https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt',
-                onClick: (event) => {
+                onClick: function (event) {
                     event.zoom(videoZoomSources3[event.item.id]);
                 }
             }
         });
 
 
-        var player4 = cld.videoPlayer('auto-zoom');
+        var player4 = cld.videoPlayer('auto-zoom', playerOption);
 
         player4.source('video-player/girl_in_a_dress', {
             transformation:{
@@ -111,7 +124,7 @@
             interactionAreas: {
                 enable: true,
                 template: 'portrait',
-                onClick: (event) => {
+                onClick: function (event) {
                     event.zoom();
                 }
             }
@@ -131,6 +144,26 @@
 
   <br/>
 
+  <h3>Interaction Areas player config:</h3>
+
+  <pre>
+      <code class="language-javascript">
+           var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
+
+           cld.videoPlayer('player', {
+              interactionDisplay: {
+                  theme:{
+                    template : 'pulsing'  // 'pulsing' / 'shadowed' (the default is 'pulsing')
+                  },
+                  layout: {
+                      enable: true / false (the default is true),
+                      showAgain: true / false (the default is false)
+                  }
+              }
+          });
+      </code>
+  </pre>
+
   <h3>Define Interaction Areas manually</h3>
 
   <br/>
@@ -159,37 +192,38 @@
       <code class="language-javascript">
       var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
 
-      var interactionAreas = [
-        {
-          left : 10 ,
-          top: 10,
-          width: 80,
-          height: 40,
-          id: 'topSource'
-        },
-        {
-          left : 10 ,
-          top: 75,
-          width: 80,
-          height : 20,
-          id: 'bottomSource'
-        }
-      ];
-
-      const sources = {
+      var sources = {
          topSource : 'https://res.cloudinary.com/eran2903/video/upload/w_880,x_800,y_200,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4',
          bottomSource: 'https://res.cloudinary.com/eran2903/video/upload/w_540,x_1260,y_3100,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4'
       }
 
-      var player = cld.videoPlayer('player');
-
-      player.source('video-player/girl_in_a_dress');
+      var player = cld.videoPlayer('player',{
+          bigPlayButton: false
+      });
 
-      player.addInteractionAreas(interactionAreas, {
-          onClick: (event) => {
-            var source = sources[event.item.id];
-            event.zoom(source);
-         }
+      player.source('video-player/girl_in_a_dress',{
+          interactionAreas: {
+            enable: true,
+            template:  [
+                {
+                  left : 10 ,
+                  top: 10,
+                  width: 80,
+                  height: 40,
+                  id: 'topSource'
+                },
+                {
+                  left : 10 ,
+                  top: 75,
+                  width: 80,
+                  height : 20,
+                  id: 'bottomSource'
+                }
+             ],
+             onClick: function (event) {
+                event.zoom(sources[event.item.id]);
+            }
+          }
       });
       </code>
 
@@ -225,7 +259,9 @@
       <code class="language-javascript">
       var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
 
-      var player = cld.videoPlayer('player');
+      var player = cld.videoPlayer('player',{
+          bigPlayButton: false
+      });
 
        var sources = {
         top:'https://res.cloudinary.com/eran2903/video/upload/w_880,x_800,y_200,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4',
@@ -237,7 +273,7 @@
         interactionAreas: {
           enable: true,
           template: 'portrait', // or landscape/all/center
-          onClick: (event) => {
+          onClick: function(event) {
             // 'event.item.id' is an id that been defined in the vtt file
             var src = sources[event.item.id];
             if(event.item.id === 'middle'){
@@ -284,7 +320,9 @@
       <code class="language-javascript">
       var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
 
-      var player = cld.videoPlayer('player');
+      var player = cld.videoPlayer('player',{
+          bigPlayButton: false
+      });
 
         var sources = {
             center : 'https://res.cloudinary.com/eran2903/video/upload/w_880,x_800,y_200,c_crop/w_270,eo_8,q_auto:best,f_auto/production_ID_3888264_fuuo7c.mp4'
@@ -294,7 +332,7 @@
             interactionAreas: {
                 enable: true,
                 vttUrl: 'https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt',
-                onClick: (event) => {
+                onClick: function(event) {
                     // 'event.item.id' is an id that been defined in the vtt file
                     event.zoom(sources[event.item.id]);
                 }
@@ -331,7 +369,9 @@
       <code class="language-javascript">
       var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
 
-      var player = cld.videoPlayer('player');
+      var player = cld.videoPlayer('player', {
+          bigPlayButton: false
+      });
 
       // auto-zoom works only if the source is a cloudinary source object or a public id
       // does not work for a full raw url
@@ -342,7 +382,7 @@
             interactionAreas: {
                 enable: true,
                 template: 'portrait',
-                onClick: (event) => {
+                onClick: function (event) {
                     //in case you not passing a source to the zoom function auto zoom will be enabled
                     event.zoom();
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudinary-video-player",
-  "version": "1.5.5",
+  "version": "1.5.9",
   "description": "Cloudinary Video Player",
   "bundlewatch": {
     "files": [
@@ -10,7 +10,7 @@
       },
       {
         "path": "./dist/cld-video-player.light.min.js",
-        "maxSize": "110kb"
+        "maxSize": "112kb"
       }
     ]
   },
@@ -44,55 +44,55 @@
     "dashjs": "^3.2.2",
     "fetch-ponyfill": "^7.1.0",
     "promise-polyfill": "^8.2.0",
-    "video.js": "^7.11.8",
+    "video.js": "^7.13.3",
     "videojs-contextmenu": "^2.0.2",
-    "videojs-contrib-ads": "^6.8.0",
+    "videojs-contrib-ads": "^6.9.0",
     "videojs-contrib-quality-levels": "^2.1.0",
     "videojs-ima": "^1.9.1",
     "videojs-per-source-behaviors": "^2.1.0",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/plugin-transform-runtime": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@types/video.js": "^7.3.15",
-    "babel-eslint": "^7.1.1",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@types/video.js": "^7.3.23",
+    "babel-eslint": "^7.2.3",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.2.2",
     "bundlewatch": "^0.3.2",
-    "cloudinary-core": "^2.11.3",
+    "cloudinary-core": "^2.11.4",
     "copy-webpack-plugin": "4",
-    "css-loader": "^5.1.3",
+    "css-loader": "^5.2.6",
     "eslint": "^5.16.0",
     "eslint-loader": "^2.2.1",
     "eslint-plugin-jest": "^21.27.2",
     "expose-loader": "^0.7.5",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "4",
+    "html-webpack-plugin": "^4.5.2",
     "jest": "^26.6.3",
     "jest-fetch-mock": "^3.0.3",
     "jest-puppeteer": "^4.4.0",
     "jest-webpack": "^0.5.1",
     "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^1.3.9",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "puppeteer": "^5.2.1",
+    "mini-css-extract-plugin": "^1.6.2",
+    "optimize-css-assets-webpack-plugin": "^5.0.8",
+    "puppeteer": "^5.5.0",
     "puppeteer-request-spy": "^1.4.0",
-    "sass": "^1.32.11",
-    "sass-loader": "10",
+    "sass": "^1.35.1",
+    "sass-loader": "10.2.0",
     "shx": "^0.3.3",
-    "snyk": "^1.493.0",
+    "snyk": "^1.653.0",
     "source-map-loader": "1.1.3",
-    "terser-webpack-plugin": "^5.1.1",
-    "uglify-js": "^3.13.1",
+    "terser-webpack-plugin": "^4.2.3",
+    "uglify-js": "^3.13.10",
     "url-loader": "^4.1.1",
-    "webpack": "^4.44.1",
-    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack": "^4.46.0",
+    "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.12",
     "webpack-conditional-loader": "^1.0.12",
     "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3",
+    "webpack-merge": "^5.8.0",
     "webworkify-webpack2": "^1.1.9"
   },
   "snyk": true

package/src/assets/styles/components/interaction-areas.scss

@@ -0,0 +1,165 @@
+$interaction-area-marker-size: 20px;
+$interaction-area-marker-border-size: 2px;
+$interaction-area-marker-box-shadow-extra-size: 4px;
+$interaction-area-layout-icon-height: 60px;
+
+.cld-video-player{
+
+  &.vjs-user-active {
+    .interaction-areas-container {
+      display: block;
+    }
+  }
+
+  &.interaction-areas {
+
+    .vjs-big-play-button {
+      display: none !important;
+    }
+  }
+
+  .interaction-areas-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+    z-index: 1;
+
+    &:hover {
+      display: block;
+    }
+
+    .go-back-button,
+    .vp-ia-item {
+      position: absolute;
+      cursor: pointer;
+    }
+
+    .go-back-button {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .vp-ia-item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: top, left, width, height;
+      transition-timing-function: linear;
+
+      &.theme-shadowed {
+
+        .vp-ia-marker-shadow{
+          opacity: 0.24;
+        }
+
+      }
+
+      &.theme-pulsing {
+
+        .vp-ia-marker-shadow {
+          -webkit-animation: pulsing-animation 1.3s ease-out;
+          -webkit-animation-iteration-count: infinite;
+          border: solid $interaction-area-marker-border-size;
+          opacity: 0;
+        }
+      }
+
+      &:hover {
+        .vp-ia-marker-main:before {
+          content: "";
+          width: $interaction-area-marker-size;
+          height: $interaction-area-marker-size;
+          border: solid $interaction-area-marker-border-size rgba(0,0,0,0.25);
+        }
+      }
+
+      .vp-ia-area-marker {
+        position: relative;
+        width: $interaction-area-marker-size;
+        height: $interaction-area-marker-size;
+
+        .vp-ia-marker-main,
+        .vp-ia-marker-main:before,
+        .vp-ia-marker-shadow {
+          position: absolute;
+          border-radius: 50%;
+          transform: translate(-50%, -50%);
+          top: 50%;
+          left: 50%;
+        }
+
+        .vp-ia-marker-main {
+          background-color: white;
+          border:solid $interaction-area-marker-border-size;
+          height: 100%;
+          width: 100%;
+        }
+
+        .vp-ia-marker-shadow {
+          width: 2*$interaction-area-marker-border-size + $interaction-area-marker-size + $interaction-area-marker-box-shadow-extra-size;
+          height:2*$interaction-area-marker-border-size + $interaction-area-marker-size + $interaction-area-marker-box-shadow-extra-size;
+        }
+      }
+    }
+
+    &.vp-ia-layout-message {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      z-index: 2;
+      background-color: rgba(0, 0, 0, 0.5);
+
+      &.clickable {
+        cursor: pointer;
+
+        &:hover .vp-theme-button {
+          background-color: rgba(255, 255, 254, 0.28);
+        }
+
+      }
+
+      .vp-ia-layout-icon {
+        margin-bottom: 20px;
+        height: $interaction-area-layout-icon-height;
+      }
+
+      .vp-ia-layout-message-title {
+        font-size: 24px;
+        line-height: 34px;
+        text-align: center;
+      }
+
+      .vp-theme-button {
+        margin: 8px 0 18px 0;
+      }
+
+      .vp-ia-layout-message-do-not-show {
+        display: flex;
+        align-items: center;
+
+        > * {
+          cursor: pointer;
+        }
+
+        .vp-ia-layout-message-checkbox-title {
+          margin: 0 0 0 5px;
+        }
+
+      }
+    }
+  }
+}
+
+@-webkit-keyframes pulsing-animation {
+  0%   { height: $interaction-area-marker-size / 2; width: $interaction-area-marker-size / 2; opacity: 0}
+  50%  { height: $interaction-area-marker-size; width: $interaction-area-marker-size; opacity: 1}
+  100% { height: 2 * $interaction-area-marker-size; width: 2 * $interaction-area-marker-size; opacity: 0}
+}

package/src/assets/styles/components/themedButton.scss

@@ -0,0 +1,48 @@
+$border-radius : 4px;
+
+.cld-video-player {
+
+  .vp-theme-button {
+    position: relative;
+    height: 40px;
+    font-size: 16px;
+    border-radius: $border-radius;
+    padding: 0 20px;
+    overflow: hidden;
+
+    &.theme-transparent-white {
+      background-color: rgba(255, 255, 254, 0.18);
+
+      &:hover {
+        background-color: rgba(255, 255, 254, 0.28);
+      }
+
+      .vp-loading-bar {
+        background-color: rgba(255, 255, 254, 0.22);
+      }
+
+    }
+
+    .vp-loading-bar {
+      position: absolute;
+      top:0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      transition: width;
+      animation-name: loading;
+    }
+
+    &:hover{
+      cursor: pointer;
+    }
+
+  }
+
+}
+
+
+@keyframes loading {
+  from { width: 0; }
+  to   { width: 100%; }
+}