VANA/VANA-php/resources/js/app.js

import './bootstrap';
import Pillarbox from '@srgssr/pillarbox-web';
import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";
import * as echarts from 'echarts';


// Tabs
const tabs = document.querySelectorAll('input[type="radio"]');
tabs.forEach(tab => {

    tab.addEventListener('click', el => {

        let tabId = el.target.getAttribute('id');
        let panels = document.querySelectorAll('.panel');

        panels.forEach(p => {
            if(p.getAttribute('id') === tabId+'_panel'){
                p.hidden = false;
            }else{
                p.hidden = true;
            }

        })

    })
})

var chartDom = document.querySelectorAll('.track')[0].querySelector('.track-viz');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

option && myChart.setOption(option);


// VIDEO
const video = document.getElementById('video');
// Timeline draggable
gsap.registerPlugin(Draggable);

const status = {
    dragging: false
}

document.addEventListener("DOMContentLoaded", (event) => {
    gsap.registerPlugin(Draggable)
    Draggable.create("#timeline-bar-ctrl", {
        type: "x",
        bounds: document.getElementById("timeline-bar"),
        onDragStart: function () {
            //console.log("clicked");
            status.dragging = true;
        },
        onDragEnd: function () {
            //console.log("drag ended");
            status.dragging = false;
        },
    });
});

const player = new Pillarbox('my-player', {
    controls: false,
    muted: true,
    srgOptions: {
        liveui: false
    }
});

player.src({ src: video.getAttribute('data-urn'), type: 'srgssr/urn' });

const timelineBarCtrl = document.getElementById('timeline-bar-ctrl');

function setTimeLine(){
    let vidLen = player.duration();
    let timeLineLen = document.querySelector('#timeline-bar').offsetWidth;
    let position = (timeLineLen / vidLen) * player.currentTime();
    timelineBarCtrl.style.transform = `translate3d(${position}px, 0px, 0px)`;
}

/*
document.querySelector('#timeline-bar').addEventListener('click', e => {
    let pos = e.clientX - e.target.offsetLeft;
    let len = e.target.offsetLeft;
    let time = (player.duration() / len) * pos;
    player.currentTime(time);
})*/


// Play / Pause video
video.addEventListener('click', _ => {
    player.paused() ? player.play() : player.pause();
})

player.on('timeupdate', _ =>{
    // console.log(status.dragging);
    if(!status.dragging){
        setTimeLine();
    }

})