diff --git a/VANA-php/composer.json b/VANA-php/composer.json index 1d18c66..532c9f8 100644 --- a/VANA-php/composer.json +++ b/VANA-php/composer.json @@ -8,6 +8,7 @@ "php": "^8.2", "laravel/framework": "^11.9", "laravel/tinker": "^2.9", + "podlove/webvtt-parser": "^1.1", "survos/wikidata": "^5.0" }, "require-dev": { diff --git a/VANA-php/composer.lock b/VANA-php/composer.lock index 465e733..5c925aa 100644 --- a/VANA-php/composer.lock +++ b/VANA-php/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "203976b5f6a2ce845933702553914640", + "content-hash": "606f4e109407a96a42cc21723f1658f3", "packages": [ { "name": "brick/math", @@ -2396,6 +2396,57 @@ ], "time": "2024-07-20T21:41:07+00:00" }, + { + "name": "podlove/webvtt-parser", + "version": "v1.1.6", + "source": { + "type": "git", + "url": "https://github.com/podlove/webvtt-parser.git", + "reference": "04e78495dfee483d9ec646cac00bfd807328b011" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/podlove/webvtt-parser/zipball/04e78495dfee483d9ec646cac00bfd807328b011", + "reference": "04e78495dfee483d9ec646cac00bfd807328b011", + "shasum": "" + }, + "require": { + "php": ">=5.3.0" + }, + "require-dev": { + "phpunit/phpunit": "7.*.*" + }, + "type": "library", + "autoload": { + "psr-4": { + "Podlove\\Webvtt\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Eric Teubert", + "email": "eric@ericteubert.de", + "homepage": "https://ericteubert.de", + "role": "Developer" + } + ], + "description": "PHP library to parse webvtt", + "homepage": "https://github.com/podlove/webvtt-parser", + "keywords": [ + "parser", + "podlove", + "webvtt" + ], + "support": { + "issues": "https://github.com/podlove/webvtt-parser/issues", + "source": "https://github.com/podlove/webvtt-parser/tree/v1.1.6" + }, + "time": "2022-07-25T17:45:59+00:00" + }, { "name": "psr/clock", "version": "1.0.0", diff --git a/VANA-php/database.sqlite b/VANA-php/database.sqlite index 65cb37c..e69de29 100644 Binary files a/VANA-php/database.sqlite and b/VANA-php/database.sqlite differ diff --git a/VANA-php/resources/css/app.css b/VANA-php/resources/css/app.css index 3492ee0..76c5bbf 100644 --- a/VANA-php/resources/css/app.css +++ b/VANA-php/resources/css/app.css @@ -1,45 +1,52 @@ -/* CSS reset by https://piccalil.li/blog/a-more-modern-css-reset/ */ *, *::before, *::after { box-sizing: border-box; } +:root{ + --c1: #F2F2F2; + --c2: #D9D9D9; + --c3: #737373; + --c4: #404040; + --c5: #0D0D0D; +} + /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; + -webkit-font-smoothing: antialiased; text-size-adjust: none; } -/* Remove default margin in favour of better control in authored CSS */ -body, -h1, -h2, -h3, -h4, -p, -figure, -blockquote, -dl, -dd { - margin-block-end: 0; +*{ + margin: 0; } -/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role='list'], ol[role='list'] { list-style: none; } -/* Set core body defaults */ body { min-height: 100vh; line-height: 1.5; - margin: 0; + padding: 1.5em; + font-family: sans-serif; + background: var(--c4); + color: var(--c1); +} + +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +input, button, textarea, select { + font: inherit; } -/* Set shorter line heights on headings and interactive elements */ h1, h2, h3, @@ -63,6 +70,7 @@ h2, h3, h4 { text-wrap: balance; + } /* A elements that don't have a class get default styles */ @@ -71,13 +79,6 @@ a:not([class]) { color: currentColor; } -/* Make images easier to work with */ -img, -picture { - max-width: 100%; - display: block; -} - /* Inherit fonts for inputs and buttons */ input, button, @@ -100,6 +101,11 @@ textarea:not([rows]) { dl{ display: grid; grid-template-areas: "title desc" ; + gap: .5em 1em; +} + +dt{ + font-weight: 600; } .visually-hidden { @@ -116,11 +122,11 @@ dl{ height: 100%; display: grid; grid-template: "tablist" "panel"; - grid-template-rows: 2em 1fr; + grid-template-rows: 2.5em 1fr; } .controls{ - background: #ccc; + background: var(--c5); } .control { @@ -128,12 +134,16 @@ dl{ } .control label { + display: inline-grid; + justify-items: center; + align-items: center; padding: .5em 1em; + height: 2.5em; + color: var(--c1); } input[type="radio"]:checked + label { - background: #000; - color: #fff; + background: var(--c3); } a:focus, @@ -149,26 +159,47 @@ input[type="radio"] + label:hover { } .panel { - background: #eee; + background: var(--c3); padding: 1em; + height: calc(50vh - 4em); + overflow-y: scroll; } +#tablist_panel_transcript_panel font{ + display: block; + color: #fff !important +} + +#transcript{ + padding: 0; + list-style: none; +} + +#transcript a{ + cursor: pointer; +} + +#transcript li{ + display: flex; +} + +#transcript li>div{ + margin-right: 1em; +} + + /* Layout */ main { width: 100%; - height: 100vh; + height: calc(100vh - 3em); display: grid; grid-template-areas: "video tabs" "timeline timeline"; - grid-template-columns: 50% 50%; - grid-template-rows: 50% 50%; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr 50%; gap: 1em; } -main>div { - background: purple; -} - #video { grid-area: video; } @@ -180,6 +211,7 @@ main>div { #timeline { grid-area: timeline; position: relative; + background: var(--c3); } #timeline-bar{ @@ -212,7 +244,6 @@ main>div { } .track { - background: #ccc; width: 100%; min-height: 15em; display: grid; @@ -220,14 +251,15 @@ main>div { } .track + .track { - border-top: 1px solid #fff; + border-top: 1px solid var(--c1); } .track-ctrl{ - background: #ccc; + padding: 1em; + background: var(--c3); } .track-viz{ - background: #eee; + background: var(--c3); } diff --git a/VANA-php/resources/js/app.js b/VANA-php/resources/js/app.js index bb7a371..63e0a9f 100644 --- a/VANA-php/resources/js/app.js +++ b/VANA-php/resources/js/app.js @@ -1,3 +1,5 @@ +"use strict"; + import './bootstrap'; import Pillarbox from '@srgssr/pillarbox-web'; import { gsap } from "gsap"; @@ -5,6 +7,7 @@ import { Draggable } from "gsap/Draggable"; import * as echarts from 'echarts'; + // Tabs const tabs = document.querySelectorAll('input[type="radio"]'); tabs.forEach(tab => { @@ -31,48 +34,87 @@ var myChart = echarts.init(chartDom); var option; option = { + grid: { + top: 0, + bottom: 0, + right: 0, + left: 0 + }, + xAxis: { + type: 'time', + data: [0, 4.722, 7.537, 10.364, 14.103, 16.898, 20.082, 23.652, 35.462, 37.952, 40.222, 43.132, 46.902, 51.041, 54.442, 57.302, 60.062, 62.712, 65.822, 69.333, 72.013, 76.602, 79.521, 83.082, 86.825, 90.42, 93.734, 97.512, 100.594, 106.371, 108.752, 111.292, 114.304, 116.902, 119.991, 123.851, 128.193, 131.702, 135.749, 137.851, 140.301, 142.471, 145.302, 147.432, 151.712, 155.272, 160.093, 163.942, 181.852, 185.292, 190.261, 192.501, 194.804, 199.245, 204.112, 206.952, 209.419, 211.475, 213.641, 215.743, 217.881, 220.243, 222.712, 224.802, 226.811, 229.191, 231.891, 234.182, 236.784, 238.934, 242.421, 245.101, 247.711, 249.982, 252.841, 254.962, 257.612, 260.432, 263.971, 266.403, 270.611, 273.072, 275.331, 278.43, 281.71, 284.661, 287.514, 290.011, 292.362, 298.051, 301.111, 303.341, 306.641, 308.722, 310.732, 312.802, 315.101, 319.461, 323.131, 325.662, 328.103, 330.957, 334.924, 338.411, 342.032, 345.231, 348.711, 352.072, 354.371, 357.061, 359.215, 361.412, 363.651, 367.013, 369.491, 373.865, 377.531, 381.251, 384.065, 386.921, 389.416, 393.051, 395.471, 398.834, 402.411, 404.381, 407.361, 409.241, 411.181, 413.371, 415.241, 417.214, 419.211, 421.821, 424.042, 426.111, 429.101, 431.023, 435.403, 438.06, 440.226, 445.161, 449.621, 452.181, 457.771, 459.812, 461.811, 463.67, 465.541, 468.161, 470.31, 472.721, 474.711, 476.631, 478.851, 482.063, 484.901, 487.172, 490.38, 493.571, 496.286, 498.781, 501.751, 504.306, 507.31, 509.721, 512.14, 514.418, 516.64, 518.851, 521.933, 524.77, 533.221, 535.731, 538.801, 541.343, 543.639, 545.841, 547.9, 552.421, 556.634, 560.531, 563.322, 566.131, 568.681, 570.999, 573.061, 575.11, 577.251, 579.44, 582.641, 585.471, 587.721, 591.171, 595.69, 597.68, 600.091, 602.151, 604.241, 606.703, 608.819, 611.362, 614.006, 617.37, 620.253, 622.401, 624.901, 627.1, 629.27, 631.67, 636.532, 639.203, 645.751, 647.96, 651.123, 655.021, 657.51, 659.681, 662.41, 666.29, 673.334, 675.893, 678.791, 681.385, 684.82, 688.894, 690.97, 692.971, 694.951, 697.23, 700.88, 703.98, 706.88, 709.81, 713.181, 716.62, 718.797, 719.81, 723.76, 726.23, 728.681, 732.198, 736.42, 738.67, 740.76, 743.42, 745.66, 748.789, 750.59, 752.57, 754.27, 756.11, 758.14, 762.302, 766.11, 768.43, 770.49, 772.79, 776.637, 779.56, 782.87, 786.691, 788.81, 791.568, 794.34, 796.6, 798.71, 801.15, 803.3, 806.081, 808.2, 810.95, 813.512, 815.432, 817.322, 819.243, 821.162, 823.23, 825.33, 827.49, 829.636, 831.79, 834.09, 837.439, 840.77, 843.17, 846.2, 850.45, 852.987, 855.47, 857.631, 859.91, 862.03, 864.81, 867.67, 869.891, 873.052, 876.169, 879.803, 883.35, 886.17, 888.46, 893.982, 896.029, 897.99, 900.17, 902.74, 905.96, 908.301, 910.299, 912.3, 914.15, 916.12, 918.19, 921.35, 924.03, 927.799, 930.96, 933.01, 935.23, 938.17, 940.85, 943.339, 946.039, 948.36, 950.343, 952.4, 954.47, 956.352, 958.27, 960.232, 962.277, 964.309, 966.449, 969.66, 972.132, 974.27, 976.56, 980.619, 983.261, 986.05, 988.126, 990.457, 993.85, 996.479, 1003.59, 1006.67, 1011.57, 1017.14, 1026.48, 1030.659, 1033.729, 1036.742, 1039.15, 1046.311, 1050.299, 1052.589, 1054.699, 1057.86, 1062.432, 1066.021, 1066.919, 1071.629, 1073.97, 1076.113, 1078.29, 1080.79, 1087.61, 1090.369, 1093.009, 1095.12, 1097.271, 1099.561, 1102.279, 1105.989, 1108.219, 1111.209, 1114.09, 1116.659, 1123.399, 1127.01, 1129.282, 1133.727, 1139.129, 1143.399, 1146.8, 1149.72, 1153.409, 1158.269, 1161.99, 1165.441, 1168.88, 1172.129, 1174.269, 1176.342, 1181.039, 1182.94, 1185.4, 1188.689, 1192.001, 1195.349, 1198.309, 1200.469, 1202.759, 1206.017, 1208.21, 1210.919, 1213.309, 1215.269, 1217.359, 1219.96, 1225.251, 1233.285, 1244.31, 1246.269, 1248.339, 1250.889, 1253.302, 1256.739, 1260.139, 1262.72, 1266.869, 1269.27, 1273.149, 1275.339, 1278.591, 1284.859, 1287.19, 1289.464, 1292.142, 1294.338, 1296.449, 1298.529, 1300.969, 1303.789, 1305.829, 1307.879, 1309.739, 1312.548, 1314.829, 1316.909, 1319.75, 1321.922, 1324.629, 1327.35, 1329.478, 1331.866, 1334.669, 1337.899, 1341.539, 1347.718, 1350.609, 1353.279, 1356.219, 1359.479, 1362.5, 1364.568, 1367.09, 1369.127, 1371.249, 1374.201, 1376.4, 1378.472, 1380.828, 1383.678, 1385.878, 1388.619, 1391.119, 1393.579, 1395.699, 1397.93, 1400.146, 1403.959, 1406.769, 1409.329, 1411.825, 1414.868, 1417.159, 1420.298, 1423.549, 1425.839, 1430.471, 1434.088, 1436.439, 1438.598, 1440.684, 1442.879, 1445.069, 1447.811, 1450.759, 1454.058, 1458.018, 1461.269, 1465.209, 1469.358, 1475.548, 1481.431, 1483.449, 1490.328, 1494.199, 1502.978, 1505.388, 1510.068, 1513.519, 1517.529, 1521.258, 1523.538, 1527.398, 1531.253, 1534.089, 1538.458, 1540.588, 1545.83, 1548.048, 1552.13, 1555.088, 1558.478, 1560.548, 1563.038, 1565.109, 1567.169, 1569.259, 1571.278, 1573.748, 1575.838, 1577.72, 1579.649, 1581.746, 1584.019, 1586.191, 1588.469, 1591.73, 1595.128, 1598.788, 1600.999, 1603.143, 1605.327, 1610.178, 1612.428, 1617.501, 1621.319, 1625.978, 1628.508, 1631.504, 1634.528, 1637.501, 1641.02, 1643.52, 1645.648, 1648.818, 1652.458, 1654.608, 1658.159, 1660.688, 1662.82, 1664.908, 1668.988, 1672.738, 1677.887, 1680.598, 1682.469, 1684.518, 1686.825, 1688.839, 1691.449, 1693.898, 1696.431, 1700.217, 1702.608, 1705.048, 1707.42, 1709.798, 1712.467, 1714.868, 1717.257, 1720.408, 1723.109, 1726.37, 1730.927, 1733.358, 1736.188, 1738.888, 1740.943, 1743.782, 1746.058, 1753.83, 1762.849, 1765.817, 1771.408, 1773.548, 1777.068, 1779.695, 1782.757, 1787.458, 1789.77, 1795.598, 1797.948, 1800.937, 1803.918, 1808.048, 1812.548, 1818.438, 1821.328, 1823.628, 1826.02, 1828.568, 1831.128, 1835.427, 1838.127, 1840.698, 1844.968, 1854.107, 1857.247, 1859.437, 1861.518, 1863.732, 1868.859, 1870.997, 1875.137, 1878.678, 1882.848, 1887.117, 1892.744, 1896.688, 1902.978, 1907.019, 1909.107, 1912.977, 1917.788, 1920.259, 1923.607, 1927.639, 1931.307, 1934.948, 1939.277, 1943.959, 1951.548, 1956.827, 1960.609, 1963.037, 1965.167, 1967.888, 1970.508, 1973.228, 1976.427, 1978.469, 1980.762, 1982.892, 1986.928, 1989.309, 1992.427, 1996.329, 1998.829, 2001.987, 2005.332, 2009.046, 2012.067, 2014.359, 2016.471, 2019.897, 2023.347, 2025.678, 2027.737, 2029.847, 2034.297, 2036.387, 2038.877, 2043.167, 2049.197, 2051.708, 2054.28, 2056.428, 2058.967, 2061.976, 2066.206, 2068.496, 2072.757, 2075.087, 2078.867, 2081.417, 2083.844, 2086.777, 2088.897, 2091.429, 2093.637, 2095.815, 2098.617, 2101.257, 2106.217, 2108.707, 2111.287, 2114.349, 2117.247, 2120.287, 2124.067, 2127.577, 2131.81, 2134.449, 2138.717, 2140.858, 2143.087, 2145.325, 2147.387, 2150.097, 2152.176, 2154.673, 2157.437, 2160.377, 2163.167, 2165.836, 2168.398, 2171.391, 2176.107, 2179.477, 2182.06, 2188.856, 2194.167, 2197.336, 2201.836, 2209.366, 2214.637, 2216.819, 2219.057, 2222.026, 2226.688, 2229.597, 2232.528, 2234.647, 2237.976, 2241.836, 2244.217, 2248.247, 2251.137, 2254.977, 2258.689, 2263.809, 2265.937, 2268.357, 2270.546, 2272.727, 2274.987, 2277.518, 2279.757, 2284.657, 2287.447, 2290.736, 2295.659, 2300.777, 2305.586, 2312.266, 2319.407, 2323.146, 2325.856, 2328.796, 2331.749, 2334.267, 2337.621, 2340.966, 2343.146, 2345.382, 2348.156, 2351.028, 2353.957, 2356.259, 2358.312, 2360.321, 2362.246, 2364.176, 2366.106, 2368.456, 2370.566, 2373.187, 2375.308, 2385.677, 2388.326, 2391.187, 2393.296, 2395.976, 2398.966, 2401.786, 2407.0, 2409.817, 2412.105, 2414.835, 2418.116, 2420.511, 2422.666, 2425.99, 2430.826, 2434.016, 2436.266, 2439.767, 2443.237, 2447.666, 2450.786, 2452.996, 2455.477, 2459.247, 2462.167, 2464.376, 2467.856, 2471.116, 2474.247, 2476.376, 2479.26, 2482.126, 2485.226, 2488.59, 2490.656, 2493.607, 2497.635, 2499.748, 2501.886, 2505.866, 2508.646, 2513.976, 2518.196, 2520.216, 2523.436, 2526.686, 2529.517, 2532.127, 2534.766, 2536.856, 2538.946, 2541.377, 2544.186, 2547.336, 2552.106, 2554.315, 2558.816, 2562.216, 2564.278, 2567.497, 2569.415, 2571.616, 2574.296, 2578.068, 2580.056, 2582.146, 2584.116, 2586.138, 2588.156, 2590.716, 2592.849, 2595.296, 2597.458, 2599.936, 2602.396, 2605.466, 2607.606, 2609.761, 2612.256, 2614.656, 2617.586, 2622.055, 2624.558, 2627.106, 2629.219, 2631.366, 2634.066, 2636.322, 2638.485, 2641.423, 2643.515, 2645.716, 2647.823, 2649.946, 2652.226, 2654.316, 2656.355, 2658.636, 2662.526, 2665.906, 2667.956, 2670.446, 2672.545, 2674.485, 2676.435, 2678.666, 2680.644, 2682.676, 2684.917, 2686.856, 2689.006, 2692.715, 2695.706, 2698.022, 2700.256, 2703.266, 2705.436, 2722.916, 2725.395, 2727.927, 2730.066, 2733.286, 2736.207, 2740.061, 2744.825, 2750.455, 2753.216, 2756.276, 2759.126, 2761.315, 2764.365, 2769.475, 2772.325, 2774.516, 2778.127, 2780.365, 2783.145, 2785.547, 2788.276, 2790.475, 2792.685, 2794.687, 2797.877, 2799.982, 2803.625, 2808.426, 2810.191, 2812.354, 2816.715, 2820.167, 2824.346, 2828.296, 2831.375, 2834.661, 2837.966, 2855.295, 2858.64, 2860.745, 2862.871, 2864.977, 2867.185, 2869.525, 2872.155, 2874.815, 2877.077, 2879.341, 2882.356, 2884.525, 2887.225, 2890.335, 2893.347, 2896.626, 2899.045, 2901.985, 2908.769, 2911.075, 2914.215, 2916.516, 2918.635, 2921.265, 2924.696, 2927.515, 2929.945, 2933.906, 2938.546, 2941.942, 2946.566, 2949.955, 2952.318, 2955.355, 2957.515, 2960.715, 2965.795, 2968.475, 2970.625, 2973.026, 2978.155, 2980.005, 2982.085, 2984.126, 2986.136, 2988.565, 2990.515, 2992.986, 2994.965, 2997.145, 3001.285, 3003.895, 3006.484, 3008.875, 3011.455, 3014.015, 3015.8, 3018.125, 3020.163, 3022.105, 3024.434, 3026.545, 3028.604, 3030.685, 3033.145, 3035.395, 3039.605, 3043.215, 3045.475, 3048.725, 3052.535, 3055.345, 3059.354, 3061.546, 3064.624, 3068.324, 3071.226, 3074.315, 3077.704, 3080.646, 3084.245, 3087.586, 3093.344, 3096.276, 3098.345, 3100.435, 3102.585, 3105.995, 3108.035, 3111.434, 3113.799, 3116.645, 3118.785, 3121.865, 3124.405, 3128.394, 3131.196, 3136.895, 3139.225, 3141.725, 3146.884, 3149.092, 3152.004, 3154.065, 3156.117, 3158.17, 3162.035, 3165.674, 3168.494, 3170.944, 3173.675, 3176.325, 3179.275, 3182.594, 3185.005, 3187.425, 3189.987, 3192.266, 3194.345, 3197.734, 3200.024, 3202.764, 3204.885, 3206.894, 3209.284, 3211.195, 3213.365, 3215.254, 3217.605, 3219.94, 3221.994, 3224.044, 3226.047, 3228.555, 3231.031, 3237.895, 3242.186, 3244.367, 3247.015, 3249.205, 3251.424, 3255.019, 3259.834, 3264.019, 3269.019, 3272.654, 3274.782, 3277.194, 3280.114, 3287.354, 3289.944, 3295.134, 3299.295, 3301.765, 3304.564, 3307.096, 3309.876, 3313.424, 3316.854, 3321.944, 3324.287, 3330.159, 3332.736, 3335.176, 3337.534, 3340.894, 3346.262, 3348.534, 3350.587, 3352.679, 3355.013, 3357.004, 3360.524, 3362.644, 3365.574, 3369.785, 3374.484, 3376.534, 3378.742, 3381.795, 3384.614, 3386.804, 3388.829, 3390.804, 3392.764, 3395.261, 3397.364, 3399.414, 3402.104, 3405.894, 3408.004, 3410.354, 3412.614, 3414.724, 3416.829, 3419.474, 3423.444, 3425.673, 3427.865, 3431.124, 3433.754, 3436.322, 3438.4, 3440.424, 3442.767, 3444.958, 3447.074, 3449.183, 3451.884, 3454.054, 3455.984, 3459.416, 3461.674, 3464.285, 3466.323, 3468.444, 3470.624, 3473.624, 3477.233, 3480.518, 3482.734, 3485.454, 3489.944, 3492.164, 3494.983, 3498.462, 3501.073, 3503.774, 3506.804, 3509.954, 3512.105, 3514.297, 3516.304, 3518.236, 3520.174, 3522.176, 3524.185, 3526.851, 3528.994, 3532.434, 3534.465, 3536.524, 3538.9, 3542.014, 3545.704, 3548.593, 3551.671, 3556.944, 3559.044, 3562.824, 3565.319, 3568.213, 3570.275, 3572.634, 3574.804, 3578.025, 3581.923, 3584.914, 3588.403, 3592.974, 3596.236, 3598.374, 3600.573, 3603.14, 3605.793, 3607.926, 3610.404, 3614.107, 3620.113, 3622.183, 3625.104, 3627.734, 3630.601, 3635.413, 3637.6, 3640.217, 3644.526, 3646.903, 3649.093, 3651.823, 3655.263, 3657.404, 3659.604, 3663.043, 3666.686, 3671.413, 3674.043, 3678.814, 3683.045, 3685.754, 3688.303, 3690.453, 3693.304, 3696.744, 3699.823, 3703.654, 3706.383, 3709.823, 3713.633, 3716.493, 3719.298, 3721.614, 3724.115, 3726.35, 3728.504, 3730.918, 3733.384, 3735.428, 3737.954, 3739.813, 3742.043, 3744.084, 3746.014, 3748.673, 3750.893, 3756.054, 3758.232, 3761.473, 3767.693, 3770.033, 3773.064, 3775.593, 3778.403, 3780.813, 3783.163, 3785.474, 3788.693, 3791.194, 3793.643, 3796.933, 3799.143, 3801.033, 3803.053, 3805.036, 3807.355, 3810.847, 3814.103, 3816.383, 3819.973, 3822.963, 3826.156, 3829.123, 3831.323, 3833.303, 3835.363, 3837.385, 3840.433, 3842.624, 3844.963, 3847.313, 3851.69, 3853.906, 3856.043, 3858.115, 3860.513, 3862.662, 3864.794, 3867.193, 3869.282, 3871.293, 3873.703, 3877.073, 3879.262, 3881.304, 3883.492, 3885.793, 3887.683, 3889.783, 3892.129, 3894.363, 3896.882, 3899.512, 3901.394, 3903.463, 3905.905, 3908.325, 3912.1, 3915.243, 3920.232, 3922.443, 3924.753, 3926.883, 3928.908, 3931.114, 3933.137, 3935.451, 3937.633, 3940.073, 3942.582, 3945.803, 3948.723, 3951.812, 3954.722, 3957.012, 3962.123, 3967.082, 3969.532, 3971.643, 3973.752, 3975.872, 3977.823, 3979.741, 3981.843, 3983.743, 3985.742, 3987.792, 3990.143, 3992.363, 3996.513, 3998.923, 4001.254, 4004.142, 4007.802, 4010.022, 4013.863, 4016.164, 4018.466, 4022.034, 4024.992, 4027.455, 4029.983, 4032.173, 4034.873, 4037.072, 4039.912, 4041.382, 4046.65, 4048.852, 4051.061, 4055.412, 4058.712, 4061.103, 4065.413, 4069.303, 4077.843, 4081.982, 4085.743, 4087.843, 4090.472, 4092.712, 4095.963, 4099.523, 4102.613, 4105.174, 4107.834, 4110.542, 4115.033, 4118.39, 4122.885, 4125.394, 4128.511, 4131.462, 4135.693, 4137.957, 4140.193, 4142.532, 4145.001, 4148.232, 4151.301, 4155.131, 4157.923, 4160.027, 4162.256, 4164.562, 4167.542, 4172.122, 4174.282, 4177.522, 4179.892, 4183.582, 4188.631, 4191.131, 4195.782, 4198.012, 4200.732, 4202.912, 4205.185, 4207.242, 4209.356, 4211.421, 4214.052, 4216.182, 4218.542, 4221.113, 4224.424, 4226.682, 4229.971, 4235.592, 4238.602, 4240.743, 4242.822, 4245.063, 4249.153, 4253.016, 4255.407, 4257.732, 4259.852, 4262.562, 4264.812, 4268.282, 4271.342, 4274.362, 4279.512, 4284.012, 4286.252, 4288.592, 4291.163, 4293.794, 4295.934, 4298.182, 4300.961, 4306.692, 4309.132, 4312.732, 4317.283, 4320.041, 4322.351, 4324.905, 4328.532, 4333.891, 4336.082, 4338.603, 4341.891, 4346.95, 4349.392, 4351.452, 4353.291, 4355.544, 4357.645, 4360.022, 4363.552, 4368.382, 4370.821, 4373.711, 4376.041, 4378.112, 4380.162, 4382.394, 4384.972, 4387.871, 4392.442, 4395.131, 4400.423, 4401.482], + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false + }, + + }, + yAxis: { + type: 'value', + axisLabel: { + inside: false + } + }, + series: [ + { + data: [0, 5, 17, 28, 37, 46, 50, 55, 59, 62, 68, 72, 82, 87, 93, 97, 105, 109, 115, 122, 127, 136, 142, 148, 155, 164, 169, 177, 184, 192, 194, 198, 208, 215, 223, 229, 240, 249, 258, 264, 274, 281, 288, 293, 301, 307, 315, 323, 329, 342, 352, 358, 363, 374, 384, 395, 402, 406, 412, 416, 423, 429, 435, 444, 450, 457, 465, 473, 476, 479, 488, 492, 499, 505, 513, 515, 525, 533, 541, 547, 555, 563, 569, 578, 583, 588, 594, 602, 605, 613, 623, 629, 635, 641, 648, 656, 666, 674, 681, 690, 699, 708, 717, 725, 733, 736, 742, 752, 756, 764, 768, 775, 780, 785, 792, 800, 809, 815, 824, 829, 836, 846, 853, 864, 872, 875, 882, 889, 892, 903, 909, 916, 921, 932, 940, 945, 958, 961, 970, 977, 984, 992, 997, 1004, 1014, 1021, 1028, 1037, 1040, 1047, 1055, 1063, 1067, 1074, 1084, 1093, 1102, 1107, 1113, 1118, 1129, 1134, 1141, 1146, 1157, 1161, 1166, 1174, 1179, 1185, 1192, 1197, 1206, 1212, 1220, 1228, 1233, 1241, 1246, 1259, 1271, 1279, 1285, 1293, 1294, 1304, 1310, 1315, 1323, 1334, 1342, 1350, 1355, 1365, 1372, 1375, 1383, 1392, 1398, 1408, 1413, 1420, 1427, 1437, 1447, 1452, 1462, 1468, 1475, 1480, 1492, 1496, 1501, 1507, 1518, 1530, 1535, 1539, 1548, 1554, 1567, 1570, 1579, 1585, 1597, 1606, 1610, 1618, 1623, 1626, 1633, 1643, 1649, 1656, 1663, 1673, 1679, 1684, 1693, 1699, 1704, 1715, 1718, 1729, 1735, 1744, 1750, 1758, 1764, 1768, 1777, 1785, 1792, 1803, 1815, 1820, 1827, 1835, 1842, 1853, 1859, 1869, 1874, 1885, 1892, 1896, 1904, 1913, 1919, 1930, 1935, 1948, 1956, 1960, 1967, 1976, 1983, 1992, 1995, 2006, 2011, 2016, 2024, 2035, 2041, 2047, 2056, 2061, 2068, 2077, 2082, 2090, 2093, 2104, 2113, 2116, 2127, 2134, 2140, 2149, 2155, 2163, 2170, 2176, 2185, 2191, 2199, 2209, 2216, 2221, 2227, 2232, 2237, 2245, 2255, 2261, 2267, 2274, 2282, 2287, 2295, 2304, 2311, 2322, 2332, 2337, 2344, 2348, 2354, 2362, 2369, 2377, 2381, 2391, 2404, 2411, 2419, 2426, 2433, 2444, 2456, 2461, 2468, 2476, 2479, 2484, 2487, 2496, 2507, 2516, 2523, 2528, 2539, 2545, 2550, 2557, 2567, 2572, 2581, 2588, 2594, 2601, 2606, 2613, 2618, 2624, 2630, 2639, 2646, 2653, 2656, 2661, 2667, 2672, 2682, 2685, 2695, 2705, 2710, 2717, 2726, 2728, 2736, 2741, 2747, 2755, 2760, 2769, 2775, 2782, 2790, 2792, 2802, 2807, 2817, 2824, 2827, 2833, 2839, 2843, 2852, 2862, 2866, 2875, 2887, 2892, 2901, 2907, 2912, 2921, 2931, 2936, 2944, 2949, 2957, 2961, 2969, 2974, 2984, 2991, 2997, 3004, 3012, 3020, 3026, 3037, 3048, 3055, 3061, 3067, 3074, 3079, 3084, 3093, 3107, 3110, 3118, 3124, 3135, 3141, 3147, 3157, 3161, 3169, 3178, 3186, 3195, 3202, 3208, 3220, 3231, 3236, 3244, 3257, 3266, 3277, 3284, 3294, 3299, 3304, 3315, 3323, 3328, 3338, 3348, 3353, 3364, 3372, 3378, 3384, 3390, 3399, 3409, 3417, 3425, 3436, 3444, 3451, 3461, 3469, 3476, 3480, 3490, 3496, 3501, 3510, 3518, 3521, 3529, 3537, 3545, 3553, 3564, 3570, 3578, 3585, 3592, 3596, 3606, 3614, 3622, 3631, 3639, 3647, 3654, 3665, 3670, 3681, 3688, 3694, 3705, 3711, 3721, 3728, 3733, 3743, 3749, 3751, 3763, 3767, 3774, 3781, 3785, 3794, 3801, 3805, 3809, 3813, 3821, 3830, 3839, 3849, 3854, 3864, 3867, 3875, 3880, 3889, 3895, 3903, 3909, 3922, 3926, 3933, 3945, 3956, 3964, 3973, 3978, 3987, 3997, 4004, 4009, 4018, 4024, 4034, 4045, 4053, 4061, 4066, 4074, 4080, 4087, 4092, 4103, 4112, 4115, 4122, 4128, 4137, 4141, 4153, 4160, 4164, 4172, 4181, 4188, 4195, 4202, 4211, 4222, 4233, 4238, 4247, 4253, 4256, 4259, 4270, 4282, 4288, 4296, 4304, 4317, 4327, 4331, 4338, 4344, 4350, 4357, 4363, 4368, 4371, 4383, 4392, 4400, 4406, 4416, 4422, 4432, 4440, 4451, 4458, 4467, 4471, 4478, 4485, 4493, 4496, 4508, 4512, 4519, 4529, 4534, 4540, 4549, 4556, 4559, 4566, 4573, 4578, 4589, 4596, 4604, 4611, 4620, 4630, 4642, 4651, 4660, 4662, 4669, 4675, 4680, 4686, 4692, 4696, 4703, 4708, 4717, 4720, 4729, 4741, 4749, 4759, 4764, 4771, 4779, 4788, 4790, 4795, 4804, 4811, 4814, 4822, 4832, 4836, 4845, 4853, 4862, 4870, 4877, 4882, 4889, 4891, 4901, 4908, 4918, 4927, 4933, 4940, 4949, 4953, 4960, 4968, 4973, 4982, 4992, 5000, 5006, 5014, 5020, 5030, 5034, 5042, 5053, 5064, 5070, 5080, 5088, 5094, 5099, 5106, 5112, 5122, 5125, 5132, 5135, 5144, 5149, 5155, 5161, 5170, 5182, 5188, 5193, 5207, 5213, 5223, 5230, 5240, 5252, 5255, 5264, 5270, 5276, 5284, 5292, 5297, 5306, 5311, 5317, 5322, 5324, 5333, 5341, 5351, 5359, 5368, 5374, 5380, 5387, 5391, 5395, 5407, 5409, 5415, 5423, 5433, 5441, 5448, 5460, 5465, 5470, 5473, 5477, 5482, 5492, 5497, 5503, 5513, 5523, 5530, 5541, 5549, 5553, 5562, 5566, 5574, 5579, 5587, 5593, 5602, 5611, 5621, 5629, 5636, 5644, 5650, 5658, 5667, 5679, 5686, 5690, 5699, 5708, 5714, 5723, 5732, 5741, 5749, 5755, 5762, 5774, 5784, 5791, 5798, 5807, 5813, 5822, 5827, 5838, 5845, 5848, 5855, 5863, 5869, 5877, 5880, 5884, 5892, 5900, 5904, 5909, 5920, 5925, 5933, 5943, 5947, 5956, 5968, 5974, 5977, 5984, 5989, 5994, 6002, 6011, 6018, 6025, 6028, 6039, 6048, 6053, 6059, 6065, 6075, 6082, 6089, 6094, 6099, 6104, 6111, 6117, 6127, 6132, 6140, 6148, 6156, 6163, 6171, 6174, 6179, 6186, 6194, 6203, 6213, 6220, 6227, 6232, 6239, 6248, 6254, 6262, 6270, 6275, 6283, 6291, 6295, 6304, 6311, 6318, 6324, 6332, 6344, 6352, 6362, 6370, 6377, 6384, 6393, 6400, 6408, 6418, 6424, 6431, 6439, 6443, 6451, 6455, 6463, 6470, 6472, 6475, 6485, 6492, 6501, 6511, 6520, 6528, 6543, 6549, 6557, 6566, 6573, 6581, 6593, 6599, 6604, 6611, 6614, 6622, 6632, 6644, 6648, 6657, 6662, 6673, 6678, 6686, 6695, 6699, 6710, 6717, 6731, 6738, 6747, 6752, 6761, 6771, 6780, 6788, 6792, 6801, 6805, 6812, 6820, 6830, 6835, 6843, 6848, 6859, 6864, 6875, 6884, 6894, 6901, 6905, 6913, 6923, 6931, 6942, 6947, 6952, 6957, 6966, 6973, 6980, 6989, 6995, 7004, 7014, 7019, 7026, 7033, 7039, 7047, 7051, 7059, 7064, 7073, 7077, 7085, 7094, 7100, 7108, 7117, 7124, 7135, 7140, 7149, 7161, 7169, 7174, 7180, 7185, 7195, 7203, 7210, 7215, 7222, 7232, 7239, 7247, 7255, 7265, 7272, 7281, 7290, 7294, 7304, 7309, 7315, 7322, 7327, 7337, 7347, 7354, 7362, 7369, 7377, 7384, 7391, 7403, 7412, 7416, 7420, 7424, 7431, 7437, 7446, 7451, 7457, 7465, 7472, 7479, 7487, 7496, 7502, 7512, 7521, 7534, 7539, 7548, 7555, 7558, 7564, 7572, 7584, 7588, 7593, 7601, 7613, 7626, 7629, 7638, 7646, 7655, 7660, 7664, 7670, 7676, 7685, 7692, 7696, 7707, 7714, 7723, 7729, 7740, 7749, 7756, 7762, 7771, 7779, 7786, 7797, 7806, 7813, 7819, 7825, 7830, 7836, 7844, 7853, 7860, 7867, 7869, 7876, 7881, 7889, 7896, 7906, 7915, 7919, 7925, 7929, 7934, 7938, 7945, 7952, 7955, 7963, 7968, 7975, 7979, 7987, 7997, 8003, 8009, 8015, 8019, 8023, 8033, 8037, 8045, 8057, 8064, 8069, 8076, 8083, 8094, 8098, 8106, 8116, 8121, 8129, 8131, 8135, 8145, 8150, 8152, 8159, 8167, 8175, 8181, 8189, 8199, 8207, 8211, 8220, 8226, 8235, 8240, 8248, 8259, 8268, 8276, 8284, 8291, 8299, 8302, 8312, 8318, 8325, 8330, 8336, 8346, 8354, 8362, 8372, 8377, 8384, 8396, 8402, 8411, 8418, 8429, 8432, 8437, 8450, 8456, 8466, 8471, 8479, 8485, 8494, 8500, 8511, 8517, 8529, 8534, 8542, 8547, 8561, 8571, 8581, 8587, 8600, 8604, 8613, 8619, 8629, 8632, 8642, 8651, 8661, 8669, 8675, 8686, 8698, 8709, 8711, 8716, 8723, 8727, 8733, 8740, 8751, 8762, 8766, 8777, 8782, 8785, 8788, 8795, 8801, 8807, 8812, 8822, 8828, 8833, 8839, 8846, 8850, 8857, 8867, 8877, 8885, 8891, 8901, 8907, 8914, 8923, 8934, 8940, 8952, 8959, 8965, 8971, 8980, 8985, 8993, 9005, 9013, 9017, 9026, 9037, 9043, 9055, 9061, 9071, 9076, 9083, 9095, 9100, 9110, 9113, 9123, 9130, 9133, 9142, 9146, 9153, 9159, 9163, 9169, 9177, 9186, 9194, 9206, 9213, 9219, 9223, 9231, 9239, 9250, 9259, 9267, 9272, 9283, 9289, 9297, 9308, 9312, 9316, 9321, 9330, 9338, 9344, 9351, 9358, 9362, 9367, 9372, 9378, 9385, 9390, 9398, 9402, 9410, 9417, 9426, 9430, 9437, 9443, 9452, 9457, 9465, 9470, 9476, 9486, 9496, 9498, 9504, 9512, 9517, 9526, 9533, 9541, 9548, 9556, 9566, 9571, 9580, 9587, 9595, 9602, 9607, 9614, 9622, 9629, 9639, 9651, 9659, 9664, 9674, 9682, 9688, 9694, 9696, 9699, 9705, 9711, 9716, 9722, 9730, 9739, 9749, 9758, 9766, 9772, 9782, 9791, 9794, 9805, 9809, 9817, 9826, 9832, 9840, 9850, 9857, 9866, 9872, 9877, 9881, 9888, 9893, 9900, 9908, 9918, 9927, 9937, 9949, 9960, 9970, 9976, 9981, 9992, 9995, 10002, 10013, 10024, 10032, 10037, 10050, 10060, 10068, 10079, 10087, 10093, 10098, 10104, 10111, 10116, 10126, 10134, 10141, 10151, 10160, 10165, 10171, 10176, 10185, 10197, 10206, 10214, 10224, 10233, 10239, 10248, 10256, 10267, 10272, 10278, 10283, 10291, 10298, 10306, 10313, 10324, 10325, 10335, 10341, 10351, 10355, 10366, 10378, 10388, 10394, 10397, 10403, 10412, 10420, 10425, 10434, 10442, 10454, 10463, 10472, 10477, 10483, 10493, 10505, 10516, 10528, 10530, 10542, 10549, 10557, 10569, 10580, 10585, 10593, 10602, 10610, 10616, 10622, 10634, 10640, 10648, 10652, 10662, 10673, 10683, 10688, 10692, 10700, 10704, 10714, 10725, 10730, 10741, 10748, 10758, 10763, 10770, 10774, 10781, 10794, 10803, 10813, 10826, 10827], + type: 'line', + lineStyle: { + color: '#fff', + }, + } + ] + } +; + +option && myChart.setOption(option); + +var chartDom2 = document.querySelectorAll('.track')[1].querySelector('.track-viz'); +var myChart2 = echarts.init(chartDom2); +var option2; + +option2 = { + grid: { + top: 0, + bottom: 0, + right: 0, + left: 0 + }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + 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: [150, 230, 224, 218, 135, 147, 260], + 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' } ] }; -option && myChart.setOption(option); +option2 && myChart2.setOption(option2); + + // VIDEO + + const video = document.getElementById('video'); // Timeline draggable gsap.registerPlugin(Draggable); -const status = { - dragging: false -} -document.addEventListener("DOMContentLoaded", (event) => { - gsap.registerPlugin(Draggable) - Draggable.create("#timeline-bar-ctrl", { - type: "x", - bounds: document.getElementById("timeline-bar"), - onDragStart: function () { - //console.log("clicked"); - status.dragging = true; - }, - onDragEnd: function () { - //console.log("drag ended"); - status.dragging = false; - }, - }); -}); + + const player = new Pillarbox('my-player', { controls: false, @@ -84,22 +126,11 @@ const player = new Pillarbox('my-player', { player.src({ src: video.getAttribute('data-urn'), type: 'srgssr/urn' }); -const timelineBarCtrl = document.getElementById('timeline-bar-ctrl'); +const timelineIndicator = document.getElementById('timeline-bar-ctrl'); + + -function setTimeLine(){ - let vidLen = player.duration(); - let timeLineLen = document.querySelector('#timeline-bar').offsetWidth; - let position = (timeLineLen / vidLen) * player.currentTime(); - timelineBarCtrl.style.transform = `translate3d(${position}px, 0px, 0px)`; -} -/* -document.querySelector('#timeline-bar').addEventListener('click', e => { - let pos = e.clientX - e.target.offsetLeft; - let len = e.target.offsetLeft; - let time = (player.duration() / len) * pos; - player.currentTime(time); -})*/ // Play / Pause video @@ -107,14 +138,71 @@ video.addEventListener('click', _ => { player.paused() ? player.play() : player.pause(); }) -player.on('timeupdate', _ =>{ - // console.log(status.dragging); - if(!status.dragging){ - setTimeLine(); + + + +// 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')); + }); +}); + + +/************ + * Timeline * + ************/ + +const status = { + timelineIndicatorIsDragged: false +} + +/** + * 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)); + 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)); +}) +*/ diff --git a/VANA-php/resources/views/detail.blade.php b/VANA-php/resources/views/detail.blade.php index 525926c..0b6ce64 100644 --- a/VANA-php/resources/views/detail.blade.php +++ b/VANA-php/resources/views/detail.blade.php @@ -49,7 +49,26 @@
TRANSCRIPT
+