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 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,
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, 8

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, 205
  },
  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'
      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);