InnovationLab/public/js/captureFollow.js

import getParams from './getParams.js';

captureFollow = function () {
	//private menbers
	const dataUrl = "./json/kolData.json";
	const kolMan = ['Yang', 'Hao', 'Drangadrang', 'Cookingdairy', 'Ku', 'Betty', 'Ralf', 'Chefchouchou', 'Albee', 'commute_Chang', 'commute_Li', 'commute_He', 'ordinary']
	let kolName;
	let recipeData;
	let voiceData;
	let $ul = $("<ul></ul>");
	let $captureContainer = $(".recipe__list");
	let $ingredientContainer = $(".recipe__basket");
	const audio = document.querySelector('audio');
	let captureData = []; //
	let lineNo = 0; // 當前字幕
	let preLine = 0; // 當播放6行後開始滾動歌詞
	let lineHeight = 30; // 每次滾動的距離
	let preLineNo = null; //上一個當前字幕
	let prehighLine = null; // 上一個highlight的字幕
	let ingredientW = (95+15); //食材圖片寬度加margin-left

	//private methods
	function init() {

		console.log('captureFollow is loaded.');
		// 取得是哪位Kol
		if (getParams('kol') != null && kolMan.includes(getParams('kol'))) {
			kolName = getParams('kol')
		} else {
			kolName = 'Ralf' // 預設kol;
		}
		// console.log(kolName)

		fetch(dataUrl)
			.then(res=>res.json())
			.then(data=>{
				let getRecipe = data.filter(item=>item.kol.id == kolName
				);
				recipeData = getRecipe[0];
				console.log(recipeData)
				$("audio").attr("src","./audio/"+recipeData.voice.source)
				voiceData=recipeData.voice.subtitle;
				// console.log(voiceData)
				showLyric();
				audioEvent();
			});		

	}

	function audioEvent(){
		// 當 currentTime 更新時會觸發 timeupdate 事件
		audio.addEventListener("timeupdate",function(){
			let curT = audio.currentTime;
			// console.log(curT);
			if(curT>0) {
				let x = getLineNo(curT);
				// console.log(x);
				lineNo = x;
				focusIngredient();
				highLight();
				if (lineNo < (captureData.length - 1)) {
					lineNo++
				}
			}
			
		});

		audio.addEventListener("ended",function(){
			goback();
		})
	}

	// 把生成的HTML顯示到介面上
	function createHtml(){
		let  ingredientData = recipeData.ingredient;

		// 字幕DOM
		for(let i=0;i<captureData.length;i++){
			let $li = $("<li></li>").html(captureData[i].capture);
			$ul.append($li);
		}
		$captureContainer.append($ul);
		// console.log(captureData.ms.length)

		// 食材DOM
		for(let i=0;i<ingredientData.length;i++){
			$ingredientContainer.append(`
				<a href="${ingredientData[i].salepage_url}" class="recipe__ingredient" data-ingredientid="${ingredientData[i].ingredient_id}">
					<img src="https://d1xzlli46wohoc.cloudfront.net/images/recipePage/${ingredientData[i].ingredient_img}" alt="">
				</a>
			`);
			if(ingredientData[i].salepage_url == null) {
				$('.recipe__ingredient[data-ingredientid="'+ingredientData[i].ingredient_id+'"]').removeAttr("href");
			}
			// console.log(`${ingredientData[i].ingredient_img}`)
		}
		$ingredientContainer.width((ingredientData.length*ingredientW)+5);
		
		
	}

	// 解析介面上的lrc數據
	function getCapturDetail(){
		for (let i=0; i<voiceData.length; i++) {
			// match()返回指定的值
			let txt = voiceData[i].text
			let times = voiceData[i].timecode;
			let ingredient = voiceData[i].ingredient_id;
			// console.log(voiceData.length)

			let secondTime = times.split(":");
			// console.log(times.length)
			// parseFloat() 將字串轉換為以十進位表示的浮點數
			captureData.push({
				time: (parseInt(secondTime[0]) * 60 + parseFloat(secondTime[1])).toFixed(3),
				capture: txt,
				ingredient: ingredient
				// 找出一個字串在另一個字串中最後出現的位置
				// str.substr(start [, length])
			})
		}
		// console.log(captureData);
		// 時間排序
		captureData.sort(function(a,b){
			return a.time - b.time
		});
		console.log(captureData)
	}

	async function showLyric(){
		const datail1 = await getCapturDetail();
		const detail2 = await createHtml();
		// const detail3 = await highLight();
	}

	// 讓歌詞跟隨音檔播放
	function highLight(){
		let $li = $captureContainer.find("li");
		// console.log(lineNo)
		lineHeight = $li.eq(lineNo).position().top;
		$li.eq(lineNo).addClass("active").siblings().removeClass("active");
		if (lineNo >= 0) {
			if (prehighLine == null) {
				$captureContainer.stop(true, true).animate({ scrollTop: lineHeight })
				prehighLine = lineNo;
				// console.log("lineHeight: " + lineHeight)
			}
			else if (prehighLine != lineNo) {
				$captureContainer.stop(true, true).animate({ scrollTop: lineHeight })
				prehighLine = lineNo;
				// console.log("lineHeight: " + lineHeight)
			}
		}		
	}

	// 食材隨音檔發亮
	function focusIngredient(){
		$(".recipe__ingredient").removeClass("active");
		if(lineNo>=0){
			// 字幕指定的食材
			let focusId = captureData[lineNo].ingredient
			// console.log("focusId.length: " + focusId.length)
			
			if(focusId.length>0){
				// 指定食材添加 active
				for(let i=0; i<focusId.length; i++){
					$(".recipe__ingredient[data-ingredientid="+focusId[i]+"]").addClass("active");
					// console.log("focusId[i]: "+focusId[i])
				}

				
				if(preLineNo == null) {
					let offsetLeft = $(".recipe__ingredient[data-ingredientid=" + focusId[0] + "]").position().left;
					preLineNo = lineNo;
					$(".recipe__outer-ingredients").scrollLeft(offsetLeft);
				}else if(preLineNo != lineNo) {	
					let offsetLeft = $(".recipe__ingredient[data-ingredientid=" + focusId[0] + "]").position().left;				
					preLineNo = lineNo
					$(".recipe__outer-ingredients").scrollLeft(offsetLeft);
					// console.log("offsetLeft: " + offsetLeft)
					// console.log("focusId[0]: " + focusId[0])
				}else {

				}
			}else {
				// $(".recipe__outer").scrollLeft(0);
			}

		}
	}

	// 當快進或倒退的時候，找到最近的後面那個captureData.ms[i].t
	function getLineNo(ct){
		// console.log(parseFloat(lineNo))
		// console.log(parseFloat(captureData[lineNo].time))
		if(ct>=parseFloat(captureData[lineNo].time)) {
			// 快進
			for(let i=captureData.length - 1; i>=lineNo; i--) {
				if(ct>=parseFloat(captureData[i].time)) {
					// console.log("大於")
					return i;
				}
			}
			
		}else if(ct === 0){
			// console.log('ct=0')
			return 1;
		}
		else {
			// 後退
			for(let i=0;i<=lineNo; i++) {
				if(ct <= parseFloat(captureData[i].time)) {
					// console.log("小於")
					return i-1
				}
			}
		}
	}

	// 回到字幕最前面
	function goback(){
		lineNo = 0;
		// $ul.animate({top: 0});
		$captureContainer.animate({ scrollTop: 0 });
		// highLight();

		$(".recipe__outer-ingredients").scrollLeft(0);
		$(".recipe__ingredient").removeClass("active");
	}

	{
		$(document).ready(function () {
			init();
		});
	}

	//public
	return {
		intoPage: function(){
			intoPage();
		},
	};
};

var captureFollow = new captureFollow();