cloudinary-video-player 1.5.5 → 1.5.9

package/src/assets/styles/icons.scss

@@ -1,257 +1,189 @@
 @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; }
+  font-style: normal;
+}
 
-.vjs-icon-play {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-play:before {
-    content: "\f101"; }
+.vjs-icon-play:before {
+  content: "\f101";
+}
 
-.vjs-icon-play-circle {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-play-circle:before {
-    content: "\f102"; }
+.vjs-icon-play-circle:before {
+  content: "\f102";
+}
 
-.vjs-icon-pause {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-pause:before {
-    content: "\f103"; }
+.vjs-icon-pause:before {
+  content: "\f103";
+}
 
-.vjs-icon-volume-mute {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-volume-mute:before {
-    content: "\f104"; }
+.vjs-icon-volume-mute:before {
+  content: "\f104";
+}
 
-.vjs-icon-volume-low {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-volume-low:before {
-    content: "\f105"; }
+.vjs-icon-volume-low:before {
+  content: "\f105";
+}
 
-.vjs-icon-volume-mid {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-volume-mid:before {
-    content: "\f106"; }
+.vjs-icon-volume-mid:before {
+  content: "\f106";
+}
 
-.vjs-icon-volume-high {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-volume-high:before {
-    content: "\f107"; }
+.vjs-icon-volume-high:before {
+  content: "\f107";
+}
 
-.vjs-icon-fullscreen-enter {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-fullscreen-enter:before {
-    content: "\f108"; }
+.vjs-icon-fullscreen-enter:before {
+  content: "\f108";
+}
 
-.vjs-icon-fullscreen-exit {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-fullscreen-exit:before {
-    content: "\f109"; }
+.vjs-icon-fullscreen-exit:before {
+  content: "\f109";
+}
 
-.vjs-icon-square {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-square:before {
-    content: "\f10a"; }
+.vjs-icon-square:before {
+  content: "\f10a";
+}
 
-.vjs-icon-spinner {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-spinner:before {
-    content: "\f10b"; }
+.vjs-icon-spinner:before {
+  content: "\f10b";
+}
 
-.vjs-icon-subtitles {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-subtitles:before {
-    content: "\f10c"; }
+.vjs-icon-subtitles:before {
+content: "\f10c";
+}
 
-.vjs-icon-captions {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-captions:before {
-    content: "\f10d"; }
+.vjs-icon-captions:before {
+  content: "\f10d";
+}
 
-.vjs-icon-chapters {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-chapters:before {
-    content: "\f10e"; }
+.vjs-icon-chapters:before {
+  content: "\f10e";
+}
 
-.vjs-icon-share {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-share:before {
-    content: "\f10f"; }
+.vjs-icon-share:before {
+  content: "\f10f";
+}
 
-.vjs-icon-cog {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-cog:before {
-    content: "\f110"; }
+.vjs-icon-cog:before {
+  content: "\f110";
+}
 
-.vjs-icon-circle {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-circle:before {
-    content: "\f111"; }
+.vjs-icon-circle:before {
+  content: "\f111";
+}
 
-.vjs-icon-circle-outline {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-circle-outline:before {
-    content: "\f112"; }
+.vjs-icon-circle-outline:before {
+  content: "\f112";
+}
 
-.vjs-icon-circle-inner-circle {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-circle-inner-circle:before {
-    content: "\f113"; }
+.vjs-icon-circle-inner-circle:before {
+  content: "\f113";
+}
 
-.vjs-icon-hd {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-hd:before {
-    content: "\f114"; }
+.vjs-icon-hd:before {
+  content: "\f114";
+}
 
-.vjs-icon-cancel {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-cancel:before {
-    content: "\f115"; }
+.vjs-icon-cancel:before {
+  content: "\f115";
+}
 
-.vjs-icon-replay {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-replay:before {
-    content: "\f116"; }
+.vjs-icon-replay:before {
+  content: "\f116";
+}
 
-.vjs-icon-play-previous {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-play-previous:before {
-    content: "\f117"; }
+.vjs-icon-play-previous:before {
+  content: "\f117";
+}
 
-.vjs-icon-play-next {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-play-next:before {
-    content: "\f118"; }
+.vjs-icon-play-next:before {
+  content: "\f118";
+}
 
-.vjs-icon-close {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-close:before {
-    content: "\f119"; }
+.vjs-icon-close:before {
+  content: "\f119";
+}
 
-.vjs-icon-skip-10-min {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-skip-10-min:before {
-    content: "\f11a"; }
+.vjs-icon-skip-10-min:before {
+  content: "\f11a";
+}
 
-.vjs-icon-skip-10-plus {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-skip-10-plus:before {
-    content: "\f11b"; }
+.vjs-icon-skip-10-plus:before {
+  content: "\f11b";
+}
 
-.vjs-icon-facebook {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-facebook:before {
-    content: "\f11c"; }
+.vjs-icon-facebook:before {
+  content: "\f11c";
+}
 
-.vjs-icon-gplus {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-gplus:before {
-    content: "\f11d"; }
+.vjs-icon-gplus:before {
+  content: "\f11d";
+}
 
-.vjs-icon-linkedin {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-linkedin:before {
-    content: "\f11e"; }
+.vjs-icon-linkedin:before {
+  content: "\f11e";
+}
 
-.vjs-icon-twitter {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-twitter:before {
-    content: "\f11f"; }
+.vjs-icon-twitter:before {
+  content: "\f11f";
+}
 
-.vjs-icon-tumblr {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-tumblr:before {
-    content: "\f120"; }
+.vjs-icon-tumblr:before {
+  content: "\f120";
+}
 
-.vjs-icon-pinterest {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-pinterest:before {
-    content: "\f121"; }
+.vjs-icon-pinterest:before {
+  content: "\f121";
+}
 
-.vjs-icon-audio-description {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-audio-description:before {
-    content: "\f122"; }
+.vjs-icon-audio-description:before {
+  content: "\f122";
+}
 
-.vjs-icon-audio {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-audio:before {
-    content: "\f123"; }
+.vjs-icon-audio:before {
+  content: "\f123";
+}
 
-.vjs-icon-cart {
-  font-family: VideoJS;
-  font-weight: normal;
-  font-style: normal; }
-  .vjs-icon-cart:before {
-    content: "\f124"; }
+.vjs-icon-cart:before {
+  content: "\f124";
+}

package/src/assets/styles/main.scss

@@ -5,11 +5,14 @@ $icon-font-path: '../fonts' !default;
 @import 'variables';
 
 // Import Video.js style
-@import '~video.root.js/src/css/vjs.scss';
+@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';
+
 
 // control bar control size
 .video-js .vjs-control:before {
@@ -21,6 +24,9 @@ $icon-font-path: '../fonts' !default;
 }
 
 
+.video-js {
+  overflow: hidden;
+}
 
 .video-js .vjs-control,
 .vjs-icon-close,
@@ -67,34 +73,6 @@ $icon-font-path: '../fonts' !default;
 .cld-video-player {
   font-family: $text-font-family;
 
-  &.vjs-user-active {
-    .interaction-areas-container {
-      opacity: 1;
-    }
-  }
-
-  .interaction-areas-container {
-    opacity: 0;
-    transition: opacity 0.5s;
-
-    .go-back-button,
-    .video-player-interaction-area{
-      position: absolute;
-      cursor: pointer;
-    }
-
-    .go-back-button {
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .video-player-interaction-area {
-      border: solid 1px red;
-    }
-  }
-
 
   &:focus {
     outline: none;
@@ -247,7 +225,7 @@ $icon-font-path: '../fonts' !default;
   }
 
   .vjs-control-bar {
-    z-index: 1;
+    z-index: 2;
 
     .vjs-volume-panel {
       margin-right: 1em;

package/src/components/interaction-area/interaction-area.const.js

@@ -0,0 +1,30 @@
+export const INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME = 'cld-ia-layout-state';
+
+export const INTERACTION_AREAS_PREFIX = 'vp-ia';
+
+export const INTERACTION_AREAS_CONTAINER_CLASS_NAME = 'interaction-areas-container';
+
+export const INTERACTION_AREAS_TEMPLATE = {
+  PORTRAIT: 'portrait',
+  LANDSCAPE: 'landscape',
+  All: 'all',
+  CENTER: 'center'
+};
+
+export const INTERACTION_AREAS_THEME = {
+  PULSING: 'pulsing',
+  SHADOWED: 'shadowed'
+};
+
+export const TEMPLATE_INTERACTION_AREAS_VTT = {
+  [INTERACTION_AREAS_TEMPLATE.PORTRAIT]: 'https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt',
+  [INTERACTION_AREAS_TEMPLATE.LANDSCAPE]: 'https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt',
+  [INTERACTION_AREAS_TEMPLATE.All]: 'https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt',
+  [INTERACTION_AREAS_TEMPLATE.CENTER]: 'https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt'
+};
+
+export const INTERACTION_AREA_HAND_ICON = 'https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg';
+
+export const CLOSE_INTERACTION_AREA_LAYOUT_DELAY = 4500;
+
+export const DEFAULT_INTERACTION_ARE_TRANSITION = 250;