Adding the missing details on the Teachable course page

README.md

Teachables course page has a few key things missing and this small snippet is my attempt to fix that 🤞

---

MOVED: This has been published as a chrome extension. Please head to the official repo to use it and contribute.

---

1. The total amount of time a particular section would take. It only exposes the time a chapter would take. As a student I would want this to better plan ahead.
   

2. [coming soon] When I'm playing things at 2x speed, why not show me the times a lecture would take at this speed 🤯

---

(Shoutout to the amazing Adrian Cantrill)

adding-missing-timestamps.png

timestamps-app.js

$(".custom_duration.cumulative").remove();
function pretify_seconds(duration) {
    let hrs = ~~(duration / 3600),
    	mins = ~~((duration % 3600) / 60),
    	secs = ~~duration % 60,
    	ret = "";
    
    if (hrs > 0) {
        ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
    }
    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
    ret += "" + secs;
    return ret;
}

$(".course-sidebar .row.lecture-sidebar .course-section").each(function(idx, el_course_section) {
    let video_durations = [],
    	total_seconds = 0;
    
    $(el_course_section).find(".lecture-name").each(function(idx, el_lecture){
        if (!$(el_lecture).text().trim().match(/\((.*?)\)$/))
            return
    	
        let duration = $(el_lecture).text().trim().match(/\((.*?)\)$/)[1],
    		duration_split = duration.split(":"),
    		lecture_seconds = (parseInt(duration_split[0]) * 60) + parseInt(duration_split[1]);  

        video_durations.push(duration);
        total_seconds += lecture_seconds;
  
  		$(el_lecture).append(`<span class="custom_duration cumulative">[${pretify_seconds(total_seconds)}]</span>`);
    });
    
    $(el_course_section).find(".section-title").append(`<span class="custom_duration cumulative">[${pretify_seconds(total_seconds)}]</span>`);
})