Merge pull request #309 from bgildson/issue307

Something like `62 days 12:34:55` might look a bit funny, but I don't a lot of folks will be seeing multiple-day streams anyway. But this works for me, thanks for doing this @bgildson !


changed duration format to also represent days

webroot/js/app.js

@@ -8,7 +8,7 @@ import UsernameForm from './components/chat/username.js';
 import VideoPoster from './components/video-poster.js';
 import Chat from './components/chat/chat.js';
 import Websocket from './utils/websocket.js';
-import { secondsToHMMSS, hasTouchScreen, getOrientation } from './utils/helpers.js';
+import { parseSecondsToDurationString, hasTouchScreen, getOrientation } from './utils/helpers.js';
 
 import {
   addNewlines,
@@ -269,7 +269,7 @@ export default class App extends Component {
     let streamDurationString = '';
     if (this.state.lastConnectTime) {
       const diff = (Date.now() - Date.parse(this.state.lastConnectTime)) / 1000;
-      streamDurationString = secondsToHMMSS(diff);
+      streamDurationString = parseSecondsToDurationString(diff);
     }
     this.setState({
       streamStatusMessage: `${MESSAGE_ONLINE} ${streamDurationString}`,

webroot/js/utils/helpers.js

@@ -96,19 +96,26 @@ export function generateUsername() {
   return `User ${(Math.floor(Math.random() * 42) + 1)}`;
 }
 
-export function secondsToHMMSS(seconds = 0) {
+export function padLeft(text, pad, size) {
+  return String(pad.repeat(size) + text).slice(-size);
+}
+
+export function parseSecondsToDurationString(seconds = 0) {
   const finiteSeconds = Number.isFinite(+seconds) ? Math.abs(seconds) : 0;
 
-  const hours = Math.floor(finiteSeconds / 3600);
-  const hoursString = hours ? `${hours}:` : '';
+  const days = Math.floor(finiteSeconds / 86400);
+  const daysString = days > 0 ? `${days} day${days > 1 ? 's' : ''} ` : '';
+
+  const hours = Math.floor((finiteSeconds / 3600) % 24);
+  const hoursString = hours || days ? padLeft(`${hours}:`, '0', 3) : '';
 
   const mins = Math.floor((finiteSeconds / 60) % 60);
-  const minString = mins < 10 ? `0${mins}:` : `${mins}:`;
+  const minString = padLeft(`${mins}:`, '0', 3);
 
   const secs = Math.floor(finiteSeconds % 60);
-  const secsString = secs < 10 ? `0${secs}` : `${secs}`;
+  const secsString = padLeft(`${secs}`, '0', 2);
 
-  return hoursString + minString + secsString;
+  return daysString + hoursString + minString + secsString;
 }
 
 export function setVHvar() {