cloudinary-video-player 1.6.2-edge.13

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

@@ -0,0 +1,158 @@
+$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-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/playlist.scss

@@ -0,0 +1,213 @@
+@import '../../../assets/styles/mixins/mixins.scss';
+
+@mixin listLayout() {
+    .cld-plw-layout {
+        &.cld-plw-vertical, &.cld-plw-horizontal {
+            flex-direction: column;
+
+            .cld-plw-panel {
+                flex-direction: column;
+            }
+
+            .cld-plw-col-list {
+                width: inherit !important;
+                height: inherit !important;
+                max-height: 340px;
+            }
+
+            .cld-plw-panel-item {
+                background: none !important;
+
+                img {
+                    display: block;
+                    width: 150px;
+                    height: 84px;
+                }
+
+                .cld-plw-item-info-wrap {
+                    left: 150px;
+                    padding: 15px 10px;
+                    top: 0;
+                    right: 0;
+                    width: auto;
+                }
+
+                .cld-plw-item-title-next {
+                    display: block;
+                }
+
+                .cld-plw-item-title-curr {
+                    display: block;
+                }
+
+                .cld-plw-item-title {
+                    white-space: normal;
+                }
+            }
+        }
+
+        &.cld-plw-horizontal {
+            .cld-plw-col-list {
+                padding-top: 0;
+                overflow: auto;
+            }
+
+            .cld-plw-panel {
+                position: initial;
+            }
+
+            .cld-plw-panel-item {
+                max-width: none;
+            }
+        }
+    }
+}
+
+.cld-plw-horizontal {
+    .cld-plw-col-list {
+        padding-top: 14.0625%;
+        position: relative;
+    }
+
+    .cld-plw-panel {
+        overflow: auto;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .cld-plw-panel-item {
+        background-image: none;
+        min-width: 25%;
+        max-width: 25%;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+
+
+.cld-plw-vertical {
+
+    display: flex;
+    flex-direction: row;
+
+    &.cld-plw-layout {
+        > div:first-child {
+            flex: 1;
+        }
+    }
+
+    .cld-plw-col-list {
+        display: flex;
+        flex-direction: column;
+        min-width: 20%;
+    }
+
+    .cld-plw-panel {
+        height: 100%;
+        overflow: auto;
+    }
+
+    .cld-plw-panel-item {
+        height: 25%;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+    }
+}
+
+.cld-plw-item-title-next {
+    font-weight: bold;
+}
+
+.cld-plw-item-info-wrap {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 5% 7%;
+    width: 100%;
+    transition: color .25s;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    box-sizing: border-box;
+
+    .cld-video-player-skin-dark & {
+        text-shadow: 1px 1px 1px rgba(#000, .3);
+
+        @media only screen and (max-width: 768px) {
+            background: #272727;
+        }
+    }
+}
+
+.cld-plw-item-title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    @include ellipsis;
+}
+
+.cld-plw-item-duration {
+    margin-left: 10px;
+}
+
+/*  Default Playlist Layout */
+
+.cld-plw-layout {
+    &.cld-plw-layout-fluid {
+        width: 100%;
+    }
+
+    &.cld-plw-vertical {
+        flex-direction: row;
+    }
+
+    &.cld-plw-horizontal {
+        flex-direction: column;
+    }
+}
+
+.cld-plw-custom {
+    padding: 4px;
+    .cld-plw-panel-item {
+        background: none !important;
+        margin: 4px 0;
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        img {
+            display: block;
+            width: 150px;
+        }
+
+        .cld-plw-item-info-wrap {
+            left: 160px;
+        }
+
+        .cld-plw-item-title-next {
+            display: block;
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    @include listLayout();
+}

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%; }
+}

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

@@ -0,0 +1,94 @@
+
+@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%);
+                }
+
+                .cld-plw-item-info-wrap {
+                    font-weight: 500;
+                }
+            }
+
+            .cld-plw-item-info-wrap {
+                color: #FF620C;
+            }
+        }
+    }
+}
+
+.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); 
+  }
+
+@media only screen and (max-width: 768px) {
+    .cld-thumbnail:before {
+        background: none;
+    }
+}

package/src/assets/styles/components/title-bar.scss

@@ -0,0 +1,67 @@
+
+.video-js .vjs-title-bar {
+  display: none;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 7.2em;
+  text-align: left;
+  padding: 16px 21px;
+  pointer-events: none;
+
+  .vjs-title-bar-title {
+    width: 100%;
+    font-size: 1.2em;
+    font-weight: 500;
+    line-height: 1.2em;
+    margin-bottom: 0.55em;
+  }
+
+  .vjs-title-bar-subtitle {
+    width: 100%;
+    font-size: 1em;
+    font-weight: 300;
+    line-height: 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;
+}
+
+.vjs-controls-disabled .vjs-title-bar,
+.vjs-using-native-controls .vjs-title-bar,
+.vjs-error .vjs-title-bar,
+.vjs-ad-playing .vjs-title-bar {
+  // !important is ok in this context.
+  display: none !important;
+}
+
+// Don't hide the control bar if it's audio
+.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-title-bar {
+  opacity: 1;
+  visibility: visible;
+}
+
+// IE 8 + 9 Support
+.vjs-has-started.vjs-no-flex .vjs-title-bar {
+  display: table;
+}

package/src/assets/styles/components/triangle-volume-bar.scss

@@ -0,0 +1,52 @@
+.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;
+      }
+    }
+  }
+}