@gcorevideo/player 2.18.3 → 2.19.0

package/assets/audio-selector/style.scss

@@ -0,0 +1,156 @@
+*, :focus, :visited {
+    outline: none!important;
+}
+
+.audio_selector[data-track-selector] {
+  float: right;
+  margin-top: 4px;
+  position: relative;
+  width: 50px;
+  font-family: Roboto, "Open Sans", Arial, sans-serif;
+
+  button {
+    background-color: transparent;
+    color: #fff;
+    -webkit-font-smoothing: antialiased;
+    border: none;
+    font-size: 14px;
+    cursor: pointer;
+
+    .audio-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100px;
+      background-color: transparent;
+      -webkit-font-smoothing: antialiased;
+      border: none;
+      font-size: 14px;
+      cursor: pointer;
+      padding-top: 5px;
+    }
+
+    &:hover {
+      color: #c9c9c9;
+    }
+
+    &.changing {
+      animation: pulse 0.5s infinite alternate;
+    }
+
+    span.audio-arrow {
+      width: 9px;
+      height: 6px;
+      margin-top: 11px;
+      margin-left: 5px;
+    }
+  }
+
+  &> ul {
+    max-width: 114px;
+    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;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+
+      &:hover {
+        background-color: #555;
+        color: white;
+
+        a {
+          color: white;
+          text-decoration: none;
+        }
+      }
+    }
+
+    &.current a {
+      color: #f00;
+    }
+
+  }
+}
+
+.audio_selector[data-track-selector] {
+  width: auto;
+  margin-top: 7px;
+  margin-right: 20px;
+
+  button[data-level-selector-button],
+  button[data-track-selector-button] {
+    display: flex;
+    justify-content: center;
+    padding: 0;
+
+    &:hover {
+      color: white;
+    }
+  }
+
+  ul {
+    background-color: rgb(74 74 74 / 60%);
+    border: none;
+    min-width: 60px;
+    transform: rotate(180deg);
+    border-radius: 4px;
+    bottom: 40px;
+    right: -2px;
+
+    li {
+      transform: rotate(-180deg);
+      font-size: 16px;
+      text-align: right;
+      height: 30px;
+
+      a {
+        height: 30px;
+        padding: 5px 10px;
+        color: #fffffe;
+
+        &:hover {
+          background-color: rgb(0 0 0 / 40%);
+        }
+      }
+
+      &:first-child {
+        a {
+          border-bottom-left-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+      }
+
+      &:last-child {
+        a {
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
+      }
+    }
+  }
+}
+
+@keyframes pulse {
+  0% {color: #fff;}
+  50% {color: #ff0101}
+  100% {color: #B80000;}
+}

package/assets/audio-selector/track-selector.ejs

@@ -0,0 +1,12 @@
+<button data-track-selector-button class='gcore-skin-button-color'>
+    <span class='audio-text'><%= title %></span> <span class="audio-arrow"></span>
+</button>
+<ul class='gcore-skin-bg-color'>
+    <% for (var i = 0; i < tracks.length; i++) { %>
+        <li>
+            <a href="#" class='gcore-skin-text-color' data-track-selector-select="<%= tracks[i].id %>">
+                <%= tracks[i].label || tracks[i].name %>
+            </a>
+        </li>
+    <% }; %>
+</ul>

package/assets/big-mute-button/big-mute-button.ejs

@@ -0,0 +1,3 @@
+<div class="big-mute-icon-wrapper" data-big-mute>
+    <div class="big-mute-icon gcore-skin-border-color" data-big-mute-icon></div>
+</div>

package/assets/big-mute-button/big-mute-button.scss

@@ -0,0 +1,57 @@
+
+.big-mute-icon-wrapper[data-big-mute] {
+  position: absolute;
+  z-index: 9998;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: calc(100% - 50px);
+  margin: 0 auto;
+  opacity: 0.75;
+  transition: opacity 0.1s ease;
+  pointer-events: auto;
+
+  &.hide {
+    display: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.big-mute-icon[data-big-mute-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  width: 120px;
+  height: 120px;
+  border: 2px solid white;
+  border-radius: 50%;
+  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+  filter: alpha(opacity=60);
+  opacity: 1;
+  box-shadow: 0 0 1px 0 white;
+  background: #f0f3f7f0;
+  z-index: 10000;
+
+  svg {
+    margin-left: 5px;
+    width: 80px;
+    height: 80px;
+
+    path {
+      fill: #1f1e1e !important;
+    }
+  }
+
+  &:hover {
+    background: #f0f3f7e0;
+
+    svg path {
+      fill: #151515 !important;
+    }
+  }
+}

package/assets/bottom-gear/bottomgear.ejs

@@ -0,0 +1,12 @@
+<div class="media-control-gear" data-<%= name %>>
+    <button type="button" class="button-gear gplayer-lite-btn gcore-skin-button-color" data-gear-button="-1">
+        <span class="gear-icon"><%= icon %></span>
+    </button>
+    <div class="gear-wrapper gcore-skin-bg-color">
+        <ul class="gear-options-list">
+            <% items.forEach(function (gear) { %>
+                <li data-<%= gear %>></li>
+            <% }); %>
+        </ul>
+    </div>
+</div>

package/assets/bottom-gear/gear-sub-menu.scss

@@ -0,0 +1,95 @@
+*, :focus, :visited {
+  outline: none !important;
+}
+
+.gear-wrapper {
+  .go-back {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    width: 100%;
+    text-align: left;
+    padding: 12px;
+
+    .arrow-left-icon {
+      float: left;
+      padding-top: 2px;
+      padding-right: 2px;
+
+      svg {
+        height: 16px;
+      }
+    }
+  }
+
+  ul.gear-sub-menu {
+    width: 100%;
+    list-style-type: none;
+    background-color: transparent;
+    min-width: 60px;
+    border-top: 2px solid rgb(36 36 36);
+
+    li {
+      font-size: 12px;
+      text-align: left;
+
+      &[data-title] {
+        background-color: #c3c2c2;
+        padding: 5px;
+      }
+
+      a {
+        display: block;
+        text-decoration: none;
+        height: 32px;
+        padding: 5px 10px;
+        line-height: 22px;
+        color: #fffffe;
+
+        &:hover {
+          color: white;
+          background-color: rgb(0 0 0 / 40%);
+
+          a {
+            color: white;
+            text-decoration: none;
+          }
+        }
+
+        .check-icon {
+          width: 30px;
+          height: 20px;
+          float: left;
+          display: block;
+
+          svg {
+            display: none;
+          }
+        }
+      }
+
+      &.current a {
+        .check-icon {
+          svg {
+            display: inline;
+          }
+        }
+      }
+    }
+  }
+
+  svg {
+    height: 20px;
+  }
+}
+
+
+// &.changing {
+//  animation: pulse 0.5s infinite alternate;
+// }
+
+// @keyframes pulse {
+//  0% {color: #fff;}
+//  50% {color: #ff0101}
+//  100% {color: #B80000;}
+// }

package/assets/bottom-gear/gear.scss

@@ -0,0 +1,79 @@
+.media-control-skin-1[data-media-control-skin-1] {
+  .media-control-gear {
+    float: right;
+    font-family: Roboto, "Open Sans", Arial, sans-serif;
+
+    .button-gear {
+      height: 40px;
+      width: 40px;
+      padding-right: 20px;
+
+      svg {
+        height: 20px;
+      }
+    }
+
+    .gear-wrapper {
+      position: absolute;
+      right: 16px;
+      bottom: 52px;
+      display: none;
+
+      // background: var(--primary-background-color);
+      // background-color: rgb(200 0 0 / 50%);
+
+      //background-color: rgb(0 0 0 / 70%);
+      width: 250px;
+      min-height: 48px;
+      z-index: 9999;
+      border-radius: 4px;
+
+      .gear-options-list {
+        padding: 8px 0;
+
+        svg {
+          float: left;
+          margin-right: 10px;
+        }
+
+        .gear-option {
+          //color: var(--primary-text-color);
+          margin: 0;
+          text-align: left;
+          line-height: 22px;
+          padding: 5px 14px;
+          width: 250px;
+          font-size: 12px;
+
+          // &:hover {
+          //  color: var(--hover-text-color);
+
+          //  svg {
+          //    path {
+          //      fill: var(--hover-text-color);
+          //    }
+          //  }
+          // }
+
+          .gear-option_arrow-right-icon {
+            float: right;
+            margin-right: -14px;
+          }
+
+          .gear-option_value {
+            float: right;
+            margin-right: 8px;
+          }
+
+          svg {
+            height: 20px;
+
+          //  path {
+          //    fill: var(--primary-text-color);
+          //  }
+          }
+        }
+      }
+    }
+  }
+}

package/assets/clappr-nerd-stats/button.ejs

@@ -0,0 +1,4 @@
+<button class='nerd-button gplayer-lite-btn gcore-skin-text-color gear-option'>
+    <span class="stats-icon"></span>
+    <span>Statistics</span>
+</button>

package/assets/clappr-nerd-stats/clappr-nerd-stats.ejs

@@ -0,0 +1,212 @@
+<% general = metrics.general %>
+<% counters = metrics.counters %>
+<% timers = metrics.timers %>
+<% extra = metrics.extra %>
+<% custom = metrics.custom %>
+
+<div class="stats-box">
+    <div class="stats-box-top">
+        <a class="close-button gplayer-lite-btn" data-close-button>
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <g clip-path="url(#clip0_184_1489)">
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M7.41376 6.00013L13.7068 -0.292872C14.0978 -0.683872 14.0978 -1.31587 13.7068 -1.70687C13.3158 -2.09787 12.6838 -2.09787 12.2928 -1.70687L5.99976 4.58613L-0.293238 -1.70687C-0.684238 -2.09787 -1.31624 -2.09787 -1.70724 -1.70687C-2.09824 -1.31587 -2.09824 -0.683872 -1.70724 -0.292872L4.58576 6.00013L-1.70724 12.2931C-2.09824 12.6841 -2.09824 13.3161 -1.70724 13.7071C-1.51224 13.9021 -1.25624 14.0001 -1.00024 14.0001C-0.744238 14.0001 -0.488238 13.9021 -0.293238 13.7071L5.99976 7.41413L12.2928 13.7071C12.4878 13.9021 12.7438 14.0001 12.9998 14.0001C13.2558 14.0001 13.5118 13.9021 13.7068 13.7071C14.0978 13.3161 14.0978 12.6841 13.7068 12.2931L7.41376 6.00013Z"
+                          fill="white"/>
+                </g>
+                <defs>
+                    <clipPath id="clip0_184_1489">
+                        <rect width="12" height="12" fill="white"/>
+                    </clipPath>
+                </defs>
+            </svg>
+        </a>
+    </div>
+    <div class="stats-box-main">
+        <ul>
+            <li class="title"><span>General</span></li>
+            <li>
+                Display resolution:
+                <div><span><%= general.displayResolution %></span></div>
+            </li>
+            <li>
+                Volume:
+                <div><span><%= general.volume %></span></div>
+            </li>
+            <li>
+                Connection speed:
+                <div><span id="dlText"><%= custom.connectionSpeed %></span> Mbps</div>
+            </li>
+            <li class="canvas-wrapper">
+                <canvas id="speedTestCanvas" width="190" height="20"></canvas>
+            </li>
+            <li>
+                Ping:
+                <div><span id="pingText"><%= custom.ping %></span> ms</div>
+            </li>
+            <li>
+                Jitter:
+                <div><span id="jitterText"><%= custom.jitter %></span> ms</div>
+            </li>
+        </ul>
+
+        <ul>
+            <li class="title"><span>Counters</span></li>
+            <li>
+                Plays:
+                <div><span><%= counters.play %></span></div>
+            </li>
+            <li>
+                Pauses:
+                <div><span><%= counters.pause %></span></div>
+            </li>
+            <li>
+                Errors:
+                <div><span><%= counters.error %></span></div>
+            </li>
+            <li>
+                Bufferings:
+                <div><span><%= counters.buffering %></span></div>
+            </li>
+            <li>
+                Decoded frames:
+                <div><span><%= counters.decodedFrames %></span></div>
+            </li>
+            <li>
+                Dropped frames:
+                <div><span><%= counters.droppedFrames %></span></div>
+            </li>
+            <li>
+                Frames per second:
+                <div><span><%= counters.fps %></span></div>
+            </li>
+            <li>
+                Bitrate changes:
+                <div><span><%= counters.changeLevel %></span></div>
+            </li>
+            <li>
+                Seeks:
+                <div><span><%= counters.seek %></span></div>
+            </li>
+            <li>
+                Fullscreen:
+                <div><span><%= counters.fullscreen %></span></div>
+            </li>
+            <li>
+                DVR seeks:
+                <div><span><%= counters.dvrUsage %></span></div>
+            </li>
+        </ul>
+
+        <ul>
+            <li class="title"><span>Timers</span></li>
+            <li>
+                Startup time:
+                <div><span><%= timers.startup %></span></div>
+            </li>
+            <li>
+                Watching time:
+                <div><span><%= timers.watch %></span></div>
+            </li>
+            <li>
+                Pause time:
+                <div><span><%= timers.pause %></span></div>
+            </li>
+            <li>
+                Buffering time:
+                <div><span><%= timers.buffering %></span></div>
+            </li>
+            <li>
+                Session time:
+                <div><span><%= timers.session %></span></div>
+            </li>
+            <!--    <li>-->
+            <!--      Latency:-->
+            <!--      <div><span><%= timers.latency %></span></div>-->
+            <!--    </li>-->
+        </ul>
+
+        <ul>
+            <li class="title"><span>Extra</span></li>
+            <li>
+                Playback:
+                <div><span><%= extra.playbackName %></span></div>
+            </li>
+            <li>
+                Playback type:
+                <div><span><%= extra.playbackType %></span></div>
+            </li>
+            <li>
+                Buffer size:
+                <div><span><%= extra.buffersize %></span></div>
+            </li>
+            <li>
+                Video duration:
+                <div><span><%= extra.duration %></span></div>
+            </li>
+            <li>
+                Current time:
+                <div><span><%= extra.currentTime %></span></div>
+            </li>
+            <li>
+                Bitrate weighted mean:
+                <div><span><%= extra.bitrateWeightedMean %></span></div>
+            </li>
+            <li>
+                Bitrate most used:
+                <div><span><%= extra.bitrateMostUsed %></span></div>
+            </li>
+            <li>
+                % Watched:
+                <div><span><%= extra.watchedPercentage %></span></div>
+            </li>
+            <li>
+                % Buffering:
+                <div><span><%= extra.bufferingPercentage %></span></div>
+            </li>
+        </ul>
+    </div>
+    <div class="speedtest-summary">
+        <div class="speedtest-summary-header">Your internet quality summary</div>
+        <div class="speedtest-summary-block">
+            <div class="speedtest-summary-subblock">
+                <div class="speedtest-summary-subblock-content">
+                    <div class="speedtest-quality">
+                        <div class="speedtest-quality-header">VOD: <%= custom.vodQuality %></div>
+                        <div class="speedtest-quality-content" data-streaming-type="vod">
+                            <div class="speedtest-quality-content-item"></div>
+                            <div class="speedtest-quality-content-item"></div>
+                            <div class="speedtest-quality-content-item"></div>
+                            <div class="speedtest-quality-content-item"></div>
+                            <div class="speedtest-quality-content-item"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="speedtest-summary-subblock">
+                <div class="speedtest-summary-subblock-content">
+                    <div class="speedtest-quality">
+                        <div class="speedtest-quality-header">Live: <%= custom.liveQuality %></div>
+                        <div class="speedtest-quality-content" data-streaming-type="live">
+                            <div class="speedtest-quality-content-item"></div>
+                            <div class="speedtest-quality-content-item"></div>
+                            <div class="speedtest-quality-content-item"></div>
+                            <div class="speedtest-quality-content-item"></div>
+                            <div class="speedtest-quality-content-item"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="speedtest-footer">
+        <!--    <a class="speedtest-footer-about-link" href="" target="_blank">I am not a nerd, what's this all about?</a>-->
+        <button class="gplayer-lite-btn speedtest-btn speedtest-footer-refresh" data-refresh-button type="button">
+            <svg width="12" height="10" viewBox="0 0 12 10" fill="none">
+                <path
+                        d="M6.03968 0.124998C3.64268 0.124998 1.67268 1.9565 1.48068 4.2915H1.00018C0.925833 4.29146 0.853156 4.31353 0.791378 4.35489C0.729601 4.39625 0.681511 4.45503 0.653218 4.52378C0.624925 4.59253 0.617705 4.66814 0.632476 4.74101C0.647248 4.81387 0.683343 4.88069 0.736177 4.933L1.57618 5.766C1.64641 5.83561 1.74129 5.87467 1.84018 5.87467C1.93906 5.87467 2.03395 5.83561 2.10418 5.766L2.94418 4.933C2.99701 4.88069 3.03311 4.81387 3.04788 4.74101C3.06265 4.66814 3.05543 4.59253 3.02714 4.52378C2.99884 4.45503 2.95075 4.39625 2.88898 4.35489C2.8272 4.31353 2.75452 4.29146 2.68018 4.2915H2.23368C2.42368 2.376 4.05268 0.874998 6.03968 0.874998C6.6948 0.873639 7.33932 1.04039 7.91158 1.35931C8.48384 1.67822 8.9647 2.13863 9.30818 2.6965C9.33331 2.73978 9.36686 2.7776 9.40684 2.80771C9.44682 2.83783 9.49243 2.85963 9.54097 2.87184C9.58951 2.88405 9.64001 2.88643 9.68948 2.87881C9.73895 2.8712 9.7864 2.85377 9.82902 2.82753C9.87165 2.80129 9.90859 2.76679 9.93767 2.72605C9.96675 2.68531 9.98739 2.63916 9.99835 2.59032C10.0093 2.54148 10.0104 2.49095 10.0015 2.44168C9.99264 2.39242 9.974 2.34544 9.94668 2.3035C9.53615 1.63664 8.96146 1.08621 8.27752 0.704805C7.59359 0.323402 6.82277 0.123774 6.03968 0.124998ZM10.4207 4.2335C10.3505 4.16419 10.2558 4.12532 10.1572 4.12532C10.0585 4.12532 9.96386 4.16419 9.89368 4.2335L9.05018 5.0665C8.9972 5.11874 8.96096 5.18557 8.94608 5.25847C8.93119 5.33137 8.93833 5.40705 8.96658 5.47588C8.99483 5.54472 9.04292 5.60359 9.10473 5.64501C9.16654 5.68644 9.23927 5.70853 9.31368 5.7085H9.76318C9.57218 7.6235 7.93768 9.125 5.94118 9.125C5.28399 9.12683 4.63729 8.96035 4.06269 8.64141C3.48808 8.32247 3.00473 7.86169 2.65868 7.303C2.63281 7.26107 2.59893 7.22465 2.55899 7.19582C2.51904 7.16699 2.47381 7.14631 2.42587 7.13495C2.37793 7.1236 2.32823 7.1218 2.27959 7.12966C2.23096 7.13752 2.18435 7.15488 2.14243 7.18075C2.05776 7.233 1.99731 7.31674 1.97438 7.41355C1.95146 7.51037 1.96793 7.61233 2.02018 7.697C2.43345 8.36457 3.01076 8.91521 3.69713 9.29647C4.38349 9.67772 5.15604 9.87689 5.94118 9.875C8.34518 9.875 10.3237 8.045 10.5162 5.7085H11.0002C11.0746 5.70853 11.1473 5.68644 11.2091 5.64501C11.2709 5.60359 11.319 5.54472 11.3473 5.47588C11.3755 5.40705 11.3827 5.33137 11.3678 5.25847C11.3529 5.18557 11.3167 5.11874 11.2637 5.0665L10.4207 4.2335Z"
+                        fill="white"/>
+            </svg>
+            Refresh
+        </button>
+    </div>
+</div>