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

"use strict";

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

// Tabs
function changeTab(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;
        }
    })
}

const tabs = document.querySelectorAll('input[type="radio"]');
tabs.forEach(tab => {
    tab.addEventListener('click', e => {
        changeTab(e);
    })
})

// Chart word count over time
const wordCountTrack = document.getElementById('words-count-track');
const wordTime = wordCountTrack.getAttribute('data-time').split(',');
const wordWords = wordCountTrack.getAttribute('data-words').split(',');
const chartWordCount = echarts.init(wordCountTrack);

const wordCountCtrl = document.getElementById('topic-track-worte-ctrl');

function setWordCountChart(){

    let grid = [];
    let xAxis = [];
    let yAxis = [];
    let series = [];
    let totalWordCount = wordWords.slice(-1);
    let count = wordCountCtrl.value;
    // let max = totalWordCount / count;
    let data = [];

    let wordWordsLen = wordWords.length;
    let chunks = Math.floor(wordWordsLen / count);

    for(let i = 0; i < wordWordsLen; i += chunks){

        let chunk = wordWords.slice(i, i + chunks );
        let firstItem = chunk[0];
        let dataChunk = chunk.map((c) => c - firstItem);

        data.push(dataChunk)

    }

    let max = 0;
    data.forEach((d) => {

        if(parseInt(d.slice(-1)) > max){
            console.log(d.slice(-1));
            max = d.slice(-1);
        }
    })

    console.log(max)

    for(let i = 0; i < count; i++){
        grid.push({
            left: `${i * (100 / count)}%`,
            top: '0',
            width: `${100 / count}%`,
            height: '100%'
        });
        xAxis.push({
            type: 'category',
            gridIndex: i,
            min: 0,
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        });
        yAxis.push({
            type: 'value',
            gridIndex: i,
            min: 0,
            max: max,
            splitLine: {
                lineStyle: {
                    color: '#aaa'
                }
            },
            axisLabel: {
                show: false
            }
        });
        series.push({
            type: 'line',
            name: `${i}`,
            xAxisIndex: i,
            yAxisIndex: i,
            data: data[i],
            showSymbol: false,
            lineStyle: {
                color: '#fff',
            }
        });
    }

    const wordCountChartOptions = {
        tooltip: {
            trigger: 'axis',
            valueFormatter: (value) => 'Gesprochene Worte ' + new Intl.NumberFormat('de-CH').format(value)
        },
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        series: series
    }


    chartWordCount.setOption(wordCountChartOptions);

}

wordCountCtrl.addEventListener('change', (e) => {
    chartWordCount.clear();
    setWordCountChart();
})

setWordCountChart();

// Chart sentiments over time
const sentimentsTrack = document.getElementById('sentiment-track');
const sentiTime = sentimentsTrack.getAttribute('data-time').split(',');
const sentiPol = sentimentsTrack.getAttribute('data-sentiments').split(',');
const sentiWeights = sentimentsTrack.getAttribute('data-weights').split(',');
const chartSentiments = echarts.init(sentimentsTrack);

const chartSentimentsOptions = {
    tooltip: {
        trigger: 'axis',
        position: "top",
        formatter: 'Sekunde: {b0}<br>Sentiment: {c0}'
    },
    grid: {
        show: false,
        top: 0,
        bottom: 0,
        right: 0,
        left: 0
    },
  xAxis: {
    type: "category",
    data: sentiTime
  },
  yAxis: {
    type: "category",
    data: ["-1", "0", "1"]
  },
  color: '#fff',
  series: [
    {
        symbolSize: sentiWeights,
        data: sentiPol,
        type: 'scatter'
    }
  ]
};

chartSentiments.setOption(chartSentimentsOptions);

// VIDEO


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


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

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

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


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

// Transcript
const transcript = document.getElementById('transcript');
const transcript_cues = transcript.querySelectorAll('[data-start]');

transcript_cues.forEach(c => {
    c.addEventListener('click', (e) => {
        player.currentTime(e.target.getAttribute('data-start'));
        player.play();
    });
});


/************
 * Timeline *
 ************/

const status = {
    timelineIndicatorIsDragged: false
}

function timelineTimelabels(){
    let duration = player.duration()
    let step = duration / 10;
    let html = '<span>00:00:00</span>'

    for(let i = 1; i <= 10; i++){
        html += `<span>${secondsToTimecode(i * step)}</span>`;
    }

    document.querySelector('#timeline-bar').insertAdjacentHTML('beforeend', html);

}

/**
 * calcCurrenttimeByPosition
 * Calculate time to seek to, based on the position of the timelineIndicator.
 **/
function calcCurrenttimeByPosition(x){
    return (player.duration() / document.getElementById('timeline-bar').offsetWidth) * x
}

/**
 * Updates the position of the timeline indicator with every timeupdate of the video.
 **/
player.on('timeupdate', e =>{
    if(!status.timelineIndicatorIsDragged){
        let timelineIndicatorPosition = (document.getElementById('timeline-bar').offsetWidth / player.duration()) * player.currentTime();
        timelineIndicator.style.transform = `translate3d(${timelineIndicatorPosition}px, 0px, 0px)`;
    }

})

/**
 * Initialize the timelineindicator
 **/
document.addEventListener("DOMContentLoaded", (event) => {
    gsap.registerPlugin(Draggable)
    Draggable.create("#timeline-bar-ctrl", {
        type: "x",
        bounds: document.getElementById("timeline-bar"),
        onDragStart: function () {
            status.timelineIndicatorIsDragged = true;
        },
        onDragEnd: function () {
            player.currentTime(calcCurrenttimeByPosition(this.x));
            player.play();
            status.timelineIndicatorIsDragged = false;
        },
    });
});


/*
document.querySelector('#timeline-bar').addEventListener('click', e => {
    console.log(e.clientX - e.target.offsetLeft);
    let x = e.clientX - e.target.offsetLeft;
    player.currentTime(calcCurrenttimeByPosition(x));
})
*/
const topics = [
    ["Topic1 Topic2 Topic3"],
    ["Topic1 Topic2 Topic3", "Topic3 Topic4 Topic5"],
    ["Topic1 Topic2 Topic3", "Topic3 Topic4 Topic5", "Topic6 Topic7 Topic8"],
    ["Topic1 Topic2 Topic3", "Topic3 Topic4 Topic5", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3"],
    ["Topic1 Topic2 Topic3", "Topic3 Topic4 Topic5", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3"],
    ["Topic1 Topic2 Topic3", "Topic3 Topic4 Topic5", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3"],
    ["Topic1 Topic2 Topic3", "Topic3 Topic4 Topic5", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3"],
    ["Topic1 Topic2 Topic3", "Topic3 Topic4 Topic5", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3"],
    ["Topic1 Topic2 Topic3", "Topic3 Topic4 Topic5", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3"],
    ["Topic1 Topic2 Topic3", "Topic3 Topic4 Topic5", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3", "Topic1 Topic2 Topic3"],
];

function setTopicSegments(count){

    let html = '';

    topics[count - 1].forEach(t => {
        html += `<li>${t}</li>`;
    })

    let list = document.querySelector('#topic-segement-list');
    list.innerHTML = html;
    list.style.gridTemplate = `1fr / repeat(${count}, 1fr)`;

}


let topicSegmentCtrl = document.getElementById('topic-track-segment-ctrl');

topicSegmentCtrl.addEventListener('change', e => {
    setTopicSegments(e.target.value);

})

setTopicSegments(topicSegmentCtrl.value);