AI_Video_LP/static/js/vtubers.js

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 += `<span class="vt-style">${result[i].style[j]}</span>`;
            console.log(result[i].style.length);
        }
        str += `<div class="col-6 col-sm-4 col-md-3">
                    <div class="card" style="width: 100%;">
                    <div class="vt-ribbon"><p>Vtuber</p></div>
                        <div class="card-img-fr" style="background-image:url(${result[i].img})"></div>
                        <div class="card-body">
                            <h5 class="card-title">${result[i].name}</h5>
                            ${style}
                            <button class="card-link" data-toggle="modal" data-target="#more1Modal" data-id="${result[i].id}" >查看更多></button>
                        </div>
                    </div>
                </div>`;
      }
      $('.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+= `<span class="hashtag-pill">${selected.tags[i]}</span>`;
          };
          $('#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;
}