@outbook/webcomponents-player-timeline 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outbook/webcomponents-player-timeline",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "player-timeline.js",
   "type": "module",
   "private": false,

package/player-timeline.js

@@ -177,43 +177,52 @@ function ComponentPlayerTimeline(element) {
               ></div>
             `;
           })}
-          <div
-            class="player-timeline__completed"
-            style="width:${isDragging ? progressVisible : progress}%;"
-          >
-            <div class="player-timeline__thumb"></div>
-          </div>
+          ${totalTime > 0
+            ? html`
+                <div
+                  class="player-timeline__completed"
+                  style="width:${isDragging ? progressVisible : progress}%;"
+                >
+                  <div class="player-timeline__thumb"></div>
+                </div>
+              `
+            : nothing}
         </div>
-        <div
-          class="player-timeline__track-real"
-          @click="${handleTimeline}"
-          @keydown="${handleTimeline}"
-          @mousemove="${handleThumbMouseMove}"
-          @touchmove="${ifDefined(
-            isTouch() ? handleThumbTouchMove : undefined
-          )}"
-          @mouseout="${handleTimelineOut}"
-          @mousedown="${handleThumbMouseDown}"
-          @touchstart="${ifDefined(
-            isTouch() ? handleThumbMouseDown : undefined
-          )}"
-          @mouseup="${handleThumbMouseUp}"
-          @touchend="${ifDefined(isTouch() ? handleThumbTouchEnd : undefined)}"
-          aria-valuemin="0"
-          aria-valuemax="100"
-          aria-valuenow="${progress}"
-          aria-valuetext="${a11yTime({ time: currentTime, literals })}"
-          role="slider"
-          tabindex="0"
-        ></div>
+        ${totalTime > 0
+          ? html`
+              <div
+                class="player-timeline__track-real"
+                @click="${handleTimeline}"
+                @keydown="${handleTimeline}"
+                @mousemove="${handleThumbMouseMove}"
+                @touchmove="${ifDefined(
+                  isTouch() ? handleThumbTouchMove : undefined
+                )}"
+                @mouseout="${handleTimelineOut}"
+                @mousedown="${handleThumbMouseDown}"
+                @touchstart="${ifDefined(
+                  isTouch() ? handleThumbMouseDown : undefined
+                )}"
+                @mouseup="${handleThumbMouseUp}"
+                @touchend="${ifDefined(
+                  isTouch() ? handleThumbTouchEnd : undefined
+                )}"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                aria-valuenow="${progress}"
+                aria-valuetext="${a11yTime({ time: currentTime, literals })}"
+                role="slider"
+                tabindex="0"
+              ></div>
+            `
+          : nothing}
       </div>
       <div class="player-timeline__numbers">
         <div>${formatTime(currentTime)}</div>
         <div>${formatTime(totalTime)}</div>
       </div>
-      ${timePosition === null
-        ? nothing
-        : html`
+      ${timePosition && totalTime > 0
+        ? html`
             <div
               class="player-timeline__tooltip"
               style="--timeline-tooltip-position: ${timePosition.left}px;"
@@ -231,7 +240,8 @@ function ComponentPlayerTimeline(element) {
                 </span>
               </div>
             </div>
-          `}
+          `
+        : nothing}
     </div>
   `;
 }