const data = [
{
"id": "0",
"name": "凡笙弦語",
"intro": "台灣新人Vtuber鹹魚翻身後依然是條鹹魚以歌唱與歌曲創作為主!",
"img": "https://i.imgur.com/1Oahh38.jpg",
"style": ["可愛"],
"tags": ["#FS鹹魚", "#魚塭", "#TWVtuber" ],
"contact": "",
"follow": "",
"mp4": null
},
{
"id": "1",
"name": "小烏龜-Yui",
"intro": "lorem",
"img": "https://i.imgur.com/iHtiCpP.jpg",
"style": ["可愛"],
"tags": ["#小烏龜yui"],
"contact": "",
"follow": "",
"mp4": null
},
{
"id": "2",
"name": "柚餓幽窮",
"intro": "lorem",
"img": "https://i.imgur.com/g00i7Ji.jpg",
"style": ["奶兇"],
"tags": [],
"contact": "",
"follow": "",
"mp4": null
},
{
"id": "3",
"name": "花御いしき",
"intro": "lorem",
"img": "https://i.imgur.com/e0Nl0FW.png",
"style": ["溫柔可愛", "人格分裂", "配音系"],
"tags": ["#擴散希望", "#男vtuber", " #虛擬youtuber", "#新人VTuber"],
"contact": "",
"follow": "",
"mp4": "https://www.mboxdrive.com/%E8%81%B2%E9%9F%B3%E7%9B%92%E5%AD%901%20-%20ishiki%20hanao.mp4"
},
{
"id": "4",
"name": "Ikusen(小千)",
"intro": "lorem",
"img": "https://i.imgur.com/GXHDTcd.png",
"style": ["御姊"],
"tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
"contact": "",
"follow": "",
"mp4": null
},
{
"id": "5",
"name": "迷途小喵",
"intro": "lorem",
"img": "https://i.imgur.com/YnSPyv7.jpg",
"style": ["御姊", "多聲線"],
"tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
"contact": "",
"follow": "",
"mp4": null
},
{
"id": "6",
"name": "左翌設計 ZoeL Design",
"intro": "lorem",
"img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg",
"style": ["御姊", "多聲線"],
"tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
"contact": "",
"follow": "",
"mp4": null
},
];
function getVtuber() {
if(window.location.pathname.match('vtuber')) {
console.log('vtuber list');
let result = [...data];
console.log(result);
let str = '';
for(let i = 0; i < result.length; i++){
let style = '';
for(let j = 0; j < result[i].style.length; j++){
style += `${result[i].style[j]}`;
console.log(result[i].style.length);
}
str += `
${result[i].name}
${style}
`;
}
$('.vt-list .vt-content').html(str);
$('.vt-content .card-link').click(function(){
const music = document.querySelector('.modal-body-sample audio');
const progressBar = document.querySelector('#progress-bar');
const progressZone = document.querySelector('.music-progress');
let selected = result.filter(item =>
item.id == $(this).data('id')
)[0];
console.log(selected);
$('#more1Modal .modal-title').text(selected.name);
$('#more1Modal .modal-imgfr').css('background-image', `url(${selected.img})`);
$('#more1Modal p').text(selected.intro);
if(selected.mp4 == null) {
$('.modal-body-sample').css('display', 'none');
} else {
$('.modal-body-sample audio').attr('src', selected.mp4);
}
let hashtagStr = "";
for(let i = 0; i < selected.tags.length; i++){
hashtagStr+= `${selected.tags[i]}`;
};
$('#more1Modal .modal-hashtag').html(hashtagStr);
let isPlaying = false;
$('.modal-body-toggleplay').click(function(){
//isPlaying? pauseMusic(music) : playMusic(music)
if(isPlaying) {
music.pause();
$('.modal-body-toggleplay').attr("src", "https://i.imgur.com/gYst9TQ.png");
isPlaying = false;
} else {
music.play();
$('.modal-body-toggleplay').attr("src", "https://i.imgur.com/f5PWQUb.png");
isPlaying = true;
}
console.log(isPlaying);
});
$('[data-dismiss="modal"]').click(function() {
music.pause();
$('.modal-body-toggleplay').attr("src", "https://i.imgur.com/gYst9TQ.png");
isPlaying = false;
});
music.addEventListener('timeupdate', updateProgress);
progressZone.addEventListener('click', setProgress);
})
}
}
getVtuber();
const updateProgress = (e) => {
const music = document.querySelector('.modal-body-sample audio');
const progressBar = document.querySelector('#progress-bar');
const progressZone = document.querySelector('.music-progress');
const {
duration,
currentTime
} = e.srcElement;
const progressPercent = (currentTime / duration) * 100
progressBar.style.width = `${progressPercent}%`
if(progressPercent == 100) {
music.pause();
$('.modal-body-toggleplay').attr("src", "https://i.imgur.com/gYst9TQ.png");
isPlaying = false;
console.log('test');
}
}
function setProgress(e) {
const music = document.querySelector('.modal-body-sample audio');
const width = this.clientWidth;
const setPoint = e.offsetX;
const duration = music.duration;
music.currentTime = (setPoint / width) * duration;
}