From 1fb6d771b9cd52b0a90ab66fd307f393211e884d Mon Sep 17 00:00:00 2001
From: DmitrySychugov <dmitry.s.develop@mail.ru>
Date: Thu, 29 Dec 2022 20:57:13 +0500
Subject: [PATCH] Web: Components: fixed console key error, fixed NaN in
 duration

---
 packages/components/viewer/sub-components/viewer-base.js   | 2 +-
 packages/components/viewer/sub-components/viewer-player.js | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/components/viewer/sub-components/viewer-base.js b/packages/components/viewer/sub-components/viewer-base.js
index d4c99acde6..4f7c5bfca2 100644
--- a/packages/components/viewer/sub-components/viewer-base.js
+++ b/packages/components/viewer/sub-components/viewer-base.js
@@ -639,7 +639,7 @@ const ViewerBase = (props) => {
         container={props.container}
       />
       {props.noFooter ||
-        (!isMobileOnly && (
+        (!isMobileOnly && props.displayUI && (
           <div className={`${prefixCls}-container`}>
             <div
               className={`${prefixCls}-footer`}
diff --git a/packages/components/viewer/sub-components/viewer-player.js b/packages/components/viewer/sub-components/viewer-player.js
index 1fdcb2fc7a..6c46a3a158 100644
--- a/packages/components/viewer/sub-components/viewer-player.js
+++ b/packages/components/viewer/sub-components/viewer-player.js
@@ -279,6 +279,7 @@ const StyledVideoControls = styled.div`
 
 const getDuration = (time) => {
   const timestamp = Math.floor(time);
+  if (isNaN(timestamp)) return "00:00";
 
   const hours = Math.floor(timestamp / 60 / 60);
   const minutes = Math.floor(timestamp / 60) - hours * 60;
@@ -512,6 +513,7 @@ export default function ViewerPlayer(props) {
     const speed = ["X0.5", "X1", "X1.5", "X2"];
     const items = speed.map((speed, index) => (
       <div
+        key={index}
         className="dropdown-item"
         onClick={() => {
           dispatch(
@@ -789,7 +791,9 @@ translateX(${state.left !== null ? state.left + "px" : "auto"}) translateY(${
                   {!state.isPlaying ? <IconPlay /> : <IconStop />}
                 </div>
 
-                <StyledDuration>{state.duration}</StyledDuration>
+                <StyledDuration>
+                  {state.duration && state.duration}
+                </StyledDuration>
 
                 {!isMobileOnly && (
                   <div className="volume-container">