368 lines
9.4 KiB
JavaScript
368 lines
9.4 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';
|
|
|
|
window.echarts = echarts;
|
|
|
|
// Tabs
|
|
function changeTab(el){
|
|
|
|
let tabId = el.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.target);
|
|
})
|
|
})
|
|
|
|
// 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){
|
|
max = d.slice(-1);
|
|
}
|
|
})
|
|
|
|
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 = {
|
|
grid: grid,
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
series: series,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
valueFormatter: (value) => 'Gesprochene Worte ' + new Intl.NumberFormat('de-CH').format(value),
|
|
formatter: (v) => {
|
|
|
|
let index = v[0].componentIndex;
|
|
//console.log(wordCountChartOptions.series[0]);
|
|
let count_tooltip = 0;
|
|
for(let i = 0; i < index; i++){
|
|
count_tooltip = count_tooltip + parseInt(wordCountChartOptions.series[i].data.slice(-1));
|
|
}
|
|
count_tooltip = parseInt(v[0].axisValue) + count_tooltip;
|
|
return `Segment: ${index + 1}<br>Wort: ${count_tooltip}`;
|
|
|
|
}
|
|
},
|
|
}
|
|
|
|
|
|
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: (e) => {
|
|
let sek = e[0].axisValue;
|
|
let sent = e[0].data;
|
|
sent = sent == 0 ? 'Neutral' : sent == 1 ? 'Positiv' : 'Negativ';
|
|
return `Sekunde: ${sek}<br>Sentiment: ${sent}`
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
left: 0
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: sentiTime
|
|
},
|
|
yAxis: {
|
|
type: "category",
|
|
data: ["-1", "0", "1"]
|
|
},
|
|
series: [
|
|
{
|
|
symbolSize: sentiWeights,
|
|
data: sentiPol,
|
|
type: 'scatter',
|
|
itemStyle: {
|
|
color: (e) => {
|
|
if(e.data == -1){
|
|
return '#d01c8b'
|
|
}else if(e.data == 0){
|
|
return '#f7f7f7'
|
|
}else{
|
|
return '#4dac26'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
chartSentiments.setOption(chartSentimentsOptions);
|
|
|
|
|
|
// VIDEO
|
|
|
|
|
|
const video = document.getElementById('video');
|
|
// Timeline draggable
|
|
gsap.registerPlugin(Draggable);
|
|
|
|
|
|
const player = new Pillarbox('my-player', {
|
|
controls: false,
|
|
muted: false,
|
|
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;
|
|
},
|
|
});
|
|
});
|
|
|
|
chartSentiments.on('click', 'series', (e) => {
|
|
player.currentTime(chartSentimentsOptions.xAxis.data[e.dataIndex]);
|
|
player.play();
|
|
});
|
|
|
|
// Suche
|
|
const searchInput = document.querySelector('#search')
|
|
const searchInputBtn = document.querySelector('#searchbutton')
|
|
const searchresults = document.querySelector('#searchresults')
|
|
|
|
function search(term){
|
|
|
|
if(term.length > 1){
|
|
|
|
searchresults.innerHTML = '';
|
|
|
|
transcript.querySelectorAll('li').forEach((el)=>{
|
|
let text = el.querySelector('font').innerText.toLowerCase();
|
|
term = term.toLowerCase();
|
|
|
|
if(text.includes(term)){
|
|
let clone = el.cloneNode(true);
|
|
searchresults.appendChild(clone);
|
|
}
|
|
})
|
|
|
|
if(!searchresults.querySelector('li')){
|
|
searchresults.innerHTML = `<li>Keine Ergebnisse für «${term}»</li>`;
|
|
}else{
|
|
searchresults.querySelectorAll('[data-start]').forEach(c => {
|
|
c.addEventListener('click', (e) => {
|
|
player.currentTime(e.target.getAttribute('data-start'));
|
|
player.play();
|
|
});
|
|
});
|
|
}
|
|
}else{
|
|
searchresults.innerHTML = `<li>Bitte gib mind. 2 Buchstaben ein.</li>`;
|
|
}
|
|
|
|
}
|
|
|
|
searchInputBtn.addEventListener('click', () => {
|
|
search(searchInput.value)
|
|
})
|
|
|
|
const topics = document.querySelectorAll('#topicslist a');
|
|
|
|
topics.forEach(el => {
|
|
el.addEventListener('click', e => {
|
|
search(e.target.innerText);
|
|
searchInput.value = e.target.innerText;
|
|
let tab = document.getElementById('tablist_panel_search');
|
|
tab.checked = true
|
|
changeTab(document.getElementById('tablist_panel_search'));
|
|
})
|
|
})
|
|
|