AI_Video_LP/static/js/vtubers.js

const data = [
    {
        "id": "0",
        "name": "凡笙弦語",
        "intro": "台灣新人Vtuber鹹魚翻身後依然是條鹹魚以歌唱與歌曲創作為主！",
        "img": "https://i.imgur.com/1Oahh38.jpg",
        "images": ["https://i.imgur.com/1Oahh38.jpg"],
        "style": ["可愛"],
        "tags": ["#FS鹹魚", "#魚塭", "#TWVtuber", "#台灣", "#台湾", "#VirtualYouTuber", "#虛擬YouTuber", "#Vtuber"],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "facebook",
                "link": 'https://www.facebook.com/F.S.XianYu/',
                "img": "https://i.imgur.com/HtfL33q.png"
            },
            {
                "channel": "Youtube",
                "link": "https://www.youtube.com/watch?v=AcE1edvJ9g0",
                "img": "https://i.imgur.com/c4VdjRJ.png"
            },
            {
                "channel": "twitter",
                "link": 'https://twitter.com/FS_xianyu',
                "img": "https://i.imgur.com/4VKBo9w.png"
            },
            {
                "channel": "website",
                "link": "https://marshmallow-qa.com/fs_xianyu",
                "img": "https://i.imgur.com/8nmvSdj.png"
            },
            {
                "channel": "twitch",
                "link": 'https://www.facebook.com/groups/590614894737063/?hoisted_section_header_type=recently_seen&multi_permalinks=1253077595157453',
                "img": "https://i.imgur.com/FjIaiz9.png"
            },
        ],
        "mp4": null
    },
    {
        "id": "1",
        "name": "小烏龜-Yui",
        "intro": "日常♡搞怪♡美食小烏龜 姓名：Yu i  生日：2020/08/07  個性：愛玩、愛吃、愛搞怪  擅長：搗亂、畫圖  品種：烤饅頭  龜稀有值：100%",
        "img": "https://i.imgur.com/iHtiCpP.jpg",
        "images": ["https://i.imgur.com/iHtiCpP.jpg"],
        "style": ["可愛"],
        "tags": ["#小烏龜yui"],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "facebook",
                "link": 'https://www.facebook.com/littleturtleyui/',
                "img": "https://i.imgur.com/HtfL33q.png"
            },
        ],
        "mp4": null
    },
    {
        "id": "2",
        "name": "柚餓幽窮",
        "intro": "哈囉大家好！我們是魔法少女⭐幽可⭐&狗狗🎀柚子🎀影片以遊戲、聊天、直播精華、連動…等為主每週二 四晚上六點出片❤假日直播 偶爾有突發⚠️_歡迎私訊合作邀約(˶‾᷄ ⁻̫ ‾᷅˵)希望能和大家一起玩💕_",
        "img": "https://i.imgur.com/g00i7Ji.jpg",
        "images": ["https://i.imgur.com/NKxoaoi.png", "https://i.imgur.com/pR2IjVn.png"],
        "style": ["奶兇"],
        "tags": [],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "facebook",
                "link": 'https://www.facebook.com/profile.php?id=100070148449631',
                "img": "https://i.imgur.com/HtfL33q.png"
            },
            {
                "channel": "youtube",
                "link": 'https://www.youtube.com/channel/UC9ymconZOuIj-cuWpEUyjUg',
                "img": "https://i.imgur.com/c4VdjRJ.png"
            },
            {
                "channel": "website",
                "link": 'https://discord.gg/4RRQHYfXww',
                "img": "https://i.imgur.com/Vbjnelb.png"
            },
        ],
        "mp4": null
    },
    {
        "id": "3",
        "name": "花御いしき",
        "intro": "吾是住在台灣的花神,如果名子不好記可以叫我花花就好! 願望是看見你們如花朵般燦爛的微笑，私は台湾に住む花の神様です。名前がわかりにくい場合は、華華と呼んでください！，願いが花のように明るくて、あなたの笑顔を作ることです！",
        "img": "https://i.imgur.com/e0Nl0FW.png",
        "images": ["https://i.imgur.com/e0Nl0FW.png"],
        "style": ["溫柔可愛", "人格分裂", "配音系"],
        "tags": ["#擴散希望", "#男vtuber", " #虛擬youtuber", "#新人VTuber"],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "facebook",
                "link": 'https://www.facebook.com/groups/590614894737063/?hoisted_section_header_type=recently_seen&multi_permalinks=1253077595157453',
                "img": "https://i.imgur.com/HtfL33q.png"
            },
            {
                "channel": "Youtube",
                "link": 'https://www.youtube.com/channel/UCtjosoymWqb5YtyL5BIqRlg',
                "img": "https://i.imgur.com/c4VdjRJ.png"
            },
            {
                "channel": "twitter",
                "link": 'https://twitter.com/hanaoishiki',
                "img": "https://i.imgur.com/4VKBo9w.png"
            },
            {
                "channel": "website",
                "link": 'https://marshmallow-qa.com/hanaoishiki',
                "img": "https://i.imgur.com/8nmvSdj.png"
            },
            {
                "channel": "discord",
                "link": 'https://discord.gg/Ey3rNJ75UZ',
                "img": "https://i.imgur.com/Vbjnelb.png"
            }
        ],
        "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": "我是來自台灣的Vtuber(台V)，Ikusen(小千)！💕 最喜歡跟【MOMOMO團】的夥伴一起直播了!🐑",
        "img": "https://i.imgur.com/GXHDTcd.png",
        "images": ["https://i.imgur.com/GXHDTcd.png"],
        "style": ["御姊"],
        "tags": ["#台灣Vtuber", "#いくせん", "#VTuber ", "#TWvtuber", "#Ikusen", "#小千", "#虛擬Youtuber"],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "facebook",
                "link": 'https://www.facebook.com/ikusen.vtube…',
                "img": "https://i.imgur.com/HtfL33q.png"
            },
            {
                "channel": "Youtube",
                "link": 'https://www.youtube.com/channel/UCKazkVudNQs8ZhwfXj_RNPw',
                "img": "https://i.imgur.com/c4VdjRJ.png"
            },
            {
                "channel": "twitter",
                "link": 'https://twitter.com/Ikusen_',
                "img": "https://i.imgur.com/4VKBo9w.png"
            },
        ],
        "mp4": null
    },
    {
        "id": "5",
        "name": "迷途小喵",
        "intro": "原本在月球上生活得好好的，結果因為‘假面騎士孝子砸月’行為被甩飛到了地球(台灣)，之後發現地球上的高等生物是人類不是兔子，並且學習融入人類的社會中，途中喜歡上了繪師們，所以決定成立漢化組，來無償協助繪師們，夢想是成為繪師們的小天使，但也許是因為漢化過於疲勞，不幸追撞了黑色的高級車。對為了保護組員而擔下全部責任的組長，車主——暴力團員谷岡所提出的和解條件是…成為VTB",
        "img": "https://i.imgur.com/YnSPyv7.jpg",
        "images": ["https://i.imgur.com/YnSPyv7.jpg"],
        "style": ["御姊", "多聲線"],
        "tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "Youtube",
                "link": 'https://www.youtube.com/channel/UCWtYRC3kmgSUQcWqWFqXvJA/featured',
                "img": "https://i.imgur.com/c4VdjRJ.png"
            },
            {
                "channel": "twitch",
                "link": 'https://www.twitch.tv/straynyan',
                "img": "https://i.imgur.com/FjIaiz9.png"
            },
        ],
        "mp4": null
    },
    {
        "id": "6",
        "name": "天晴Haruru🐧",
        "intro": "我是養著可愛小企鵝的天晴Haruru🐧 喜歡電競、吉他、雜談、動漫、運動、程式設計、區塊鏈還有許多不同的領域 希望可以跟大家一起開心的遊戲和談天",
        "img": "https://i.imgur.com/9autFIy.jpg",
        "images": ["https://i.imgur.com/9autFIy.jpg"],
        "style": ["奶兇"],
        "tags": ["#天晴Haruru", "#VTuber", "#新人VTuber", "#TWvtuber", "#企鵝"],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "facebook",
                "link": 'https://www.facebook.com/TCHaruru',
                "img": "https://i.imgur.com/HtfL33q.png"
            },
            {
                "channel": "Youtube",
                "link": 'https://youtu.be/MYcs6bbxwWI',
                "img": "https://i.imgur.com/c4VdjRJ.png"
            },
            {
                "channel": "twitter",
                "link": 'https://twitter.com/TCHaruru72',
                "img": "https://i.imgur.com/4VKBo9w.png"
            },
            {
                "channel": "website",
                "link": ' https://marshmallow-qa.com/tcharuru72',
                "img": "https://i.imgur.com/8nmvSdj.png"
            },
            {
                "channel": "discord",
                "link": 'https://discord.gg/8eRWytUXtf',
                "img": "https://i.imgur.com/Vbjnelb.png"
            },
        ],
        "mp4": null
    },
    {
        "id": "7",
        "name": "拉美拉 ramellae",
        "intro": "我是打工巫女拉美拉 Ramellae ヾ(*´∀ ˋ*)ﾉ一邊打掃著神社，一邊嚮往著劍與魔法的魔幻世界✨✨✨",
        "img": "https://i.imgur.com/0p2VzTh.jpg",
        "images": ["https://i.imgur.com/0p2VzTh.jpg"],
        "style": ["御姊", "多聲線"],
        "tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "facebook",
                "link": 'https://pse.is/3kp3y3',
                "img": "https://i.imgur.com/HtfL33q.png"
            },
            {
                "channel": "Youtube",
                "link": 'https://www.youtube.com/channel/UCEwfcA9-y1hcQpVMt9Xge_w',
                "img": "https://i.imgur.com/c4VdjRJ.png"
            },
            {
                "channel": "twitter",
                "link": 'https://pse.is/3layv4',
                "img": "https://i.imgur.com/FjIaiz9.png"
            },
        ],
        "mp4": null
    },
    {
        "id": "8",
        "name": "蕉バナ Bana🍌",
        "intro": "我是打工巫女拉美拉 Ramellae ヾ(*´∀ ˋ*)ﾉ一邊打掃著神社，一邊嚮往著劍與魔法的魔幻世界✨✨✨",
        "img": "https://i.imgur.com/4NyjGaS.jpg",
        "images": ["https://i.imgur.com/4NyjGaS.jpg"],
        "style": [],
        "tags": [],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "twitch",
                "link": 'https://www.twitch.tv/jia0bana',
                "img": "https://i.imgur.com/HtfL33q.png"
            },
            {
                "channel": "Youtube",
                "link": 'https://www.youtube.com/channel/UCxyTFoXTDyo16R2zBEMPZrw/featured',
                "img": "https://i.imgur.com/c4VdjRJ.png"
            },
            {
                "channel": "twitter",
                "link": 'https://twitter.com/Jia0bana',
                "img": "https://i.imgur.com/FjIaiz9.png"
            },
        ],
        "mp4": null
    },
    {
        "id": "9",
        "name": "王顧採",
        "intro": "藝輪點燈旗下所屬 Vtuber，平時的職業是六埕順揚宮主任委員，因為整天在休息室看股票泡茶，被太太說怎麼不去做點正事，所以決定中年轉職為偶像實習生的叔叔系藝人。預計會直播的方向包括了股市投資、民俗文化、新聞與訪談，如果有興趣的還請大家多多追蹤訂閱支持！",
        "img": "https://i.imgur.com/jqK2SEM.jpg",
        "images": ["https://i.imgur.com/jqK2SEM.jpg"],
        "style": [],
        "tags": [],
        "contact": "",
        "demand": ["角色曝光", "聲優配音", "承接業配"],
        "follow": [
            {
                "channel": "twitch",
                "link": 'https://www.twitch.tv/jia0bana',
                "img": "https://i.imgur.com/HtfL33q.png"
            },
            {
                "channel": "Youtube",
                "link": 'https://www.youtube.com/channel/UCDK61SWPrZm3PDj8RohAM-w',
                "img": "https://i.imgur.com/c4VdjRJ.png"
            },
            {
                "channel": "twitter",
                "link": 'https://twitter.com/chiveswang_llt5',
                "img": "https://i.imgur.com/FjIaiz9.png"
            },
            {
                "channel": "ig",
                "link": 'https://www.instagram.com/chiveswang.llt5/',
                "img": "https://i.imgur.com/MAObTJv.png"
            },
        ],
        "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 p').text(selected.intro);
          let slideStr = '';
          for(let i = 0; i < selected.images.length; i++){
            if(i==0) {
                slideStr += `<div class="item active modal-imgfr">
                <div class="modal-slide-item" alt="..." style="background-image:url(${selected.images[i]})"></div>
              </div>`;
            } else {
                slideStr += `<div class="item  modal-imgfr">
                <div class="modal-slide-item" alt="..." style="background-image:url(${selected.images[i]})"></div>
              </div>`;
            }
          }
          $('#more1Modal .carousel-inner').html(slideStr);
          let str = '';
          for(let i = 0; i < selected.follow.length; i++){
                str += `<a href="${selected.follow[i].link}"><img src="${selected.follow[i].img}" alt="${selected.follow[i].channel}" width="32px" height="32px"></a>`
          }
          $('#more1Modal .footer-socials').html(str);
          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>`;
          };
          let demandStr = "";
          for(let i = 0; i < selected.demand.length; i++){
            demandStr+= `<span class="demand-item">${selected.demand[i]}</span>`;
          };

          $('#more1Modal .modal-hashtag').html(hashtagStr);
          $('#more1Modal .modal-body-demandArr').html(demandStr);
          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;
}