V4.12.0 hot fixes

web/js/components/timeline/kiosk-timestamp.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import util from '../../util/util';
+import { MONTH_STRING_ARRAY } from '../../modules/date/constants';
 
 /**
  * getIsDaylightSavingsTime()
@@ -13,7 +15,7 @@ function getIsDaylightSavingsTime() {
   return isDaylightSavingTime;
 }
 
-function KioskTimeStamp({ date, subdaily }) {
+function KioskTimeStamp({ date, subdaily, isKioskModeActive }) {
   const options = {
     year: 'numeric',
     month: 'long',
@@ -28,10 +30,21 @@ function KioskTimeStamp({ date, subdaily }) {
   const formatter = new Intl.DateTimeFormat('en-US', options);
   const dateParts = formatter.formatToParts(date);
 
-  const year = dateParts.find((part) => part.type === 'year').value;
-  const month = dateParts.find((part) => part.type === 'month').value.slice(0, 3);
-  const day = dateParts.find((part) => part.type === 'day').value;
-  const hours = dateParts.find((part) => part.type === 'hour').value;
+  const kioskYear = dateParts.find((part) => part.type === 'year').value;
+  const kioskMonth = dateParts.find((part) => part.type === 'month').value.slice(0, 3);
+  const kioskDay = dateParts.find((part) => part.type === 'day').value;
+  const kioskHour = dateParts.find((part) => part.type === 'hour').value;
+
+  const dfYear = date.getUTCFullYear();
+  const dfMonth = MONTH_STRING_ARRAY[date.getUTCMonth()];
+  const dfDay = util.pad(date.getUTCDate(), 2, '0');
+  const dfHour = util.pad(date.getUTCHours(), 2, '0');
+
+  const year = isKioskModeActive ? kioskYear : dfYear;
+  const month = isKioskModeActive ? kioskMonth : dfMonth;
+  const day = isKioskModeActive ? kioskDay : dfDay;
+  const hour = isKioskModeActive ? kioskHour : dfHour;
+
   const minutes = dateParts.find((part) => part.type === 'minute').value;
   const timeZoneLabel = isDaylightSavingsTime ? 'EDT' : 'EST';
 
@@ -50,7 +63,7 @@ function KioskTimeStamp({ date, subdaily }) {
       {subdaily && (
         <>
           <div className="kiosk-hours">
-            {hours}
+            {hour}
           </div>
           <div className="kiosk-colon">
             :
@@ -75,6 +88,7 @@ function KioskTimeStamp({ date, subdaily }) {
 
 KioskTimeStamp.propTypes = {
   date: PropTypes.object,
+  isKioskModeActive: PropTypes.bool,
   subdaily: PropTypes.bool,
 };
 

web/js/containers/animation-widget/animation-widget.js

@@ -259,6 +259,7 @@ function AnimationWidget (props) {
       }
       {isCollapsed ? (
         <CollapsedAnimationWidget
+          isDistractionFreeModeActive={isDistractionFreeModeActive}
           hasSubdailyLayers={hasSubdailyLayers}
           isMobile={isMobile}
           isPlaying={isPlaying}

web/js/containers/animation-widget/collapsed-animation-widget.js

@@ -10,6 +10,7 @@ function CollapsedAnimationWidget (props) {
     collapsedWidgetPosition,
     handleDragStart,
     hasSubdailyLayers,
+    isDistractionFreeModeActive,
     isLandscape,
     isMobile,
     isMobilePhone,
@@ -34,7 +35,9 @@ function CollapsedAnimationWidget (props) {
   const subdailyID = hasSubdailyLayers ? '-subdaily' : '';
 
   const getWidgetIDs = () => {
-    if ((isMobilePhone && isPortrait) || (!isMobileTablet && screenWidth < 670 && hasSubdailyLayers) || (!isMobileTablet && screenWidth < 575 && !hasSubdailyLayers)) {
+    if (isDistractionFreeModeActive && screenWidth < 670 && isPortrait) {
+      return '-phone-portrait-distraction-free';
+    } if ((isMobilePhone && isPortrait) || (!isMobileTablet && screenWidth < 670 && hasSubdailyLayers) || (!isMobileTablet && screenWidth < 575 && !hasSubdailyLayers)) {
       return `-phone-portrait${subdailyID}`;
     } if (isMobilePhone && isLandscape) {
       return `-phone-landscape${subdailyID}`;

web/js/containers/sidebar/footer-content.js

@@ -82,10 +82,12 @@ const FooterContent = React.forwardRef((props, ref) => {
           selected={compareMode}
           onclick={changeCompareMode}
         />
+        {isChartingActive && (
         <ChartingModeOptions
           isChartingActive={isChartingActive}
           isMobile={isMobile}
         />
+        )}
       </div>
       <div className="product-buttons">
         {!isChartingActive

web/js/containers/sidebar/sidebar.js

@@ -300,7 +300,7 @@ class Sidebar extends React.Component {
       position: 'static',
     } : null;
 
-    const productsHolderStyle = isDistractionFreeModeActive ? {
+    const productsHolderStyle = isDistractionFreeModeActive && !isMobile ? {
       display: 'none',
     } : !isDistractionFreeModeActive && isMobile && !isEmbedModeActive ? {
       cssFloat: 'left',

web/js/containers/timeline/timeline.js

@@ -1366,7 +1366,7 @@ class Timeline extends React.Component {
                   { marginRight: isTimelineHidden ? '20px' : '0' }
                 }
               >
-                <KioskTimeStamp date={selectedDate} subdaily={hasSubdailyLayers} />
+                <KioskTimeStamp date={selectedDate} subdaily={hasSubdailyLayers} isKioskModeActive={isKioskModeActive} />
               </div>
             </section>
           </ErrorBoundary>

web/scss/features/anim-widget.scss

@@ -8,6 +8,11 @@
   left: 190px;
 }
 
+#collapsed-animate-widget-phone-portrait-distraction-free {
+  bottom: 20px;
+  left: 300px;
+}
+
 #collapsed-animate-widget-phone-portrait-subdaily {
   bottom: 75px;
   left: 210px;
@@ -530,7 +535,7 @@ a .wv-animation-widget-icon {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-left: 40px;
+
 
         & .mobile-date-picker-select-btn-text {
           display: flex;