diff --git a/src/components/ContentTabItem/ContentTabChild.js b/src/components/ContentTabItem/ContentTabChild.js index 12d20549d835f7fa579fd7b71ba66fb1641af87f..e6377203ea9239aab3a8dbb02fa135073ab06c83 100644 --- a/src/components/ContentTabItem/ContentTabChild.js +++ b/src/components/ContentTabItem/ContentTabChild.js @@ -22,17 +22,38 @@ const ContentTabChild = ({ videoName, duration, sectionName -}) => ( - <Container - onClick={() => changeVideo(`${sectionName} | ${videoName}`, videoFile)} - > - <Typography style={{ paddingLeft: "0.5rem" }}> - {number}. {videoName} |{" "} - <span style={{ fontSize: "0.75em" }}>{duration} seconds</span> - </Typography> - </Container> -); +}) => { + const getDuration = duration => { + if (!duration) return ""; + let result = ""; + + // set detik + let temp = duration; + if (temp % 60) result = `${temp % 60} detik`; + if (temp < 60) return result; + + // set menit + temp = Math.floor(temp / 60); + if (temp % 60) result = `${temp % 60} menit ${result}`; + if (temp < 60) return result; + + // set jam + temp = Math.floor(temp / 60); + result = `${temp % 60} jam ${result}`; + return result; + }; + return ( + <Container + onClick={() => changeVideo(`${sectionName} | ${videoName}`, videoFile)} + > + <Typography style={{ paddingLeft: "0.5rem" }}> + {number}. {videoName} |{" "} + <span style={{ fontSize: "0.75em" }}>{getDuration(duration)}</span> + </Typography> + </Container> + ); +}; ContentTabChild.propTypes = { name: PropTypes.string };