@gcorevideo/player 2.18.3 → 2.19.1

package/assets/icons/old/share.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
+    <title>share</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g>
+            <rect id="bounding-box" x="0" y="0" width="24" height="24"></rect>
+            <path d="M15.2144393,2.20876082 C14.9358078,1.93041306 14.484087,1.93041306 14.2054555,2.20876082 C14.0450314,2.37291462 13.9880385,2.58702828 14.0119615,2.80114194 L14.0119615,7.01204389 C8.17688322,7.01204389 3,11.9502186 3,17.8668927 C3,19.3870997 3.31521947,20.8287983 3.87670414,22.1420287 C4.71048778,17.6741904 9.35614177,14.1420287 14,14.1420287 L14,18.4243019 C13.9753735,18.6312784 14.045735,18.7740209 14.2054555,18.9310376 C14.5129353,19.2450709 14.992097,19.1166027 15.2531381,18.8882148 L21.7970716,11.2579177 C21.9455344,11.1080382 22.0088597,10.9081988 21.9990091,10.7154965 C22.0088597,10.5156571 21.9455344,10.3229548 21.7970716,10.1730752 L15.2144393,2.20876082 Z" fill="#FFFFFE"></path>
+        </g>
+    </g>
+</svg>

package/assets/icons/old/sound-off.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" class="mute-off-ad-icon" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
+  <desc>Created with Sketch.</desc>
+  <defs></defs>
+  <g id="sound-off" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g>
+      <rect id="bounding-box" x="0" y="0" width="24" height="24"></rect>
+      <path
+        d="M21.7429333,9.044125 L18.8202788,12 L21.7429333,14.955875 C22.058101,15.274625 22.0875166,15.7626667 21.8087684,16.0452917 C21.5293197,16.3272083 21.046763,16.2974583 20.7315954,15.9787083 L17.8089408,13.0228333 L14.8862862,15.9787083 C14.5711186,16.2974583 14.0885619,16.3272083 13.8091133,16.0452917 C13.530365,15.7626667 13.5597807,15.274625 13.8749483,14.955875 L16.7976029,12 L13.8749483,9.044125 C13.5597807,8.725375 13.530365,8.23733333 13.8091133,7.95470833 C14.0885619,7.67279167 14.5711186,7.70254167 14.8862862,8.02129167 L17.8089408,10.9771667 L20.7315954,8.02129167 C21.046763,7.70254167 21.5293197,7.67279167 21.8087684,7.95470833 C22.0875166,8.23733333 22.058101,8.725375 21.7429333,9.044125 Z M6.5,6 L10.5,3 C11.3284271,3 12,3.67157288 12,4.5 L12,19.5 C12,20.3284271 11.3284271,21 10.5,21 L6.5,18 L6.5,6 Z M2.5,7 L5,7 L5,17 L2.5,17 C1.67157288,17 1,16.3284271 1,15.5 L1,8.5 C1,7.67157288 1.67157288,7 2.5,7 Z"
+        fill="#FFFFFE"></path>
+    </g>
+  </g>
+</svg>

package/assets/icons/old/sound-on.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" class="mute-on-ad-icon" viewBox="0 0 24 24" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
+  <desc>Created with Sketch.</desc>
+  <defs></defs>
+  <g id="sound-on" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g>
+      <rect id="bounding-box" x="0" y="0" width="24" height="24"></rect>
+      <path
+        d="M15.5,3.46794895 C19.6672258,4.27664367 22.5,7.70126202 22.5,12 C22.5,16.2744271 19.7580645,19.5853563 15.5,20.531336 L15.5,22 C20.3087742,21.2906939 24,17.1074327 24,12 C24,6.8925673 20.3087742,2.70859104 15.5,2 L15.5,3.46794895 Z M15.5,7.0666762 C17.9043871,7.41632405 19.738045,9.48060491 19.738045,11.9996425 C19.738045,14.5186801 17.9043871,16.5829609 15.5,16.9326088 L15.5,15.5025562 C17.1194839,15.1714991 18.3186901,13.7292911 18.3186901,11.9996425 C18.3186901,10.2699939 17.1194839,8.82778592 15.5,8.49672875 L15.5,7.0666762 Z M6.5,6 L11.5,3 C12.3284271,3 13,3.67157288 13,4.5 L13,19.5 C13,20.3284271 12.3284271,21 11.5,21 L6.5,18 L6.5,6 Z M2.5,7 L5,7 L5,17 L2.5,17 C1.67157288,17 1,16.3284271 1,15.5 L1,8.5 C1,7.67157288 1.67157288,7 2.5,7 Z"
+        fill="#FFFFFE"></path>
+    </g>
+  </g>
+</svg>

package/assets/icons/old/streams.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20">
+    <path fill="#FFF" fill-rule="nonzero" d="M24 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-1a.5.5 0 0 1-.5-.5v-10A2.5 2.5 0 0 0 18.5 3h-14a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 0 1 5.5 0h17A1.5 1.5 0 0 1 24 1.5M12.724 12.447l-5 2.5a.505.505 0 0 1-.487-.021A.503.503 0 0 1 7 14.5v-5c0-.173.09-.334.237-.426a.505.505 0 0 1 .487-.021l5 2.5a.5.5 0 0 1 0 .894M18.5 4h-17C.673 4 0 4.673 0 5.5v13c0 .827.673 1.5 1.5 1.5h17c.827 0 1.5-.673 1.5-1.5v-13c0-.827-.673-1.5-1.5-1.5"/>
+</svg>

package/assets/icons/old/twitter.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
+    <title>twitter</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="twitter" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero" id="Shape">
+            <path d="M32,30 C32,31.104 31.104,32 30,32 L2,32 C0.896,32 0,31.104 0,30 L0,2 C0,0.896 0.896,0 2,0 L30,0 C31.104,0 32,0.896 32,2 L32,30 Z" fill="#55ACEE"></path>
+            <path class="icon-hover" d="M25.987,9.894 C25.251,10.216 24.462,10.431 23.63,10.529 C24.48,10.031 25.13,9.24 25.436,8.298 C24.644,8.759 23.766,9.095 22.831,9.276 C22.083,8.491 21.017,8 19.838,8 C17.572,8 15.738,9.807 15.738,12.038 C15.738,12.352 15.774,12.663 15.842,12.96 C12.435,12.788 9.413,11.181 7.39,8.739 C7.038,9.336 6.834,10.029 6.834,10.771 C6.834,12.17 7.56,13.406 8.658,14.131 C7.987,14.109 7.354,13.928 6.802,13.625 C6.801,13.642 6.801,13.659 6.801,13.677 C6.801,15.632 8.215,17.266 10.091,17.637 C9.748,17.727 9.386,17.779 9.01,17.779 C8.746,17.779 8.49,17.755 8.24,17.707 C8.76,19.311 10.274,20.478 12.068,20.512 C10.67,21.594 8.9,22.24 6.979,22.24 C6.649,22.24 6.321,22.222 6,22.184 C7.814,23.329 9.971,23.997 12.287,23.997 C19.828,23.997 23.953,17.843 23.953,12.506 C23.953,12.333 23.948,12.156 23.941,11.985 C24.741,11.414 25.438,10.703 25.987,9.894 Z" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>

package/assets/icons/old/wn.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="0 0 50 50">
+  <defs>
+    <clipPath id="clip-Icon">
+      <rect width="50" height="50"/>
+    </clipPath>
+  </defs>
+  <g id="Icon" clip-path="url(#clip-Icon)">
+    <g id="icon2" transform="translate(-0.041 0)">
+      <path id="Контур_77" data-name="Контур 77" d="M6.493,13v8.266h6.275V19.74H8.31V17.714h4.006V16.3H8.31V14.53h4.365V13Zm7.5,0v8.266h1.7V15.732h.023l3.438,5.534h1.818V13h-1.7v5.545h-.023L15.8,13Z" fill="#fff"/>
+      <path id="Контур_76" data-name="Контур 76" d="M29.949,29.1V26.774H31.94a1.4,1.4,0,0,1,.938.272,1.1,1.1,0,0,1,.313.874,1.155,1.155,0,0,1-.313.9,1.375,1.375,0,0,1-.938.278ZM28.132,25.36v8.266h1.817V30.4h1.818a1.353,1.353,0,0,1,.984.3,1.637,1.637,0,0,1,.394.949c.046.333.079.681.1,1.042a3.2,3.2,0,0,0,.185.938h1.819a1.218,1.218,0,0,1-.191-.423,3.611,3.611,0,0,1-.093-.527c-.019-.185-.033-.367-.041-.544s-.016-.332-.023-.463a5.052,5.052,0,0,0-.087-.625,2.109,2.109,0,0,0-.2-.573,1.586,1.586,0,0,0-.359-.451,1.414,1.414,0,0,0-.556-.284v-.023a1.926,1.926,0,0,0,1-.81,2.494,2.494,0,0,0,.307-1.262,2.308,2.308,0,0,0-.165-.88,2.128,2.128,0,0,0-.486-.724,2.3,2.3,0,0,0-.764-.492,2.67,2.67,0,0,0-1-.179ZM43.506,30.5V25.36H41.689V30.5a2.065,2.065,0,0,1-.37,1.36,1.7,1.7,0,0,1-1.343.434,2.086,2.086,0,0,1-.886-.156,1.283,1.283,0,0,1-.758-.978,3.748,3.748,0,0,1-.058-.66V25.36H36.456V30.5a3.16,3.16,0,0,0,.92,2.5,3.807,3.807,0,0,0,2.6.81,3.82,3.82,0,0,0,2.593-.816,3.132,3.132,0,0,0,.937-2.492Z" fill="#fff"/>
+      <path id="Контур_80" data-name="Контур 80" d="M22.646,31.2H4.689a4.505,4.505,0,0,1-4.5-4.5V8.5A4.505,4.505,0,0,1,4.689,4h18.2a4.505,4.505,0,0,1,4.5,4.5v8.445l-.893.1a3.184,3.184,0,0,0-2.846,3.177V30.5l-.465.7ZM4.689,6a2.5,2.5,0,0,0-2.5,2.5V26.7a2.5,2.5,0,0,0,2.5,2.5H21.65V20.22a5.18,5.18,0,0,1,3.739-4.992V8.5a2.5,2.5,0,0,0-2.5-2.5Z" fill="#fff"/>
+      <path id="Контур_81" data-name="Контур 81" d="M30.127,47.884a1,1,0,0,1-1-1V43.267H26.846a5.206,5.206,0,0,1-5.2-5.2V20.222a5.206,5.206,0,0,1,5.2-5.2H44.692a5.206,5.206,0,0,1,5.2,5.2V38.068a5.206,5.206,0,0,1-5.2,5.2H35.058l-4.216,4.316A1,1,0,0,1,30.127,47.884ZM26.846,17.022a3.2,3.2,0,0,0-3.2,3.2V38.067a3.2,3.2,0,0,0,3.2,3.2h3.281a1,1,0,0,1,1,1v2.162l2.8-2.86a1,1,0,0,1,.715-.3H44.692a3.2,3.2,0,0,0,3.2-3.2V20.222a3.2,3.2,0,0,0-3.2-3.2Z" fill="#fff"/>
+    </g>
+  </g>
+</svg>

package/assets/icons/standard/01-play.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="#010101" d="M1.425.35L14.575 8l-13.15 7.65V.35z"/>
+</svg>

package/assets/icons/standard/02-pause.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#010101" d="M1.712 14.76H6.43V1.24H1.71v13.52zm7.86-13.52v13.52h4.716V1.24H9.573z"/>
+</svg>

package/assets/icons/standard/03-stop.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#010101" d="M1.712 1.24h12.6v13.52h-12.6z"/>
+</svg>

package/assets/icons/standard/04-volume.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#010101" d="M11.5 11h-.002v1.502L7.798 10H4.5V6h3.297l3.7-2.502V4.5h.003V11zM11 4.49L7.953 6.5H5v3h2.953L11 11.51V4.49z"/>
+</svg>

package/assets/icons/standard/05-mute.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#010101" d="M9.75 11.51L6.7 9.5H3.75v-3H6.7L9.75 4.49v.664l.497.498V3.498L6.547 6H3.248v4h3.296l3.7 2.502v-2.154l-.497.5v.662zm3-5.165L12.404 6l-1.655 1.653L9.093 6l-.346.345L10.402 8 8.747 9.654l.346.347 1.655-1.653L12.403 10l.348-.346L11.097 8l1.655-1.655z"/>
+</svg>

package/assets/icons/standard/06-expand.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="#010101" d="M7.156 8L4 11.156V8.5H3V13h4.5v-1H4.844L8 8.844 7.156 8zM8.5 3v1h2.657L8 7.157 8.846 8 12 4.844V7.5h1V3H8.5z"/>
+</svg>

package/assets/icons/standard/07-shrink.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="#010101" d="M13.5 3.344l-.844-.844L9.5 5.656V3h-1v4.5H13v-1h-2.656L13.5 3.344zM3 9.5h2.656L2.5 12.656l.844.844L6.5 10.344V13h1V8.5H3v1z"/>
+</svg>

package/assets/icons/standard/08-hd.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="#010101" d="M5.375 7.062H2.637V4.26H.502v7.488h2.135V8.9h2.738v2.848h2.133V4.26H5.375v2.802zm5.97-2.81h-2.84v7.496h2.798c2.65 0 4.195-1.607 4.195-3.77v-.022c0-2.162-1.523-3.704-4.154-3.704zm2.06 3.758c0 1.21-.81 1.896-2.03 1.896h-.83V6.093h.83c1.22 0 2.03.696 2.03 1.896v.02z"/>
+</svg>

package/assets/icons/standard/09-cc.svg

@@ -0,0 +1,8 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 49 41.8" style="enable-background:new 0 0 49 41.8;" xml:space="preserve">
+<path d="M47.1,0H3.2C1.6,0,0,1.2,0,2.8v31.5C0,35.9,1.6,37,3.2,37h11.9l3.2,1.9l4.7,2.7c0.9,0.5,2-0.1,2-1.1V37h22.1
+	c1.6,0,1.9-1.1,1.9-2.7V2.8C49,1.2,48.7,0,47.1,0z M7.2,18.6c0-4.8,3.5-9.3,9.9-9.3c4.8,0,7.1,2.7,7.1,2.7l-2.5,4
+	c0,0-1.7-1.7-4.2-1.7c-2.8,0-4.3,2.1-4.3,4.3c0,2.1,1.5,4.4,4.5,4.4c2.5,0,4.9-2.1,4.9-2.1l2.2,4.2c0,0-2.7,2.9-7.6,2.9
+	C10.8,27.9,7.2,23.5,7.2,18.6z M36.9,27.9c-6.4,0-9.9-4.4-9.9-9.3c0-4.8,3.5-9.3,9.9-9.3C41.7,9.3,44,12,44,12l-2.5,4
+	c0,0-1.7-1.7-4.2-1.7c-2.8,0-4.3,2.1-4.3,4.3c0,2.1,1.5,4.4,4.5,4.4c2.5,0,4.9-2.1,4.9-2.1l2.2,4.2C44.5,25,41.9,27.9,36.9,27.9z"/>
+</svg>

package/assets/icons/standard/10-reload.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+  <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/assets/level-selector/button.ejs

@@ -0,0 +1,8 @@
+<button class='gplayer-lite-btn gcore-skin-text-color gear-option'>
+    <% if (isHd) { %>
+        <span class="gear-option_hd-icon"><%= hdIcon %></span>
+    <% } %>
+    <span>Quality</span>
+    <span class="gear-option_arrow-right-icon"><%= arrowRightIcon %></span>
+    <span class='gear-option_value'><%= currentText %></span>
+</button>

package/assets/level-selector/list.ejs

@@ -0,0 +1,22 @@
+<button class="gplayer-lite-btn go-back gcore-skin-text-color">
+    <span class="arrow-left-icon"><%= arrowLeftIcon %></span>
+    Quality
+</button>
+<ul class="gear-sub-menu">
+    <% if (!removeAuto) { %>
+        <li>
+            <a href="#" class='gear-sub-menu_btn gcore-skin-text-color' data-id="-1">
+                <span class="check-icon"><%= checkIcon %></span>
+            Auto
+        </a>
+    </li>
+    <% } %>
+    <% for (const level of levels.slice().reverse()) { %>
+        <li <% if (maxLevel >= 0 && level.level > maxLevel) { %>class="level-disabled"<% } %>>
+            <a href="#" class='gear-sub-menu_btn gcore-skin-text-color' data-id="<%= level.level %>">
+                <span class="check-icon"><%= checkIcon %></span>
+                <%= labels[level.level] %>
+            </a>
+        </li>
+    <% } %>
+</ul>

package/assets/level-selector/style.scss

@@ -0,0 +1,4 @@
+.level-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}

package/assets/logo/styles/logo.scss

@@ -0,0 +1,10 @@
+.player-logo[data-logo] {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+}
+
+.clappr-logo {
+  position: absolute;
+}

package/assets/logo/templates/logo.ejs

@@ -0,0 +1,3 @@
+<div class="clappr-logo control-need-disable">
+    <img class="clappr-logo-img"/>
+</div>

package/assets/media-control/container.scss

@@ -0,0 +1,57 @@
+[data-player] {
+  --bottom-panel: 40px;
+}
+.container {
+  .media-control-notransition {
+    transition: none !important;
+  }
+
+  .player-poster[data-poster] .play-wrapper[data-poster] {
+    opacity: 1;
+  }
+
+  &.crop-video {
+    [data-html5-video] {
+      object-fit: cover;
+    }
+  }
+
+  .subtitle-string {
+    position: absolute;
+    bottom: calc(var(--bottom-panel) + 5px);
+    width: 100%;
+
+    p {
+      width: auto;
+      background-color: rgb(0 0 0 / 40%);
+      color: white;
+      display: inline-block;
+    }
+  }
+
+  .circle-poster[data-poster] {
+    top: 50%;
+    margin-top: -60px;
+    left: 50%;
+    margin-left: -60px;
+    position: absolute;
+    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;
+
+    svg {
+      margin-left: 5px;
+      width: 80px;
+      height: 80px;
+    }
+  }
+
+  .spinner-three-bounce[data-spinner] > div {
+    background-color: #ff5700;
+  }
+}

package/assets/media-control/media-control.ejs

@@ -0,0 +1,133 @@
+<div class="media-control-background" data-background></div>
+
+<div class="media-control-layer gcore-skin-bg-color" data-controls>
+    <% var renderBar = function(name) { %>
+        <div class="bar-container" data-<%= name %>>
+            <div class="bar-background" data-<%= name %>>
+                <div class="bar-fill-1" data-<%= name %>></div>
+                <div class="bar-fill-2 gcore-skin-main-color" data-<%= name %>></div>
+                <div class="bar-hover" data-<%= name %>></div>
+            </div>
+        </div>
+        <div class="bar-scrubber" data-<%= name %>>
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-<%= name %>></div>
+        </div>
+    <% }; %>
+    <% var renderSegmentedBar = function(name, segments) {
+        segments = segments || 10; %>
+    <div class="bar-container" data-<%= name %>>
+        <div class="bar-background" data-<%= name %>>
+            <div class="bar-fill-1 gcore-skin-main-color" data-<%= name %>></div>
+        </div>
+        <div class="bar-scrubber" data-<%= name %>>
+            <div class="bar-scrubber-icon gcore-skin-main-color" data-<%= name %>></div>
+        </div>
+    </div>
+    <% }; %>
+    <% var renderDrawer = function(name, renderContent) { %>
+        <div class="drawer-container" data-<%= name %>>
+            <div class="drawer-icon-container" data-<%= name %>>
+                <div class="drawer-icon media-control-icon gcore-skin-button-color" data-<%= name %>></div>
+                <span class="drawer-text" data-<%= name %>></span>
+            </div>
+            <% renderContent(name); %>
+        </div>
+    <% }; %>
+    <% var renderIndicator = function(name) { %>
+        <div class="media-control-indicator gcore-skin-text-color" data-<%= name %>></div>
+    <% }; %>
+    <% var renderBottomGear = function(name) { %>
+        <div class="media-control-bottomgear" data-<%= name %>></div>
+    <% }; %>
+    <% var renderPIP = function(name) { %>
+        <div class="media-control-pip" data-<%= name %>></div>
+    <% }; %>
+    <% var renderQuality = function(name) { %>
+        <div class="media-control-quality" data-<%= name %>></div>
+    <% }; %>
+    <% var renderNerd = function(name) { %>
+        <div class="media-control-nerd" data-<%= name %>></div>
+    <% }; %>
+    <% var renderAudioTracks = function(name) { %>
+        <div class="media-control-audio-tracks" data-<%= name %>></div>
+    <% }; %>
+    <% var renderSubtitles = function(name) { %>
+        <div class="media-control-subtitles" data-<%= name %>></div>
+    <% }; %>
+    <% var renderMultiCamera = function(name) { %>
+        <div class="media-control-multicamera" data-<%= name %>></div>
+    <% }; %>
+    <% var renderClipsText = function(name) { %>
+
+        <div class="media-clip-container gcore-skin-text-color" data-<%= name %>>
+            <div class="media-clip-point gcore-skin-text-color" data-<%= name %>>•</div>
+            <div class="media-clip-text gcore-skin-text-color" data-<%= name %>></div>
+        </div>
+    <% }; %>
+    <% var renderPlaybackRate = function(name) { %>
+        <div class="media-control-playbackrate" data-<%= name %>></div>
+    <% }; %>
+    <% var renderVR = function(name) { %>
+        <div class="media-control-vr" data-<%= name %>></div>
+    <% }; %>
+    <% var renderButton = function(name) { %>
+        <button type="button" class="media-control-button media-control-icon gcore-skin-button-color" data-<%= name %>
+                aria-label="<%= name %>"></button>
+    <% }; %>
+
+    <% var templates = {
+        bar: renderBar,
+        segmentedBar: renderSegmentedBar,
+    };
+    var render = function (settingsList) {
+        settingsList.forEach(function (setting) {
+
+            if (setting === "seekbar") {
+                renderBar(setting);
+            } else if (setting === "volume") {
+                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {
+                    return renderSegmentedBar(name);
+                });
+            } else if (setting === "duration" || setting === "position") {
+                renderIndicator(setting);
+            } else if (setting === "quality") {
+                renderQuality(setting)
+            } else if (setting === "bottomgear") {
+                renderBottomGear(setting)
+            } else if (setting === "pip") {
+                renderPIP(setting)
+            } else if (setting === "nerd") {
+                renderNerd(setting)
+            } else if (setting === "multicamera") {
+                renderMultiCamera(setting)
+            } else if (setting === "subtitles") {
+                renderSubtitles(setting)
+            } else if (setting === "playbackrate") {
+                renderPlaybackRate(setting)
+            } else if (setting === "vr") {
+                renderVR(setting)
+            } else if (setting === "clipsText") {
+                renderClipsText(setting)
+            } else if (setting === "audiotracks") {
+                renderAudioTracks(setting)
+            } else {
+                renderButton(setting);
+            }
+        });
+    }; %>
+    <% if (settings.default && settings.default.length) { %>
+        <div class="media-control-center-panel" data-media-control>
+            <% render(settings.default); %>
+        </div>
+    <% } %>
+    <% if (settings.left && settings.left.length) { %>
+        <div class="media-control-left-panel" data-media-control>
+            <% render(settings.left); %>
+        </div>
+    <% } %>
+    <% if (settings.right && settings.right.length) { %>
+        <div class="media-control-right-panel" data-media-control>
+            <% render(settings.right); %>
+        </div>
+    <% } %>
+</div>