@gcorevideo/player 2.18.3 → 2.19.1

package/assets/media-control/width370.scss

@@ -0,0 +1,263 @@
+.media-control-skin-1[data-media-control-skin-1].w370 {
+  .media-control-subtitles {
+    .subtitles[data-subtitles] {
+      width: 28px;
+
+      svg {
+        height: 17px;
+      }
+    }
+  }
+
+  .share_plugin[data-share] {
+    .share-container {
+      top: calc(50% - 150px);
+      left: calc(50% - 125px);
+      width: 250px;
+      height: calc(100% - 32px);
+      max-height: 300px;
+      transform: none;
+
+      .share-container-main {
+        // .share-container-header--linktext,
+        // .share-container-header--socialtext,
+        // .share-container-header--embedtext,
+        // .share-container-header--embed {
+        //  display: none;
+        // }
+
+        //.share-container-header--socialicon {
+        //  margin-top: -84px;
+        //}
+        //
+        //.share-container-header--link {
+        //  width: 100%;
+        //  border-left: none;
+        //  border-right: none;
+        //  margin-top: 52px;
+        //  height: 32px;
+        //  font-size: 12px;
+        //  padding: 10px;
+        //}
+      }
+
+      .share-container-header {
+        border: none;
+
+        .share-container-header--title {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+
+  .media-control-quality,
+  .media-control-audio-tracks {
+    display: block;
+
+    .level_selector[data-level-selector],
+    .audio_selector[data-track-selector] {
+      margin-top: 3px;
+      margin-right: 10px;
+
+      ul {
+        bottom: 30px;
+        width: 50px;
+
+        li {
+          height: 23px;
+          font-size: 14px;
+
+          a {
+            height: 23px;
+            padding: 2px 5px;
+          }
+        }
+      }
+
+      button[data-level-selector-button],
+      button[data-track-selector-button] {
+        .quality-text, .audio-text {
+          font-size: 13px;
+        }
+
+        span.quality-arrow, span.audio-arrow {
+          width: 7px;
+          height: 5px;
+          margin-left: 4px;
+          margin-top: 11px;
+        }
+      }
+    }
+  }
+
+  .media-control-multicamera {
+    .multicamera {
+      margin-top: 0;
+      margin-right: 10px;
+
+      button {
+        height: 32px;
+
+        svg {
+          height: 17px;
+          margin: 0;
+        }
+      }
+
+      // ul {
+      //  width: 150px;
+      //  bottom: 32px;
+      //  padding: 0;
+
+      //  li {
+      //    .multicamera-item {
+      //      .multicamera-poster {
+      //        width: 40px;
+      //        height: 30px;
+      //        img {
+      //          width: 40px;
+      //          height: 30px;
+      //        }
+      //      }
+      //      .multicamera-text {
+      //        width: 70px;
+      //        .multicamera-title {
+      //          width: 70px;
+      //          height: 15px;
+      //          font-size: 12px;
+      //        }
+      //      }
+      //    }
+      //  }
+      //  &::after {
+      //    display: none;
+      //  }
+      // }
+
+    }
+  }
+
+  .media-control-layer[data-controls] {
+    height: 32px;
+
+    .media-control-bottomgear {
+      .button-gear {
+        height: 33px;
+        margin-right: 10px;
+        padding-right: 0;
+
+        svg {
+          height: 17px;
+        }
+      }
+    }
+
+    .media-control-indicator {
+      line-height: 32px;
+
+      &[data-position],
+      &[data-duration] {
+        font-size: 11px;
+        line-height: 32px;
+      }
+    }
+
+    .dvr-controls[data-dvr-controls] {
+      height: 32px;
+
+      .live-button {
+        margin-left: 10px;
+        height: 32px;
+        font-size: 12px;
+        line-height: 32px;
+        text-shadow: none;
+        letter-spacing: 0.6px;
+
+        &::before {
+          width: 8px;
+          height: 8px;
+          margin-right: 4px;
+        }
+      }
+
+      .live-info {
+        margin-left: 10px;
+        height: 32px;
+        font-size: 12px;
+        line-height: 32px;
+        text-shadow: none;
+        letter-spacing: 0.6px;
+
+        &::before {
+          width: 8px;
+          height: 8px;
+          margin-right: 4px;
+        }
+      }
+
+    }
+
+    button.media-control-button {
+      height: 32px;
+
+      &[data-playpause] {
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+
+      &[data-playstop] {
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+
+      &[data-fullscreen] {
+        margin-right: 12px;
+        height: 33px;
+      }
+
+      svg {
+        height: 17px;
+      }
+    }
+
+    .media-clip-container {
+      .media-clip-text,
+      .media-clip-point {
+        line-height: 33px;
+        font-size: 11px;
+      }
+
+      .media-clip-text {
+        max-width: calc(80% - 210px);
+      }
+    }
+
+    .drawer-container[data-volume] {
+      height: 32px;
+      margin-right: 8px;
+
+      .drawer-icon-container[data-volume] {
+        .drawer-icon[data-volume] {
+          height: 32px;
+
+          svg {
+            height: 17px;
+            margin-top: 5px;
+          }
+        }
+      }
+
+      .bar-container[data-volume] {
+        display: none;
+
+        &.volume-bar-hide {
+          width: 0;
+          height: 12px;
+          top: 9px;
+          padding: 0;
+        }
+      }
+    }
+  }
+}

package/assets/multi-camera/multicamera.ejs

@@ -0,0 +1,29 @@
+<button data-multicamera-button class='gcore-skin-button-color'>
+    <span class="multicamera-icon"></span>
+</button>
+
+<ul class="gcore-skin-bg-color">
+    <% for (var i = 0; i < streams.length; i++) { %>
+        <% if(!streams[i].live && multisources_mode === 'only_live') { %>
+            <% continue; %>
+        <% } %>
+        <li>
+            <div class="multicamera-item" data-multicamera-selector-live="<%= streams[i].live %>"
+                 data-multicamera-selector-select="<%= streams[i].id %>">
+                <div class="multicamera-screenshot">
+                    <% if (streams[i].screenshot) { %>
+                        <img src="<%= streams[i].screenshot %>" alt="<%= streams[i].title %>"/>
+                    <% } %>
+                </div>
+                <div class="multicamera-text gcore-skin-text-color">
+                    <% if (streams[i].title) { %>
+                        <div class="multicamera-title gcore-skin-text-color"><%= streams[i].title %></div>
+                    <% } %>
+                    <% if (streams[i].description) { %>
+                        <div class="multicamera-description gcore-skin-text-color"><%= streams[i].description %></div>
+                    <% } %>
+                </div>
+            </div>
+        </li>
+    <% } %>
+</ul>

package/assets/multi-camera/style.scss

@@ -0,0 +1,176 @@
+*, :focus, :visited {
+  outline: none !important;
+}
+
+.multicamera[data-multicamera] {
+  float: right;
+  margin-top: 4px;
+  position: relative;
+  margin-right: 20px;
+  width: 20px;
+
+  button {
+    background-color: transparent;
+    color: #fff;
+    font-family: Roboto, "Open Sans", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    border: none;
+    font-size: 14px;
+    padding: 0;
+
+    svg {
+      height: 20px;
+      position: relative;
+      margin-top: 6px;
+    }
+
+    &:hover {
+      color: #c9c9c9;
+    }
+
+    &.changing {
+      animation: pulse 0.5s infinite alternate;
+    }
+
+    span.quality-arrow {
+      width: 9px;
+      height: 6px;
+      margin-top: 11px;
+      margin-left: 5px;
+    }
+  }
+
+  & > ul {
+    padding: 6px 0;
+    right: -24px;
+    width: 245px;
+    list-style-type: none;
+    position: absolute;
+    bottom: 48px;
+    border-radius: 4px;
+    display: none;
+    background-color: rgb(74 74 74 / 90%);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 85%;
+      margin-left: -10px;
+      width: 0;
+      height: 0;
+      border-top: 10px solid rgb(74 74 74 / 90%);
+      border-right: 10px solid transparent;
+      border-left: 10px solid transparent;
+    }
+  }
+
+  li {
+    font-size: 10px;
+    cursor: pointer;
+
+    .multicamera-item {
+      display: flex;
+      padding: 10px 0;
+      justify-content: center;
+      position: relative;
+
+      &[data-mulitcamera-selector-live="false"] {
+        .multicamera-screenshot {
+          opacity: .5;
+        }
+
+        .multicamera-text {
+          opacity: .5;
+        }
+
+        &:hover {
+          background-color: rgb(0 0 0 / 0%);
+        }
+
+        pointer-events: none;
+      }
+
+      &:hover, &.multicamera-active {
+        background-color: rgb(0 0 0 / 30%);
+      }
+
+      .multicamera-screenshot {
+        width: 80px;
+        height: 60px;
+
+        img {
+          width: 80px;
+          height: 60px;
+        }
+      }
+
+      .multicamera-text {
+        width: 120px;
+        text-align: left;
+        margin-left: 15px;
+
+        .multicamera-title, .multicamera-description {
+          width: 120px;
+          height: 20px;
+          font-family: Roboto, "Open Sans", Arial, sans-serif;
+          font-size: 14px;
+          font-weight: normal;
+          font-style: normal;
+          font-stretch: normal;
+          line-height: 1.43;
+          letter-spacing: normal;
+          text-align: left;
+          color: #fff;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        .multicamera-description {
+          opacity: 0.6;
+        }
+      }
+    }
+
+    &[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;
+    }
+
+  }
+}
+
+@keyframes pulse {
+  0% {
+    color: #fff;
+  }
+
+  50% {
+    color: #ff0101
+  }
+
+  100% {
+    color: #B80000;
+  }
+}

package/assets/picture-in-picture/button.ejs

@@ -0,0 +1,3 @@
+<button class="gplayer-lite-btn gcore-skin-button-color">
+    <span><%= pipIcon %></span>
+</button>

package/assets/picture-in-picture/button.scss

@@ -0,0 +1,11 @@
+.media-control-pip {
+  button {
+    float: right;
+    height: 40px;
+    margin-right: 20px;
+
+    svg {
+      height: 20px;
+    }
+  }
+}

package/assets/playback-rate/button.ejs

@@ -0,0 +1,6 @@
+<button class='gplayer-lite-btn gcore-skin-text-color gear-option'>
+    <span class="gear-option_speed-icon"><%= speedIcon %></span>
+    <span>Playback speed</span>
+    <span class="gear-option_arrow-right-icon"><%= arrowRightIcon %></span>
+    <span class='gear-option_value'><%= title %></span>
+</button>

package/assets/playback-rate/list.ejs

@@ -0,0 +1,14 @@
+<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+    <span class="arrow-left-icon"><%= arrowLeftIcon %></span>
+    Playback speed
+</button>
+<ul class="gear-sub-menu">
+    <% for (var i = playbackRates.length - 1; i >= 0; i--) { %>
+        <li>
+            <a href="#" class='gear-sub-menu_btn gcore-skin-text-color' data-rate="<%= playbackRates[i].value %>">
+                <span class="check-icon"><%= checkIcon %></span>
+                <%= playbackRates[i].label %>
+            </a>
+        </li>
+    <% } %>
+</ul>

package/assets/playback-rate/playback-rate-selector.ejs

@@ -0,0 +1,9 @@
+<button class="gcore-skin-button-color" data-playback-rate-button>
+    <span><%= title %></span>
+</button>
+<ul>
+    <% for (var i = 0; i < playbackRates.length; i++) { %>
+        <li data-playback-rate-select="<%= playbackRates[i].value %>"><a
+                    data-playback-rate-a="<%= playbackRates[i].value %>" href="#"><%= playbackRates[i].label %></a></li>
+    <% }; %>
+</ul>

package/assets/poster/poster.ejs

@@ -0,0 +1 @@
+<div class="play-wrapper" data-poster></div>

package/assets/poster/poster.scss

@@ -0,0 +1,32 @@
+.player-poster[data-poster] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 998;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+
+  &.clickable { cursor: pointer; }
+  &:hover .play-wrapper[data-poster] { opacity: 1; }
+
+  .play-wrapper[data-poster] {
+    width: 100%;
+    height: 25%;
+    margin: 0 auto;
+    opacity: 0.75;
+    transition: opacity 0.1s ease;
+
+    svg {
+      height: 100%;
+      display: inline;
+      path { fill: #fff; }
+    }
+  }
+}

package/assets/seek-time/seek-time.html

@@ -0,0 +1,2 @@
+<span data-seek-time></span>
+<span data-duration></span>

package/assets/seek-time/seek-time.scss

@@ -0,0 +1,38 @@
+.seek-time[data-seek-time] {
+  position: absolute;
+  white-space: nowrap;
+  height: 20px;
+  line-height: 20px;
+  font-size: 0;
+  left: -100%;
+  bottom: 55px;
+  background-color: rgb(2 2 2 / 50%);
+  z-index: 9999;
+  transition: opacity 0.1s ease;
+
+  &.hidden[data-seek-time] {
+    opacity: 0;
+  }
+
+  [data-seek-time] {
+    display: inline-block;
+    color: white;
+    font-size: 10px;
+    padding-left: 7px;
+    padding-right: 7px;
+    vertical-align: top;
+  }
+
+  [data-duration] {
+    display: inline-block;
+    color: rgb(255 255 255 / 50%);
+    font-size: 10px;
+    padding-right: 7px;
+    vertical-align: top;
+
+    &::before {
+      content: "|";
+      margin-right: 7px;
+    }
+  }
+}

package/assets/share/share.ejs

@@ -0,0 +1,37 @@
+<% if (url || embed) { %>
+    <div class="share-button-container gcore-skin-bg-color">
+        <button type="button" class="media-control-button media-control-icon" data-share-button
+                aria-label="share"></button>
+    </div>
+
+    <div class="share-container gcore-skin-bg-color">
+        <div class="share-container-header gcore-skin-bg-color">
+            <div class="share-container-header--title gcore-skin-text-color"><%= share_title %></div>
+            <div class="share-container-header--close gcore-skin-button-color" data-share-close></div>
+        </div>
+        <div class="share-container-main gcore-skin-bg-color">
+            <% if (url) { %>
+                <div class="share-container-header--linktext gcore-skin-text-color"><%= link_title %></div>
+                <input
+                        class="share-container-header--link gcore-skin-bg-color gcore-skin-text-color gcore-skin-border-textarea-color"
+                        value="<%= url %>" data-share-link
+                >
+            <% }; %>
+            <% if (url) { %>
+                <div class="share-container-header--socialtext gcore-skin-text-color"><%= social_title %></div>
+                <div class="share-container-header--socialicon">
+                    <div class="share-container-header--socialicon_fb gcore-skin-button-with-bg-color"
+                         data-share-fb></div>
+                    <div class="share-container-header--socialicon_tw gcore-skin-button-with-bg-color"
+                         data-share-tw></div>
+                </div>
+            <% }; %>
+            <% if (embed) { %>
+                <div class="share-container-header--embedtext gcore-skin-text-color"><%= embed_title %></div>
+                <textarea
+                        class="share-container-header--embed gcore-skin-bg-color gcore-skin-text-color gcore-skin-border-textarea-color"
+                        rows="4" data-share-embed><%= embed %></textarea>
+            <% }; %>
+        </div>
+    </div>
+<% }; %>