262 lines
32 KiB
JavaScript
262 lines
32 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 time = [0, 7, 12, 15, 30, 33, 36, 39, 45, 48, 53, 59, 62, 67, 72, 75, 79, 87, 92, 95, 97, 101, 108, 113, 129, 141, 150, 154, 159, 165, 173, 177, 180, 183, 187, 195, 204, 207, 210, 216, 218, 223, 225, 233, 238, 241, 246, 250, 252, 255, 260, 261, 265, 272, 273, 277, 292, 295, 299, 309, 313, 316, 319, 322, 325, 336, 340, 347, 353, 358, 363, 367, 376, 378, 384, 385, 387, 402, 406, 415, 421, 427, 434, 441, 444, 447, 451, 462, 472, 487, 493, 501, 503, 508, 510, 518, 525, 527, 533, 542, 545, 551, 556, 564, 569, 582, 587, 591, 603, 607, 613, 617, 621, 624, 633, 636, 643, 645, 647, 650, 652, 665, 671, 677, 683, 685, 691, 695, 701, 715, 720, 723, 730, 752, 756, 760, 764, 769, 772, 774, 778, 784, 792, 799, 804, 814, 820, 823, 826, 833, 843, 845, 847, 854, 858, 865, 871, 877, 883, 887, 891, 894, 900, 902, 904, 907, 909, 918, 924, 936, 940, 948, 955, 962, 975, 978, 981, 989, 999, 1002, 1012, 1014, 1029, 1042, 1047, 1049, 1054, 1057, 1064, 1077, 1080, 1087, 1100, 1103, 1107, 1112, 1116, 1118, 1120, 1125, 1129, 1134, 1140, 1146, 1148, 1153, 1156, 1166, 1168, 1178, 1183, 1203, 1215, 1218, 1225, 1229, 1236, 1240, 1246, 1253, 1258, 1265, 1269, 1273, 1277, 1280, 1285, 1287, 1290, 1294, 1297, 1303, 1309, 1312, 1314, 1317, 1319, 1320, 1330, 1333, 1342, 1345, 1348, 1351, 1359, 1369, 1371, 1374, 1386, 1394, 1397, 1407, 1420, 1423, 1425, 1433, 1434, 1435, 1440, 1442, 1444, 1452, 1457, 1460, 1471, 1486, 1501, 1504, 1509, 1518, 1522, 1528, 1531, 1534, 1536, 1539, 1543, 1545, 1548, 1553, 1557, 1560, 1569, 1573, 1578, 1587, 1592, 1594, 1596, 1603, 1608, 1611, 1614, 1617, 1623, 1628, 1632, 1635, 1637, 1644, 1649, 1655, 1657, 1658, 1661, 1664, 1666, 1668, 1671, 1673, 1675, 1678, 1681, 1685, 1693, 1695, 1698, 1704, 1706, 1709, 1711, 1717, 1721, 1729, 1731, 1734, 1738, 1742, 1744, 1749, 1755, 1757, 1761, 1763, 1765, 1773, 1777, 1781, 1785, 1787, 1789, 1791, 1798, 1810, 1812, 1813, 1816, 1822, 1826, 1829, 1835, 1838, 1843, 1845, 1848, 1850, 1853, 1855, 1857, 1859, 1862, 1868, 1871, 1875, 1884, 1887, 1890, 1893, 1896, 1901, 1904, 1908, 1914, 1915, 1916, 1921, 1929, 1932, 1935, 1944, 1953, 1955, 1960, 1967, 1970, 1973, 1977, 1983, 1988, 1991, 2004, 2006, 2009, 2011, 2014, 2016, 2021, 2024, 2027, 2034, 2040, 2046, 2051, 2054, 2061, 2068, 2070, 2074, 2078, 2090, 2097, 2099, 2103, 2105, 2106, 2107, 2109, 2114, 2115, 2117, 2118, 2122, 2129, 2132, 2134, 2137, 2139, 2142, 2144, 2148, 2155, 2157, 2159, 2164, 2166, 2170, 2172, 2175, 2178, 2182, 2185, 2191, 2202, 2208, 2217, 2218, 2224, 2228, 2231, 2236, 2239, 2248, 2264, 2268, 2272, 2278, 2283, 2288, 2290, 2293, 2298, 2302, 2304, 2309, 2312, 2319, 2322, 2327, 2330, 2339, 2346, 2355, 2362, 2369, 2372, 2377, 2382, 2388, 2390, 2394, 2400, 2404, 2410, 2420, 2421, 2428, 2434, 2440, 2446, 2450, 2456, 2460, 2467, 2471, 2483, 2489, 2494, 2499, 2501, 2503, 2509, 2519, 2524, 2527, 2532, 2534, 2539, 2541, 2548, 2550, 2553, 2564, 2567, 2577, 2585, 2590, 2600, 2606, 2612, 2614, 2615, 2625, 2640, 2645, 2654, 2656, 2668, 2680, 2686, 2698, 2701, 2711, 2717, 2721, 2723, 2728, 2738, 2752, 2761, 2764, 2774, 2779, 2782, 2792, 2798, 2801, 2805, 2812, 2817, 2827, 2830, 2837, 2840, 2842, 2849, 2855, 2858, 2864, 2866, 2873, 2877, 2880, 2884, 2892, 2894, 2898, 2905, 2911, 2913, 2915, 2917, 2928, 2934, 2937, 2946, 2953, 2956, 2963, 2968, 2969, 2977, 2985, 2992, 3001, 3005, 3010, 3015, 3020, 3032, 3038, 3044, 3050, 3055, 3058, 3060, 3063, 3076, 3081, 3086, 3094, 3100, 3104, 3112, 3117, 3122, 3125, 3131, 3134, 3137, 3146, 3152, 3157, 3162, 3171, 3173, 3177, 3185, 3191, 3195, 3204, 3209, 3219, 3221, 3225, 3227, 3230, 3234, 3240, 3249, 3252, 3255, 3261, 3266, 3271, 3275, 3279, 3284, 3288, 3293, 3296, 3309, 3316, 3320, 3324, 3329, 3339, 3355, 3361, 3375, 3379, 3391, 3398, 3407, 3411, 3419, 3421, 3430, 3434, 3441, 3455, 3460, 3462, 3464, 3467, 3473, 3480, 3483, 3489, 3491, 3495, 3501, 3508, 3513, 3515, 3518, 3521, 3525, 3527, 3530, 3532, 3533, 3537, 3542, 3545, 3550, 3553, 3558, 3564, 3567, 3574, 3579, 3583, 3586, 3591, 3594, 3600, 3605, 3607, 3610, 3612, 3615, 3616, 3617, 3620, 3621, 3623, 3624, 3628, 3631, 3635, 3639, 3648, 3651, 3655, 3662, 3667, 3674, 3676, 3678, 3682, 3686, 3692, 3695, 3699, 3705, 3711, 3714, 3717, 3722, 3725, 3729, 3736, 3739, 3741, 3746, 3751, 3753, 3758, 3763, 3767, 3778, 3784, 3790, 3798, 3804, 3807, 3809, 3815, 3821, 3825, 3828, 3830, 3832, 3834, 3845, 3848, 3854, 3855, 3866, 3868, 3874, 3877, 3881, 3887, 3890, 3895, 3903, 3906, 3910, 3917, 3925, 3929, 3931, 3937, 3940, 3942, 3951, 3953, 3956, 3958, 3961, 3968, 3977, 3980, 3984, 3986, 3989, 3991, 3998, 4001, 4007, 4012, 4018, 4020, 4022, 4028, 4032, 4036, 4041, 4044, 4047, 4053, 4056, 4059, 4064, 4067, 4071, 4073, 4077, 4079, 4081, 4081, 4085, 4088, 4090, 4093, 4100, 4103, 4110, 4112, 4114, 4116, 4120, 4124, 4128, 4133, 4137, 4143, 4151, 4162, 4166, 4170, 4179, 4184, 4185, 4191, 4194, 4196, 4201, 4203, 4205, 4209, 4212, 4217, 4222, 4225, 4228, 4236, 4245, 4248, 4252, 4256, 4262, 4271, 4273, 4277, 4280, 4283, 4285, 4296, 4302, 4304, 4308, 4311, 4313, 4315, 4317, 4319, 4322, 4323, 4324, 4330, 4333, 4336, 4339, 4344, 4347, 4353, 4357, 4363, 4374, 4377, 4381, 4386, 4392, 4395, 4400, 4402, 4403, 4410, 4417, 4419, 4424, 4426, 4439, 4442, 4444, 4451, 4456, 4464, 4480, 4483, 4486, 4493, 4498, 4501, 4503, 4511, 4513, 4517, 4522, 4530, 4538, 4541, 4544, 4547, 4550, 4554, 4561, 4565, 4569, 4576, 4580, 4584, 4588, 4590, 4593, 4599, 4605, 4608, 4615, 4618, 4629, 4634, 4638, 4647, 4650, 4655, 4658, 4664, 4668, 4675, 4679, 4683, 4689, 4694, 4698, 4704, 4710, 4717, 4719, 4721, 4722, 4726, 4731, 4735];
|
|
const words = [0, 10, 23, 27, 31, 35, 37, 48, 59, 65, 73, 86, 92, 102, 116, 121, 130, 145, 151, 157, 159, 170, 187, 200, 230, 243, 262, 272, 279, 293, 304, 314, 319, 327, 336, 353, 373, 381, 387, 403, 409, 423, 429, 448, 465, 472, 484, 496, 503, 512, 525, 527, 536, 556, 558, 564, 584, 589, 597, 619, 628, 636, 642, 648, 657, 676, 687, 704, 717, 729, 744, 756, 772, 781, 796, 799, 801, 833, 843, 863, 872, 882, 888, 903, 913, 922, 932, 957, 978, 1019, 1033, 1057, 1067, 1081, 1086, 1101, 1120, 1123, 1143, 1169, 1178, 1194, 1203, 1221, 1236, 1258, 1267, 1275, 1304, 1309, 1324, 1332, 1345, 1354, 1366, 1379, 1396, 1402, 1410, 1413, 1422, 1448, 1460, 1469, 1485, 1490, 1503, 1513, 1529, 1552, 1562, 1568, 1585, 1635, 1643, 1653, 1662, 1676, 1684, 1690, 1697, 1714, 1726, 1742, 1752, 1779, 1793, 1796, 1806, 1826, 1846, 1853, 1860, 1877, 1888, 1897, 1915, 1930, 1946, 1956, 1970, 1976, 1992, 1995, 2003, 2011, 2015, 2032, 2046, 2076, 2088, 2113, 2136, 2155, 2195, 2197, 2213, 2230, 2249, 2258, 2279, 2285, 2321, 2351, 2362, 2367, 2383, 2395, 2412, 2449, 2457, 2468, 2496, 2509, 2524, 2542, 2552, 2561, 2565, 2582, 2600, 2615, 2639, 2655, 2661, 2677, 2686, 2707, 2716, 2740, 2747, 2774, 2789, 2799, 2803, 2814, 2830, 2831, 2844, 2856, 2857, 2869, 2878, 2888, 2900, 2907, 2918, 2925, 2933, 2942, 2950, 2966, 2977, 2989, 2996, 3006, 3012, 3017, 3039, 3045, 3071, 3083, 3088, 3095, 3115, 3139, 3145, 3155, 3178, 3199, 3207, 3237, 3266, 3276, 3280, 3299, 3303, 3309, 3320, 3324, 3332, 3356, 3368, 3376, 3402, 3440, 3464, 3471, 3483, 3502, 3513, 3531, 3542, 3551, 3558, 3565, 3579, 3586, 3590, 3601, 3610, 3617, 3644, 3654, 3665, 3689, 3701, 3706, 3709, 3721, 3732, 3744, 3749, 3756, 3775, 3786, 3801, 3807, 3813, 3833, 3849, 3866, 3874, 3875, 3884, 3887, 3893, 3898, 3904, 3909, 3916, 3920, 3931, 3939, 3963, 3971, 3982, 3997, 4003, 4009, 4017, 4034, 4042, 4055, 4064, 4067, 4078, 4089, 4094, 4112, 4125, 4132, 4143, 4151, 4157, 4177, 4187, 4204, 4208, 4219, 4227, 4231, 4248, 4253, 4259, 4266, 4272, 4285, 4296, 4308, 4322, 4328, 4341, 4348, 4352, 4355, 4363, 4369, 4374, 4379, 4387, 4405, 4411, 4417, 4432, 4442, 4446, 4456, 4463, 4473, 4485, 4495, 4508, 4512, 4517, 4533, 4551, 4557, 4564, 4590, 4625, 4628, 4640, 4659, 4667, 4676, 4681, 4694, 4701, 4708, 4734, 4738, 4745, 4751, 4760, 4769, 4783, 4792, 4796, 4808, 4817, 4831, 4846, 4854, 4873, 4891, 4895, 4907, 4912, 4948, 4963, 4970, 4982, 4988, 4994, 4997, 5004, 5023, 5028, 5032, 5036, 5044, 5060, 5072, 5076, 5083, 5089, 5096, 5102, 5111, 5134, 5141, 5151, 5166, 5172, 5183, 5188, 5200, 5211, 5216, 5229, 5240, 5256, 5275, 5297, 5299, 5311, 5319, 5328, 5341, 5350, 5369, 5389, 5398, 5406, 5422, 5436, 5449, 5454, 5460, 5469, 5478, 5481, 5493, 5500, 5521, 5528, 5538, 5546, 5567, 5583, 5606, 5628, 5636, 5641, 5650, 5655, 5665, 5669, 5678, 5694, 5703, 5720, 5738, 5744, 5770, 5787, 5806, 5823, 5835, 5857, 5871, 5892, 5905, 5929, 5945, 5961, 5974, 5986, 5992, 6008, 6034, 6052, 6060, 6071, 6081, 6094, 6099, 6122, 6131, 6141, 6177, 6183, 6212, 6238, 6246, 6273, 6295, 6316, 6318, 6322, 6345, 6384, 6390, 6411, 6421, 6445, 6483, 6500, 6527, 6537, 6563, 6582, 6592, 6603, 6615, 6640, 6669, 6693, 6700, 6716, 6730, 6739, 6762, 6778, 6779, 6799, 6819, 6831, 6853, 6861, 6882, 6890, 6894, 6909, 6924, 6929, 6942, 6948, 6963, 6969, 6979, 6986, 7008, 7012, 7021, 7034, 7051, 7059, 7065, 7072, 7098, 7113, 7117, 7143, 7164, 7175, 7191, 7199, 7204, 7221, 7244, 7262, 7286, 7300, 7319, 7329, 7344, 7374, 7383, 7398, 7405, 7413, 7421, 7426, 7436, 7463, 7478, 7490, 7511, 7525, 7535, 7563, 7576, 7586, 7595, 7611, 7617, 7624, 7646, 7661, 7678, 7691, 7713, 7719, 7732, 7750, 7767, 7778, 7801, 7816, 7827, 7832, 7844, 7856, 7863, 7875, 7893, 7915, 7925, 7934, 7953, 7966, 7983, 8000, 8013, 8028, 8040, 8052, 8062, 8089, 8104, 8116, 8129, 8143, 8157, 8190, 8205, 8241, 8253, 8276, 8290, 8306, 8324, 8342, 8348, 8365, 8373, 8389, 8410, 8428, 8434, 8441, 8448, 8461, 8482, 8488, 8501, 8503, 8512, 8526, 8548, 8567, 8574, 8583, 8594, 8604, 8610, 8620, 8625, 8630, 8640, 8651, 8660, 8677, 8681, 8698, 8721, 8726, 8741, 8756, 8769, 8779, 8796, 8800, 8812, 8818, 8829, 8836, 8842, 8851, 8853, 8857, 8864, 8868, 8875, 8876, 8882, 8888, 8897, 8905, 8916, 8925, 8935, 8945, 8956, 8980, 8988, 8993, 9001, 9009, 9022, 9030, 9036, 9058, 9074, 9080, 9090, 9108, 9116, 9127, 9141, 9147, 9157, 9166, 9180, 9188, 9197, 9212, 9223, 9240, 9254, 9267, 9281, 9298, 9305, 9309, 9322, 9332, 9340, 9345, 9349, 9353, 9364, 9384, 9387, 9399, 9404, 9430, 9435, 9456, 9464, 9473, 9481, 9492, 9508, 9529, 9541, 9554, 9567, 9593, 9607, 9613, 9621, 9625, 9635, 9659, 9667, 9673, 9679, 9686, 9700, 9721, 9728, 9738, 9744, 9745, 9751, 9766, 9773, 9786, 9803, 9821, 9827, 9834, 9846, 9859, 9873, 9885, 9891, 9894, 9912, 9924, 9929, 9938, 9945, 9952, 9960, 9970, 9977, 9978, 9986, 9995, 10006, 10013, 10023, 10036, 10047, 10060, 10066, 10074, 10081, 10088, 10099, 10108, 10121, 10133, 10148, 10169, 10194, 10203, 10210, 10227, 10242, 10244, 10265, 10273, 10281, 10298, 10301, 10306, 10319, 10326, 10341, 10355, 10360, 10370, 10388, 10401, 10409, 10422, 10434, 10441, 10460, 10468, 10479, 10490, 10500, 10508, 10533, 10550, 10558, 10563, 10575, 10582, 10589, 10593, 10599, 10607, 10611, 10617, 10639, 10649, 10657, 10664, 10675, 10685, 10704, 10718, 10730, 10747, 10753, 10762, 10773, 10784, 10791, 10805, 10810, 10815, 10829, 10844, 10849, 10862, 10867, 10894, 10902, 10907, 10925, 10938, 10951, 10965, 10974, 10982, 10997, 11008, 11015, 11021, 11039, 11041, 11051, 11058, 11065, 11079, 11085, 11093, 11099, 11106, 11116, 11127, 11135, 11146, 11163, 11172, 11183, 11190, 11195, 11205, 11212, 11221, 11229, 11240, 11249, 11266, 11274, 11284, 11304, 11311, 11334, 11344, 11360, 11369, 11377, 11389, 11402, 11417, 11430, 11431, 11435, 11440, 11452, 11458, 11459, 11467, 11474, 11488, 11494]
|
|
|
|
const wordCountTrack = document.getElementById('words-count-track');
|
|
const chartWordCount = echarts.init(wordCountTrack);
|
|
const chartWordCountOptions = {
|
|
grid: {
|
|
show: false,
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
left: 0
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: time,
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
}
|
|
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#aaa'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
inside: false
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
valueFormatter: (value) => 'Gesprochene Worte ' + new Intl.NumberFormat('de-CH').format(value)
|
|
},
|
|
series: [
|
|
{
|
|
data: words,
|
|
type: 'line',
|
|
showSymbol: false,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
},
|
|
}
|
|
]
|
|
};
|
|
|
|
chartWordCount.setOption(chartWordCountOptions);
|
|
|
|
// Chart sentiments over time
|
|
const sentimentsTrack = document.getElementById('sentiment-track');
|
|
const chartSentiments = echarts.init(sentimentsTrack);
|
|
const chartSentimentsOptions = {
|
|
grid: {
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
left: 0
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: [5.364, 8.178, 11.005, 14.745, 17.539, 33.363, 36.103, 38.593, 40.863, 43.773, 47.543, 55.084, 57.943, 60.704, 63.353, 69.975, 72.654, 77.243, 83.725, 87.466, 91.062, 94.375, 98.152, 103.323, 107.013, 111.933, 120.634, 132.343, 136.39, 140.943, 141.707, 148.073, 155.913, 160.735, 185.933, 188.09699999999998, 193.142, 195.445, 197.345, 204.753, 210.06, 216.384, 218.522, 220.884, 229.833, 239.574, 243.062, 245.743, 255.603, 258.253, 267.045, 273.712, 279.072, 282.351, 285.302, 290.652, 301.752, 307.284, 311.374, 313.443, 315.743, 317.602, 320.102, 323.772, 326.304, 331.599, 335.565, 339.053, 342.672, 345.873, 349.352, 357.703, 370.133, 374.506, 381.893, 387.562, 393.692, 396.112, 403.052, 405.522, 409.882, 411.822, 414.012, 415.882, 419.852, 424.682, 426.753, 438.702, 440.867, 452.822, 455.29650000000004, 460.454, 462.453, 466.183, 468.802, 473.362, 475.352, 482.704, 485.543, 491.022, 494.212, 496.928, 502.392, 510.362, 515.059, 517.28, 519.491, 522.575, 533.862, 539.442, 540.3924999999999, 544.281, 548.542, 553.063, 561.172, 566.771, 569.322, 570.1605, 571.64, 573.702, 575.751, 577.893, 583.282, 586.113, 588.364, 591.812, 598.322, 600.731, 602.793, 607.344, 612.002, 614.647, 618.012, 620.893, 623.042, 629.911, 637.173, 646.393, 648.601, 649.8620000000001, 655.662, 663.051, 673.975, 676.535, 682.026, 689.535, 693.612, 697.871, 704.622, 707.522, 710.452, 719.438, 726.871, 729.322, 732.839, 737.061, 739.311, 741.401, 749.414, 753.211, 754.912, 756.751, 762.944, 769.071, 771.131, 773.431, 780.201, 787.331, 792.209, 801.792, 806.722, 808.849, 811.591, 814.153, 816.074, 819.883, 825.971, 830.277, 832.432, 838.08, 843.811, 851.092, 853.629, 856.111, 860.551, 868.311, 870.545, 876.811, 880.444, 883.991, 886.811, 889.102, 898.631, 900.812, 906.602, 908.943, 910.941, 911.6205, 912.942, 914.791, 921.992, 924.672, 931.601, 935.871, 938.811, 939.8305, 941.492, 943.98, 946.681, 949.001, 955.111, 958.911, 962.918, 974.911, 986.691, 988.767, 997.122, 1007.312, 1012.211, 1017.78, 1031.3, 1039.791, 1050.94, 1063.073, 1066.662, 1074.615, 1076.753, 1078.931, 1088.25, 1091.011, 1093.652, 1100.202, 1108.86, 1111.853, 1114.731, 1117.3, 1124.041, 1129.923, 1139.771, 1147.442, 1150.361, 1154.05, 1158.91, 1166.082, 1169.52, 1172.77, 1176.983, 1183.581, 1186.041, 1189.33, 1192.642, 1195.991, 1198.949, 1201.11, 1206.657, 1211.56, 1215.91, 1216.6345000000001, 1218.001, 1222.59, 1223.9205, 1225.894, 1240.893, 1242.6015, 1244.951, 1246.91, 1251.529, 1257.379, 1260.78, 1267.51, 1269.911, 1273.79, 1275.98, 1279.232, 1285.5, 1290.106, 1294.98, 1299.17, 1304.43, 1317.55, 1320.392, 1327.991, 1330.12, 1335.31, 1338.54, 1348.36, 1351.25, 1353.92, 1360.12, 1363.141, 1367.73, 1371.89, 1374.842, 1377.041, 1379.113, 1381.47, 1384.32, 1389.264, 1391.76, 1394.22, 1398.572, 1400.788, 1404.6, 1407.41, 1409.97, 1412.467, 1415.51, 1417.799, 1426.48, 1434.729, 1437.079, 1439.239, 1443.52, 1448.453, 1451.399, 1454.7, 1458.66, 1461.91, 1469.999, 1482.072, 1487.31, 1490.97, 1494.84, 1503.619, 1514.16, 1518.17, 1521.899, 1524.18, 1531.89, 1534.732, 1539.099, 1541.231, 1546.471, 1548.69, 1559.119, 1563.68, 1567.809, 1571.919, 1574.389, 1576.479, 1580.29, 1582.388, 1584.66, 1585.1703333333335, 1585.6806666666666, 1589.11, 1601.639, 1603.783, 1618.141, 1626.619, 1632.146, 1633.337, 1638.141, 1641.661, 1644.161, 1655.25, 1658.8, 1661.33, 1669.629, 1673.38, 1678.529, 1685.16, 1689.48, 1692.09, 1697.071, 1700.857, 1705.689, 1708.06, 1713.111, 1715.51, 1717.899, 1721.049, 1723.75, 1727.011, 1733.999, 1741.584, 1744.423, 1751.07, 1760.05, 1763.49, 1772.049, 1774.189, 1780.336, 1781.5465, 1783.4, 1785.429, 1790.411, 1796.239, 1801.579, 1813.189, 1819.079, 1821.97, 1824.269, 1826.661, 1829.208, 1831.77, 1836.068, 1838.768, 1841.339, 1851.83, 1854.749, 1857.889, 1864.374, 1866.6165, 1869.503, 1871.639, 1879.319, 1883.49, 1887.758, 1893.385, 1897.335, 1909.749, 1920.9, 1928.28, 1939.918, 1965.809, 1971.149, 1973.869, 1981.403, 1989.951, 1996.969, 1999.47, 2002.628, 2005.975, 2009.692, 2012.708, 2015.0, 2020.539, 2026.319, 2034.938, 2037.028, 2043.809, 2049.838, 2052.349, 2059.609, 2062.618, 2066.848, 2069.138, 2070.9475, 2073.397, 2079.507, 2084.485, 2087.418, 2092.069, 2094.279, 2096.458, 2099.261, 2101.898, 2104.0575, 2109.348, 2114.99, 2117.888, 2120.928, 2128.219, 2135.091, 2139.359, 2143.728, 2145.966, 2152.818, 2158.078, 2161.019, 2163.808, 2166.48, 2172.032, 2176.748, 2180.118, 2182.702, 2202.478, 2215.278, 2217.46, 2222.668, 2230.243, 2235.288, 2238.618, 2248.888, 2251.779, 2259.329, 2264.45, 2268.998, 2271.188, 2275.627, 2278.158, 2280.398, 2285.298, 2288.089, 2301.418, 2323.787, 2329.438, 2332.39, 2341.607, 2343.787, 2344.5845, 2346.023, 2348.798, 2354.598, 2360.962, 2362.888, 2364.817, 2369.097, 2373.828, 2375.948, 2386.318, 2391.829, 2392.5625, 2393.937, 2396.618, 2399.607, 2400.6965, 2402.427, 2410.458, 2418.757, 2423.307, 2431.467, 2436.907, 2440.406, 2448.307, 2451.429, 2456.118, 2459.89, 2465.017, 2468.497, 2471.757, 2474.889, 2482.767, 2489.231, 2494.247, 2495.941, 2506.507, 2520.857, 2524.077, 2525.3815000000004, 2530.157, 2535.407, 2537.497, 2539.588, 2542.017, 2544.828, 2546.082, 2552.747, 2554.957, 2562.856, 2565.529, 2572.257, 2574.937, 2580.697, 2582.792, 2586.778, 2588.797, 2591.356, 2598.1, 2600.579, 2606.107, 2608.247, 2610.397, 2615.296, 2618.229, 2620.142, 2627.747, 2629.861, 2632.008, 2634.708, 2636.964, 2642.065, 2644.157, 2646.357, 2647.09, 2648.464, 2650.587, 2652.867, 2656.996, 2663.167, 2671.088, 2673.187, 2677.075, 2679.306, 2683.318, 2684.1175000000003, 2693.356, 2698.663, 2703.908, 2719.508, 2726.036, 2730.706, 2733.926, 2736.848, 2740.703, 2745.466, 2753.857, 2755.0665, 2759.767, 2765.006, 2778.768, 2788.917, 2793.327, 2795.327, 2800.623, 2809.067, 2812.994, 2817.356, 2820.808, 2824.987, 2828.937, 2832.016, 2835.302, 2852.569, 2855.937, 2859.281, 2861.387, 2863.512, 2870.167, 2872.797, 2875.456, 2877.717, 2882.997, 2893.988, 2897.266, 2899.686, 2914.857, 2919.276, 2928.156, 2930.586, 2942.585, 2966.436, 2969.116, 2982.727, 2984.767, 2989.206, 2993.627, 2997.786, 3007.126, 3009.516, 3020.807, 3022.747, 3025.076, 3027.186, 3031.326, 3036.037, 3043.855, 3046.115, 3047.42, 3053.176, 3059.996, 3062.188, 3065.267, 3071.866, 3088.227, 3096.918, 3098.987, 3103.229, 3112.075, 3125.048, 3129.036, 3131.836, 3139.864, 3140.7945, 3147.526, 3152.646, 3154.706, 3158.811, 3166.316, 3176.966, 3183.235, 3188.065, 3189.026, 3198.377, 3203.405, 3207.536, 3209.924, 3214.006, 3214.63, 3215.896, 3220.581, 3222.635, 3224.685, 3226.687, 3229.196, 3231.668, 3238.536, 3247.656, 3252.065, 3260.475, 3269.654, 3273.295, 3277.836, 3280.756, 3287.995, 3290.585, 3305.205, 3317.496, 3324.93, 3335.818, 3341.535, 3346.903, 3353.32, 3355.656, 3357.645, 3361.165, 3363.285, 3370.428, 3372.456, 3377.175, 3382.437, 3385.257, 3389.47, 3391.446, 3395.902, 3400.056, 3406.535, 3408.645, 3413.255, 3415.365, 3420.116, 3424.085, 3424.879, 3426.315, 3434.395, 3435.3585000000003, 3439.041, 3441.065, 3443.409, 3447.715, 3452.525, 3454.696, 3466.963, 3469.085, 3477.874, 3481.158, 3490.585, 3495.624, 3501.714, 3510.595, 3512.747, 3514.937, 3516.945, 3518.876, 3520.814, 3522.817, 3527.493, 3529.635, 3533.074, 3537.164, 3549.234, 3559.685, 3563.466, 3568.854, 3570.916, 3573.275, 3578.667, 3582.565, 3589.045, 3596.876, 3599.015, 3603.781, 3611.045, 3620.755, 3622.825, 3623.9645, 3625.744, 3628.378, 3636.054, 3636.827, 3640.86, 3645.166, 3647.545, 3648.319, 3649.735, 3652.47, 3655.904, 3660.246, 3663.685, 3672.054, 3674.686, 3683.685, 3686.396, 3691.096, 3693.945, 3697.388, 3700.465, 3704.295, 3707.026, 3719.939, 3724.759, 3729.145, 3731.56, 3734.024, 3736.073, 3742.685, 3744.726, 3746.655, 3751.534, 3756.695, 3758.873, 3768.334, 3776.233, 3779.044, 3783.804, 3786.497, 3791.836, 3797.574, 3805.676, 3807.995, 3811.488, 3814.744, 3817.024, 3823.605, 3826.796, 3829.764, 3831.964, 3843.266, 3844.1145, 3845.604, 3847.955, 3849.8225, 3852.332, 3854.547, 3861.154, 3874.343, 3877.714, 3879.904, 3881.949, 3882.7205000000004, 3890.424, 3892.774, 3900.154, 3902.035, 3904.104, 3906.546, 3908.966, 3920.874, 3923.084, 3925.394, 3929.545, 3938.273, 3940.713, 3946.444, 3949.364, 3952.453, 3962.764, 3970.173, 3972.284, 3974.394, 3976.514, 3978.464, 3982.484, 3988.433, 3989.288, 3990.784, 3993.004, 3999.566, 4001.897, 4010.663, 4014.504, 4016.806, 4019.104, 4022.675, 4025.634, 4030.623, 4035.516, 4037.713, 4042.023, 4049.498, 4056.053, 4059.353, 4061.744, 4066.054, 4069.944, 4078.484, 4082.624, 4086.384, 4088.486, 4093.353, 4096.604, 4100.163, 4103.254, 4104.214, 4105.816, 4111.183, 4115.674, 4119.031, 4129.153, 4132.103, 4143.171, 4145.642, 4155.774, 4165.203, 4174.923, 4178.162, 4180.533, 4196.423, 4203.553, 4207.883, 4212.063, 4213.0575, 4214.693, 4216.823, 4219.183, 4220.148, 4225.065, 4230.613, 4239.243, 4241.383, 4243.463, 4245.704, 4249.793, 4253.653, 4256.048, 4256.889999999999, 4260.494, 4265.453, 4271.984, 4275.003, 4280.157, 4284.653, 4286.893, 4291.804, 4296.575, 4298.823, 4301.603, 4309.773, 4313.373, 4320.683, 4322.991, 4329.173, 4336.722, 4342.533, 4350.032, 4353.933, 4356.185, 4358.287, 4360.664, 4369.023, 4371.462, 4374.352, 4376.685, 4378.753, 4388.512, 4393.083, 4401.064]
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '1', '1', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '-1', '-1', '0', '0', '0', '-1', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '-1', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '-1', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '-1', '0', '-1', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '-1', '-1', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '1', '0', '0', '-1', '0', '0', '0', '1', '1', '0', '0', '0', '0', '1', '0', '-1', '0', '0', '0', '-1', '-1', '-1', '1', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '1', '0', '-1', '0', '0', '-1', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '1', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '-1', '0', '0', '-1', '0', '0', '-1', '0', '0', '0', '-1', '0', '-1', '1', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '1', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '-1', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '-1', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '1', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '-1', '-1', '0', '0', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '0', '0', '0', '0', '0', '-1', '-1', '-1', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '-1', '1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '-1', '0', '0', '-1', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '0', '-1', '1', '0', '0', '0', '-1', '0', '0', '1', '0', '0', '0', '-1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '1', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '1', '1', '0', '0', '0', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '1', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '1', '0', '0', '0', '0', '0', '0', '1', '0', '0', '0', '0', '0', '-1', '-1', '0', '0', '0', '0', '-1', '0', '0', '0', '1', '0', '1', '0', '-1', '-1', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '1', '0', '1', '0', '0', '-1', '0', '-1', '0', '-1', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '-1', '0', '0', '0', '-1', '-1', '0', '1', '0', '-1', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '-1', '0', '-1', '0', '-1', '0', '0', '0', '0', '0', '-1', '-1', '-1', '-1', '1', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '-1', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1', '-1', '0', '0', '0', '0', '1', '0', '1', '1', '0', '0', '0', '0', '0', '0', '0', '-1', '-1', '1', '-1', '0', '1', '0', '-1', '0', '0', '0', '0', '0', '0', '-1', '0', '0', '0', '0', '0', '0', '0', '0', '1', '-1', '0', '1', '0', '0', '-1', '1', '0', '-1', '0'],
|
|
type: 'line'
|
|
}
|
|
]
|
|
};
|
|
|
|
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);
|
|
|
|
console.log(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);
|
|
|