328 lines
8.8 KiB
JavaScript
328 lines
8.8 KiB
JavaScript
"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);
|
|
|