Merge pull request #34 from Joehuu/toggle-seconds

Add toggle for seconds

Author: OriginalCube

src/Main.jsx

@@ -27,6 +27,7 @@ const Main = () => {
   const [titleDisplay, setTitleDisplay] = React.useState(TitleDisplay.English);
   const [lyricsDisplay, setLyricsDisplay] = React.useState(LyricsDisplay.Original);
   const [use24HourClock, set24HourClock] = React.useState(true);
+  const [showSeconds, setShowSeconds] = React.useState(true);
   const audioRef = React.useRef(new Audio());
 
   const playerHandler = () => {
@@ -252,6 +253,7 @@ const Main = () => {
         if (properties.titledisplay) setTitleDisplay(properties.titledisplay.value)
         if (properties.lyricsdisplay) setLyricsDisplay(properties.lyricsdisplay.value)
         if (properties.use24hourclock) set24HourClock(properties.use24hourclock.value)
+        if (properties.showseconds) setShowSeconds(properties.showseconds.value)
       },
       setPaused: function (isPaused) {
         setWPEPaused(isPaused);
@@ -306,6 +308,7 @@ const Main = () => {
           textShadow={SongData[songIndex].clockTextShadow}
           textSize={textSize}
           use24HourClock={use24HourClock}
+          showSeconds={showSeconds}
         />
       ) : null}
       {player === "true" ? (

src/components/Clock.jsx

@@ -46,15 +46,15 @@ const Clock = (props) => {
       }}
     >
       {(props.use24HourClock ? hour : (hour === 0 || hour === 12 ? "12" : hour % 12)) + ":"}
-      {minute > 9 ? minute : "0" + minute}
+      {minute.toString().padStart(2, "0")}
       <span
         className={`absolute bottom-[2.5vh]`}
         style={{
           fontSize: `${secondSize * props.textSize}rem`,
           color: `white`,
         }}
       >
-        {second > 9 ? second : "0" + second}
+        {props.showSeconds ? second.toString().padStart(2, "0") : ""}
       </span>
       <span
         className={`absolute top-[5vh]`}