@gcorevideo/player 2.18.3 → 2.19.1

package/assets/share/style.scss

@@ -0,0 +1,104 @@
+
+.share_plugin[data-share] {
+  pointer-events: auto;
+  z-index: 5;
+  font-family: Roboto, "Open Sans", Arial, sans-serif !important;
+
+  &.share-hide {
+    .share-button-container {
+      right: -50px;
+    }
+  }
+
+  .share-button-container {
+    cursor: pointer;
+    width: 36px;
+    height: 36px;
+    background-color: rgb(74 74 74 / 60%);
+    border-radius: 4px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    padding-top: 6px;
+    transition: all 0.3s ease-out;
+
+    button[data-share-button] {
+      background-color: transparent;
+      border: 0;
+      margin: 0 6px;
+      padding: 0;
+      cursor: pointer;
+      display: inline-block;
+      width: 19px;
+      height: 20px;
+    }
+  }
+
+  .share-container {
+    pointer-events: auto;
+    position: absolute;
+    width: 280px;
+    background-color: white;
+    transform: translate(0, 50%);
+    transform: translate(-50%, -50%);
+    left: 50%;
+
+    /* margin-left: -140px; */
+    top: calc(50% - 20px);
+
+    /* margin-top: -170px; */
+    .share-container-header  {
+      text-align: left;
+      border-bottom: 1px solid rgb(155 155 155 / 25%);
+
+      .share-container-header--title {
+        display: inline-block;
+        font-size: 16px;
+        margin: 5px;
+      }
+
+      .share-container-header--close {
+        display: inline-block;
+        width: 24px;
+        float: right;
+        margin: 5px;
+        cursor: pointer;
+      }
+    }
+
+    .share-container-main {
+      margin-bottom: 8px;
+
+      & > div {
+        text-align: left;
+        font-size: 14px;
+        padding: 5px;
+      }
+
+      .share-container-header--link, .share-container-header--embed {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #818181;
+        border: solid 1px #d3d3d3;
+        width: calc(100% - 10px);
+        padding: 5px;
+      }
+
+      .share-container-header--embed {
+        max-height: 90px;
+        resize: none;
+      }
+
+      .share-container-header--socialicon {
+        & > div {
+          width: 32px;
+          display: inline-block;
+          margin-right: 5px;
+          cursor: pointer;
+        }
+
+      }
+    }
+  }
+
+}

package/assets/skip-time/skip-time.ejs

@@ -0,0 +1,8 @@
+<div class="skip-container" data-skip-container>
+    <div class="skip-item" data-skip-left>
+    </div>
+    <div class="skip-item" data-skip-mid>
+    </div>
+    <div class="skip-item" data-skip-right>
+    </div>
+</div>

package/assets/skip-time/style.scss

@@ -0,0 +1,24 @@
+.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
+  height: 0;
+}
+
+.skip_time_plugin[data-skip-time] {
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 50px);
+  z-index: 9998;
+  background-color: transparent;
+  font-family: Roboto, "Open Sans", Arial, sans-serif;
+
+  .skip-container[data-skip-container] {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .skip-item {
+      width: 33.3%;
+      height: 100%;
+    }
+  }
+}

package/assets/spinner-three-bounce/spinner.ejs

@@ -0,0 +1,3 @@
+<div data-bounce1></div>
+<div data-bounce2></div>
+<div data-bounce3></div>

package/assets/spinner-three-bounce/spinner.scss

@@ -0,0 +1,44 @@
+.spinner-three-bounce[data-spinner] {
+  position: absolute;
+  width: 70px;
+  text-align: center;
+  z-index: 999;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
+
+  /* center vertically */
+  top: 50%;
+  transform: translateY(-50%);
+
+  & > div {
+    width: 18px;
+    height: 18px;
+    background-color: #FFF;
+    border-radius: 100%;
+    display: inline-block;
+    animation: bouncedelay 1.4s infinite ease-in-out;
+
+    /* Prevent first frame from flickering when animation starts */
+    animation-fill-mode: both;
+  }
+
+  [data-bounce1] {
+    animation-delay: -0.32s;
+  }
+
+  [data-bounce2] {
+    animation-delay: -0.16s;
+  }
+}
+
+@keyframes bouncedelay {
+  0%, 80%, 100% {
+    transform: scale(0.0);
+  }
+  40% {
+    transform: scale(1.0);
+  }
+}

package/assets/style/main.scss

@@ -0,0 +1,50 @@
+@use "variables";
+@use "theme";
+
+@import "https://fonts.googleapis.com/css?family=Roboto";
+
+* {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.player-poster[data-poster] {
+  background-size: contain !important;
+}
+
+.spinner-three-bounce {
+  & > .gcore-skin-main-color {
+    box-shadow: 4px 4px 9px 1px rgb(36 61 81 / 51%);
+  }
+}
+
+.gplayer-lite-btn {
+  cursor: pointer;
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+
+  /* inherit font & color from ancestor */
+  color: inherit;
+  font: inherit;
+
+  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+  line-height: normal;
+
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  /* Corrects inability to style clickable `input` types in iOS */
+  appearance: none;
+
+  /* Remove excess padding and border in Firefox 4+ */
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+}

package/assets/style/theme.scss

@@ -0,0 +1,42 @@
+.gcore-skin-bg-color { background-color: var(--theme-background-color) !important; }
+
+.gcore-skin-text-color { color: var(--theme-text-color) !important; }
+.gcore-skin-text-color svg { fill: var(--theme-text-color) !important; }
+.gcore-skin-text-color svg path { fill: var(--theme-text-color) !important; }
+.gcore-skin-border-textarea-color { border-color: var(--theme-text-color) !important; }
+
+.gcore-skin-button-color {
+  color: var(--theme-foreground-color) !important;
+
+  svg {
+    fill: var(--theme-foreground-color) !important;
+
+    path {
+      fill: var(--theme-foreground-color) !important;
+
+      &.icon-hover { fill: var(--theme-foreground-color) !important; }
+    }
+  }
+
+  &[data-fullscreen] {
+    svg {
+      stroke: var(--theme-foreground-color) !important;
+
+      path {
+        stroke: var(--theme-foreground-color) !important;
+      }
+    }
+  }
+}
+
+.gcore-skin-main-color { background-color: var(--theme-foreground-color) !important; }
+.gcore-skin-border-color { border-color: var(--theme-foreground-color) !important; }
+
+.gcore-skin-button-color:hover { color: var(--theme-hover-color) !important; }
+.gcore-skin-button-color:hover svg { fill: var(--theme-hover-color) !important; }
+.gcore-skin-button-color:hover svg path { fill: var(--theme-hover-color) !important; }
+.gcore-skin-border-color:hover { border-color: var(--theme-hover-color) !important; }
+.gcore-skin-button-with-bg-color:hover svg path.icon-hover { fill: var(--theme-hover-color) !important; }
+.gcore-skin-active { color: var(--theme-hover-color) !important; }
+.gcore-skin-active svg { fill: var(--theme-hover-color) !important; }
+.gcore-skin-active svg path { fill: var(--theme-hover-color) !important; }

package/assets/style/variables.scss

@@ -0,0 +1,7 @@
+// default values
+:root {
+  --theme-background-color: rgb(0 0 0 / 70%);
+  --theme-text-color: rgb(255 255 255 / 100%);
+  --theme-foreground-color: rgb(201 201 201 / 100%);
+  --theme-hover-color: rgb(255 255 255 / 100%);
+}

package/assets/subtitles/combobox copy.ejs

@@ -0,0 +1,16 @@
+<button data-subtitles-button class='media-control-button media-control-icon gcore-skin-button-color'>
+    <span class='subtitle-text'></span>
+</button>
+
+<ul class='gcore-skin-bg-color'>
+    <li><a href="#" class='gcore-skin-text-color' data-subtitles-select="off">off</a></li>
+    <% for (var i = 0; i < tracks.length; i++) { %>
+        <% if (tracks[i].kind === 'subtitles') { %>
+            <li>
+                <a href="#" class='gcore-skin-text-color' data-subtitles-select="<%= tracks[i].language %>">
+                    <%= tracks[i].label %>
+                </a>
+            </li>
+        <% } %>
+    <% } %>
+</ul>

package/assets/subtitles/combobox.ejs

@@ -0,0 +1,16 @@
+<button data-subtitles-button class='media-control-button media-control-icon gcore-skin-button-color'>
+    <span class='subtitle-text'></span>
+</button>
+
+<ul class='gcore-skin-bg-color'>
+    <li><a href="#" class='gcore-skin-text-color' data-subtitles-select="off">off</a></li>
+    <% for (const track of tracks) { %>
+        <% if (track.kind === 'subtitles' || track.kind === 'captions') { %>
+            <li>
+                <a href="#" class='gcore-skin-text-color' data-subtitles-select="<%= track.language %>">
+                    <%= track.label %>
+                </a>
+            </li>
+        <% } %>
+    <% } %>
+</ul>

package/assets/subtitles/string.ejs

@@ -0,0 +1,3 @@
+<div class="subtitle-string">
+  <p></p>
+</div>

package/assets/subtitles/style.scss

@@ -0,0 +1,99 @@
+*, :focus, :visited {
+  outline: none !important;
+}
+
+.subtitles[data-subtitles] {
+  float: right;
+  position: relative;
+  width: 50px;
+
+  button {
+    background-color: transparent;
+    color: #fff;
+    font-family: Roboto, "Open Sans", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    border: none;
+    font-size: 14px;
+    cursor: pointer;
+
+    .subtitle-text {
+      svg {
+        fill: white;
+      }
+    }
+
+    &:hover {
+      color: #c9c9c9;
+    }
+
+    &.changing {
+      animation: pulse 0.5s infinite alternate;
+    }
+  }
+
+  & > ul {
+    width: 80px;
+    list-style-type: none;
+    position: absolute;
+    bottom: 25px;
+    border: 1px solid black;
+    display: none;
+    background-color: #e6e6e6;
+  }
+
+  li {
+    font-size: 10px;
+
+    &[data-title] {
+      background-color: #c3c2c2;
+      padding: 5px;
+    }
+
+    a {
+      color: #444;
+      padding: 2px 10px;
+      display: block;
+      text-decoration: none;
+
+      &:hover {
+        background-color: #555;
+        color: white;
+
+        a {
+          color: white;
+          text-decoration: none;
+        }
+      }
+    }
+
+    &.current a {
+      color: #f00;
+      background-color: #555;
+    }
+
+  }
+}
+
+@keyframes pulse {
+  0% {
+    color: #fff;
+  }
+
+  50% {
+    color: #ff0101
+  }
+
+  100% {
+    color: #B80000;
+  }
+}
+
+::cue {
+  visibility: hidden !important;
+  font-size: 0 !important;
+}
+
+.ios-fullscreen::cue {
+  visibility: visible !important;
+  font-size: 1em !important;
+}

package/assets/thumbnails/scrub-thumbnails.ejs

@@ -0,0 +1,10 @@
+<div class="thumbnails-text"></div>
+<% if (backdropHeight) { %>
+    <div class="backdrop" style="height: <%= backdropHeight %>px;">
+        <div class="carousel"></div>
+    </div>
+<% }; %>
+<% if (spotlightHeight) { %>
+    <div class="spotlight" style="height: <%= spotlightHeight %>px;">
+    </div>
+<% }; %>

package/assets/thumbnails/style.scss

@@ -0,0 +1,75 @@
+
+.scrub-thumbnails {
+  position: absolute;
+  bottom: 52px;
+  width: 100%;
+  transition: opacity 0.3s ease;
+
+  &.hidden {
+    opacity: 0;
+  }
+
+  .thumbnail-container {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    background-color: #000;
+
+    .thumbnail-img {
+      position: absolute;
+      width: auto;
+    }
+  }
+
+  .thumbnails-text {
+    background-color: rgb(74 74 74 / 70%);
+    border-radius: 3px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: white;
+    position: absolute;
+    bottom: 23px;
+    width: 100px;
+  }
+
+  .spotlight {
+    background-color: #4a4a4a;
+    overflow: hidden;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-color: #4a4a4a;
+    border-style: solid;
+    border-width: 3px;
+    border-radius: 3px;
+
+    img {
+      width: auto;  
+    }
+  }
+
+
+  .backdrop {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #000;
+    overflow: hidden;
+
+    .carousel {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      white-space: nowrap;
+
+      img {
+        width: auto;
+      }
+    }
+
+  }
+ 
+}

package/assets/vast-ads/style.scss

@@ -0,0 +1,112 @@
+
+.clappr-vast-ad-plugin[data-vast-ads] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+
+  &.w370 {
+    .skip-ad-button {
+      font-size: 14px;
+
+      &.skip-ad-time {
+        font-size: 10px;
+      }
+    }
+  }
+
+  .skip-ad-button {
+    position: absolute;
+    cursor: pointer;
+    color: white;
+    right: 0;
+    z-index: 5;
+    background-color: black;
+    border: solid 1px #333;
+    padding: 5px 10px;
+    line-height: 23px;
+    height: 33px;
+    bottom: 37px;
+    font-size: 16px;
+    pointer-events: auto;
+
+    &.skip-ad-time {
+      font-size: 14px;
+      pointer-events: none;
+    }
+  }
+
+  .mute-ad-icon {
+    position: absolute;
+    cursor: pointer;
+    bottom: 37px;
+    z-index: 2;
+    pointer-events: auto;
+    left: 0;
+    height: 33px;
+    background: rgb(0 0 0 / 80%);
+    min-width: 41px;
+
+    svg {
+      height: 30px;
+      margin-left: 5px;
+      margin-top: 2px;
+    }
+  }
+
+  .area-ad-click {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    cursor: pointer;
+
+    .enable {
+      display: block;
+    }
+
+    .disable {
+      display: none;
+    }
+  }
+
+  .preroll-container[data-preroll] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .preroll-overlay[data-preroll] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1337;
+    background-color: #000;
+    cursor: pointer;
+    overflow: hidden;
+    display: none;
+
+    &:hover .preroll-overlay-icon[data-preroll] {
+      opacity: 1;
+    }
+  }
+
+    .preroll-overlay-icon[data-preroll] {
+      position: relative;
+      width: 100%;
+      height: 25%;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0.75;
+    }
+
+}
+

package/assets/video360/button.ejs

@@ -0,0 +1 @@
+<button class="gcore-skin-button-color vr-button media-control-button media-control-icon" data-vr-button></button>

package/assets/video360/style.scss

@@ -0,0 +1,8 @@
+.media-control-vr {
+    .video_360 {
+        float: right;
+        position: relative;
+        width: auto;
+        margin-right: 20px;
+    }
+}

package/build/vite-raw-plugin.js

@@ -0,0 +1,18 @@
+// https://github.com/zhangyuang/vite-raw-plugin/blob/master/index.js
+
+/**
+ * @param {{ include: RegExp }} options 
+ */
+export default function viteRawPlugin (options) {
+    return {
+      name: 'vite-raw-plugin',
+      transform (code, id) {
+        if (options.include.test(id)) {
+          const json = JSON.stringify(code)
+          return {
+            code: `export default ${json}`
+          }
+        }
+      }
+    }
+  }

package/dist/index.js

@@ -42779,7 +42779,7 @@ class Player {
     }
 }
 
-var version$1 = "2.18.3";
+var version$1 = "2.19.1";
 
 var packages = {
 	"node_modules/@clappr/core": {