diff --git a/src/components/watch/WatchHighlights.vue b/src/components/watch/WatchHighlights.vue index c2489cbb9..f55c21d86 100644 --- a/src/components/watch/WatchHighlights.vue +++ b/src/components/watch/WatchHighlights.vue @@ -113,7 +113,6 @@ export default { computed: { buckets() { const TIME_THRESHOLD = 40; - const MIN_BUCKET_SIZE = 1; const MIN_TIMESTAMP_OCCURENCE = 1; const VIDEO_START_TIMESTAMP = +new Date( this.video.start_actual || this.video.available_at, @@ -134,81 +133,73 @@ export default { parsed.sort((a, b) => a.time - b.time); const buckets = []; - let currentBucket = 0; let subBucket: ParsedComment[] = []; parsed.forEach((comment, index) => { - // put into curent subbucket if time is within 10 secs + subBucket.push(comment); + // go to next comment if it's within the threshold (saving in the same bucket) if ( - comment.time - currentBucket <= TIME_THRESHOLD - && index !== parsed.length - 1 + index !== parsed.length - 1 + && parsed[index + 1].time - comment.time <= TIME_THRESHOLD ) { - subBucket.push(comment); return; } - if (comment.time - currentBucket <= TIME_THRESHOLD) { - subBucket.push(comment); - } /** * Process the bucket */ - if (subBucket.length >= MIN_BUCKET_SIZE) { - // select floor median has the display time - const th = Math.floor(subBucket.length / 3); - const median = subBucket[th].time; - // Find matching song around timestamp - const matchingSong = this.video?.songs?.find( - (song) => Math.abs(song.start - median) <= TIME_THRESHOLD, - ); - if (!matchingSong) { - // pick best comment to show - const processed = subBucket - .sort( - (a, b) => b.occurence / b.text.length - a.occurence / a.text.length, - ) // prioritize chapter comment - .map((s) => s.text) // ParsedComment -> string - .map(removePunctuations) // remove punctuations - .map(removeStopWords) // remove stop words - .map((c) => c.trim()) // strip white spaces - .filter((c) => c.length > 1); // filter out clutter + // select floor median has the display time + const th = Math.floor(subBucket.length / 3); + const median = subBucket[th].time; + // Find matching song around timestamp + const matchingSong = this.video?.songs?.find( + (song) => Math.abs(song.start - median) <= TIME_THRESHOLD, + ); + if (!matchingSong) { + // pick best comment to show + const processed = subBucket + .sort( + (a, b) => b.occurence / b.text.length - a.occurence / a.text.length, + ) // prioritize chapter comment + .map((s) => s.text) // ParsedComment -> string + .map(removePunctuations) // remove punctuations + .map(removeStopWords) // remove stop words + .map((c) => c.trim()) // strip white spaces + .filter((c) => c.length > 1); // filter out clutter - if (processed.length > 0) { - let best = processed[0]; + if (processed.length > 0) { + let best = processed[0]; - const stricter = processed - .filter(filterByWordCount(2)) - .filter((c) => !/(?:clip\s?(?:it|this)|[!?]{3})/i.test(c)); - // console.log(stricter); - if (stricter.length > 0) [best] = stricter; + const stricter = processed + .filter(filterByWordCount(2)) + .filter((c) => !/(?:clip\s?(?:it|this)|[!?]{3})/i.test(c)); + // console.log(stricter); + if (stricter.length > 0) [best] = stricter; - if (best.length > 60) best = `${best.slice(0, 60)}...`; + if (best.length > 60) best = `${best.slice(0, 60)}...`; - const medianMS = median * 1000; - const absolute = new Date( - VIDEO_START_TIMESTAMP + medianMS, - ).toISOString(); - // console.log(best, processed); - buckets.push({ - time: median, - count: subBucket.length, - best, - display: formatDuration(medianMS), - absolute, - }); - } + const medianMS = median * 1000; + const absolute = new Date( + VIDEO_START_TIMESTAMP + medianMS, + ).toISOString(); + // console.log(best, processed); + buckets.push({ + time: median, + count: subBucket.length, + best, + display: formatDuration(medianMS), + absolute, + }); } } // clear and set a new bucket - currentBucket = comment.time; subBucket = []; - subBucket.push(comment); }); // Render song item instead of text buckets.push( ...(this.video.songs?.map((song) => ({ time: song.start, - count: subBucket.length, + count: 1, song: { ...song, channel: this.video.channel,