@gcorevideo/player 2.18.3 → 2.19.0

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

@@ -0,0 +1,488 @@
+:root {
+  --primary-background-color: #000;
+  --secondary-background-color: #262626;
+  --primary-text-color: #fff;
+  --secondary-text-color: #fff4f2;
+  --hover-text-color: #f9b090;
+  --speedtest-red: #df564d;
+  --speedtest-orange: #df934d;
+  --speedtest-yellow: #dfd04d;
+  --speedtest-light-green: #c2df4d;
+  --speedtest-green: #73df4d;
+}
+
+.clappr-nerd-stats[data-clappr-nerd-stats] {
+  .stats-box {
+    position: absolute;
+    display: inline-block;
+    bottom: 52px;
+    right: 16px;
+    padding: 0 10px 12px;
+    margin: 0;
+    line-height: 20px;
+    font-size: 12px;
+    font-weight: 500;
+    background: var(--primary-background-color);
+    color: #fff;
+    z-index: 20000;
+    overflow: auto;
+    max-height: calc(100vh - 60px);
+    max-width: calc(100vw - 10px);
+
+    &-top {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 99990;
+      width: 100%;
+      height: 32px;
+      background: var(--primary-background-color);
+
+      .close-button {
+        float: right;
+        margin-right: 12px;
+        margin-top: 10px;
+        display: block;
+        width: 12px;
+        height: 12px;
+
+        svg {
+          path {
+            fill: var(--primary-text-color);
+          }
+        }
+
+        &:hover {
+          svg {
+            path {
+              fill: var(--hover-text-color);
+            }
+          }
+        }
+      }
+
+    }
+
+    &-main {
+      overflow: hidden;
+      margin-top: 44px;
+    }
+
+    &.wide {
+      width: 820px;
+    }
+
+    ul, li {
+      list-style-type: none;
+
+      div {
+        padding-left: 2px;
+        padding-right: 2px;
+        background: var(--primary-background-color);
+      }
+    }
+
+    ul {
+      display: inline-block;
+      float: left;
+      padding: 5px;
+      width: 200px;
+
+      li {
+        position: relative;
+        padding: 0 5px;
+        text-align: left;
+
+        &.canvas-wrapper {
+          padding: 0;
+
+          canvas {
+            width: 100%;
+          }
+        }
+
+        &:nth-child(2n) {
+          background: var(--secondary-background-color);
+
+          div {
+            background: var(--secondary-background-color);
+          }
+        }
+
+        &.title {
+          text-align: center;
+          font-weight: bold;
+          padding-bottom: 4px;
+          font-size: 14px;
+        }
+
+        div {
+          margin: 0;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+      }
+    }
+
+  }
+}
+
+.desktop {
+  .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box.narrow {
+    width: 250px;
+
+    ul {
+      width: 100%;
+    }
+
+    .speedtest-summary {
+      padding: 0 5px;
+      height: auto;
+
+      &-block {
+        width: 100%;
+        flex-direction: column;
+
+        .speedtest-summary-subblock {
+          width: 100%;
+
+
+          &-content {
+            width: 100%;
+          }
+        }
+      }
+
+      &-header {
+        padding-top: 12px;
+        height: 38px;
+        text-align: center;
+      }
+    }
+
+    .speedtest-quality {
+      &-header {
+        text-align: center;
+      }
+    }
+
+    .speedtest-footer {
+      height: 80px;
+
+      &-about-link {
+        bottom: 0;
+        left: 0;
+      }
+
+      .speedtest-footer-refresh {
+        inset: 50% auto auto 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+
+.speed-test-button {
+  margin: 10px 0 0;
+  color: #000;
+}
+
+.speed-test {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+
+  .speed-test-header {
+    width: 100%;
+    height: 32px;
+
+    .close-speed-test {
+      float: right;
+      margin-right: 5px;
+      line-height: 32px;
+      cursor: pointer;
+      color: var(--primary-text-color);
+
+      &:hover {
+        color: var(--hover-text-color);
+      }
+    }
+  }
+}
+
+.settings-button {
+  float: right;
+  margin: 0 12px 0 0;
+  height: 40px;
+  width: 24px;
+  border: none;
+  padding: 0;
+}
+
+.settings-options-list {
+  position: absolute;
+  right: 16px;
+  bottom: 52px;
+  background: var(--primary-background-color);
+  width: 250px;
+  height: 48px;
+  z-index: 9999;
+  border-radius: 4px;
+
+  svg {
+    float: left;
+    margin-right: 10px;
+  }
+
+  .settings-speedtest-option {
+    color: var(--primary-text-color);
+    margin: 0;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    padding: 14px;
+    width: 250px;
+    font-size: 12px;
+
+    &:hover {
+      color: var(--hover-text-color);
+
+      svg {
+        path {
+          fill: var(--hover-text-color);
+        }
+      }
+    }
+
+    svg {
+      path {
+        fill: var(--primary-text-color);
+      }
+    }
+  }
+}
+
+.speedtest-summary {
+  width: 100%;
+  border-top: 1px solid var(--secondary-background-color) !important;
+  border-bottom: 1px solid var(--secondary-background-color) !important;
+  display: flex !important;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: space-between;
+
+  .speedtest-summary-header {
+    width: 100%;
+    padding-top: 4px;
+    text-align: left;
+    height: 32px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+
+  .speedtest-summary-block {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    .speedtest-summary-subblock {
+      width: 50%;
+      margin-top: 4px;
+      margin-bottom: 12px;
+
+      &-content {
+        padding: 2px;
+        width: 248px;
+        max-width: 100%;
+      }
+    }
+
+  }
+}
+
+.speedtest-quality {
+  width: 100%;
+  height: 36px;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: space-between !important;
+
+  .speedtest-quality-header {
+    font-size: 12px;
+    height: 20px;
+    border-left: 2px solid var(--secondary-background-color) !important;
+    background-color: var(--secondary-background-color);
+    text-align: left;
+  }
+
+  &-content {
+    width: 100%;
+    margin-top: 8px;
+    height: 8px;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: stretch !important;
+    justify-content: space-between;
+
+    &-item {
+      width: 18.8%;
+      background-color: #fff;
+
+      &.speedtest-quality-value-1 {
+        background-color: var(--speedtest-red);
+      }
+
+      &.speedtest-quality-value-2 {
+        background-color: var(--speedtest-orange);
+      }
+
+      &.speedtest-quality-value-3 {
+        background-color: var(--speedtest-yellow);
+      }
+
+      &.speedtest-quality-value-4 {
+        background-color: var(--speedtest-light-green);
+      }
+
+      &.speedtest-quality-value-5 {
+        background-color: var(--speedtest-green);
+      }
+    }
+  }
+}
+
+.speedtest-footer {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: 30px;
+  line-height: 16px;
+
+  &-about-link {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    color: var(--secondary-text-color);
+    text-decoration: underline !important;
+
+    &:hover {
+      color: var(--hover-text-color);
+    }
+  }
+
+  .speedtest-footer-refresh {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    color: var(--secondary-text-color);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    svg {
+      path {
+        fill: var(--secondary-text-color);
+      }
+    }
+
+    &:hover {
+      color: var(--hover-text-color);
+
+      svg {
+        path {
+          fill: var(--hover-text-color);
+        }
+      }
+    }
+  }
+}
+
+.mobile {
+  .clappr-nerd-stats[data-clappr-nerd-stats] {
+    .stats-box {
+      position: fixed;
+      height: auto;
+      width: auto;
+      inset: 0;
+      min-width: 100vw;
+      padding-bottom: 4px;
+      padding-left: 4px;
+      padding-right: 4px;
+
+      &-top {
+        position: fixed;
+      }
+
+      ul {
+        width: 50%;
+      }
+    }
+  }
+}
+
+@media only screen and (orientation: portrait) {
+  .mobile {
+    .speedtest-summary {
+      padding: 0 5px;
+      height: auto;
+
+      &-block {
+        width: 100%;
+        flex-direction: column;
+
+        .speedtest-summary-subblock {
+          width: 100%;
+
+
+          &-content {
+            width: 100%;
+          }
+        }
+      }
+
+      &-header {
+        padding-top: 12px;
+        height: 38px;
+        text-align: center;
+      }
+
+
+    }
+
+    .speedtest-quality {
+      &-header {
+        text-align: center;
+      }
+    }
+
+    .speedtest-footer {
+      .speedtest-footer-refresh {
+        inset: 50% auto auto 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+
+@media only screen and (orientation: landscape) {
+  .mobile {
+    .clappr-nerd-stats[data-clappr-nerd-stats] {
+      .stats-box {
+        ul {
+          width: 25%;
+        }
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,9 @@
+<div class="settings-options-list">
+  <button class="settings-speedtest-option gplayer-lite-btn" type="button">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9.16675 14.1667H10.8334V9.16666H9.16675V14.1667ZM10.0001 7.5C10.2362 7.5 10.4342 7.42 10.5942 7.26C10.7542 7.1 10.834 6.90222 10.8334 6.66666C10.8334 6.43055 10.7534 6.2325 10.5934 6.0725C10.4334 5.9125 10.2356 5.83278 10.0001 5.83333C9.76397 5.83333 9.56591 5.91333 9.40591 6.07333C9.24591 6.23333 9.16619 6.43111 9.16675 6.66666C9.16675 6.90278 9.24675 7.10083 9.40675 7.26083C9.56675 7.42083 9.76453 7.50055 10.0001 7.5ZM10.0001 18.3333C8.8473 18.3333 7.76397 18.1144 6.75008 17.6767C5.73619 17.2389 4.85425 16.6453 4.10425 15.8958C3.35425 15.1458 2.76064 14.2639 2.32341 13.25C1.88619 12.2361 1.6673 11.1528 1.66675 10C1.66675 8.84722 1.88564 7.76389 2.32341 6.75C2.76119 5.73611 3.3548 4.85416 4.10425 4.10416C4.85425 3.35416 5.73619 2.76055 6.75008 2.32333C7.76397 1.88611 8.8473 1.66722 10.0001 1.66666C11.1529 1.66666 12.2362 1.88555 13.2501 2.32333C14.264 2.76111 15.1459 3.35472 15.8959 4.10416C16.6459 4.85416 17.2398 5.73611 17.6776 6.75C18.1154 7.76389 18.334 8.84722 18.3334 10C18.3334 11.1528 18.1145 12.2361 17.6767 13.25C17.239 14.2639 16.6454 15.1458 15.8959 15.8958C15.1459 16.6458 14.264 17.2397 13.2501 17.6775C12.2362 18.1153 11.1529 18.3339 10.0001 18.3333ZM10.0001 16.6667C11.8612 16.6667 13.4376 16.0208 14.7292 14.7292C16.0209 13.4375 16.6667 11.8611 16.6667 10C16.6667 8.13889 16.0209 6.5625 14.7292 5.27083C13.4376 3.97916 11.8612 3.33333 10.0001 3.33333C8.13897 3.33333 6.56258 3.97916 5.27091 5.27083C3.97925 6.5625 3.33341 8.13889 3.33341 10C3.33341 11.8611 3.97925 13.4375 5.27091 14.7292C6.56258 16.0208 8.13897 16.6667 10.0001 16.6667Z" fill="#FFFFFF"/>
+    </svg>
+
+    Statistics
+  </button>
+</div>

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

@@ -0,0 +1,12 @@
+<button type="button" class="settings-button gplayer-lite-btn gcore-skin-button-color" data-settings-button="-1">
+  <svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_111_12392)">
+      <path fill="#ffffff" d="M12.76 8.62667C12.7867 8.42667 12.8 8.22001 12.8 8.00001C12.8 7.78667 12.7867 7.57334 12.7533 7.37334L14.1067 6.32001C14.2267 6.22667 14.26 6.04667 14.1867 5.91334L12.9067 3.70001C12.8267 3.55334 12.66 3.50667 12.5133 3.55334L10.92 4.19334C10.5867 3.94001 10.2333 3.72667 9.83999 3.56667L9.59999 1.87334C9.57333 1.71334 9.43999 1.60001 9.27999 1.60001H6.71999C6.55999 1.60001 6.43332 1.71334 6.40666 1.87334L6.16666 3.56667C5.77333 3.72667 5.41333 3.94667 5.08666 4.19334L3.49332 3.55334C3.34666 3.50001 3.17999 3.55334 3.09999 3.70001L1.82666 5.91334C1.74666 6.05334 1.77333 6.22667 1.90666 6.32001L3.25999 7.37334C3.22666 7.57334 3.19999 7.79334 3.19999 8.00001C3.19999 8.20667 3.21333 8.42667 3.24666 8.62667L1.89333 9.68001C1.77333 9.77334 1.73999 9.95334 1.81333 10.0867L3.09333 12.3C3.17333 12.4467 3.33999 12.4933 3.48666 12.4467L5.07999 11.8067C5.41333 12.06 5.76666 12.2733 6.15999 12.4333L6.39999 14.1267C6.43333 14.2867 6.55999 14.4 6.71999 14.4H9.27999C9.43999 14.4 9.57333 14.2867 9.59333 14.1267L9.83333 12.4333C10.2267 12.2733 10.5867 12.06 10.9133 11.8067L12.5067 12.4467C12.6533 12.5 12.82 12.4467 12.9 12.3L14.18 10.0867C14.26 9.94001 14.2267 9.77334 14.1 9.68001L12.76 8.62667ZM7.99999 10.4C6.67999 10.4 5.59999 9.32001 5.59999 8.00001C5.59999 6.68001 6.67999 5.60001 7.99999 5.60001C9.31999 5.60001 10.4 6.68001 10.4 8.00001C10.4 9.32001 9.31999 10.4 7.99999 10.4Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_111_12392">
+        <rect width="16" height="16" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+</button>