enhancements

VANA-php/public/build/assets/app-iI2T_Ixf.css

@@ -1 +1 @@
-*,*:before,*:after{box-sizing:border-box}:root{--c1: #F2F2F2;--c2: #D9D9D9;--c3: #737373;--c4: #404040;--c5: #0D0D0D}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;text-size-adjust:none}*{margin:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5;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}h1,h2,h3,h4,button,input,label{line-height:1.1}fieldset{display:block;border:none;padding:0;margin:0}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}dl{display:grid;grid-template-areas:"title desc";gap:.5em 1em}dt{font-weight:600}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.tablist{height:100%;display:grid;grid-template:"tablist" "panel";grid-template-rows:2.5em 1fr}.controls{background:var(--c5)}.control{display:inline-block}.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:var(--c3)}a:focus,input:focus,input[type=radio]:focus+label{outline:2px dotted;outline-offset:2px}input[type=radio]+label:hover{cursor:pointer;text-decoration:underline}.panel{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}.vjs-title-bar{display:none!important}main{width:100%;height:calc(100vh - 3em);display:grid;grid-template-areas:"video tabs" "timeline timeline";grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 50%;gap:1em}#video{grid-area:video}#tabs{grid-area:tabs}#timeline{grid-area:timeline;position:relative;background:var(--c3)}#timeline-bar{height:2em;margin-left:20em;background:#aaa;display:flex;justify-content:space-between}#timeline-bar>span{display:inline-flex;align-items:center}#timeline-bar-ctrl{display:inline-block;background:#000;width:.1875em;height:100%;position:absolute}#timeline-bar-ctrl:before{content:"";width:2em;height:2em;border-radius:50%;transform:translate3d(-50%,0,0);background:#000;position:absolute}#tracks{height:calc(100% - 2em);overflow-y:scroll}.track{width:100%;min-height:15em;display:grid;grid-template:100% / 20em 1fr}.track+.track{border-top:1px solid var(--c1)}.track-ctrl{padding:1em;background:var(--c3)}.track-viz{background:var(--c3)}
+*,*:before,*:after{box-sizing:border-box}:root{--c1: #F2F2F2;--c2: #D9D9D9;--c3: #737373;--c4: #404040;--c5: #0D0D0D}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;text-size-adjust:none}*{margin:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5;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}h1,h2,h3,h4,button,input,label{line-height:1.1}fieldset{display:block;border:none;padding:0;margin:0}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}dl{display:grid;grid-template-areas:"title desc";gap:.5em 1em}dt{font-weight:600}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.tablist{height:100%;display:grid;grid-template:"tablist" "panel";grid-template-rows:2.5em 1fr}.controls{background:var(--c5)}.control{display:inline-block}.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:var(--c3)}a:focus,input:focus,input[type=radio]:focus+label{outline:2px dotted;outline-offset:2px}input[type=radio]+label:hover{cursor:pointer;text-decoration:underline}.panel{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}.vjs-title-bar{display:none!important}header{position:fixed;top:0;left:0;width:100%;background:#000;z-index:99;height:2.5em;display:flex;align-items:center;padding:0 2em}header a{text-decoration:none}header a:before{content:"←";padding:0 .5em 0 0}main{width:100%;margin-top:1.5em;height:calc(100vh - 6.5em);display:grid;grid-template-areas:"video tabs" "timeline timeline";grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 50%;gap:1em}#video{grid-area:video}#tabs{grid-area:tabs}#timeline{grid-area:timeline;position:relative;background:var(--c3)}#timeline-bar{height:2em;margin-left:20em;background:#aaa;display:flex;justify-content:space-between}#timeline-bar>span{display:inline-flex;align-items:center}#timeline-bar-ctrl{display:inline-block;background:#000;width:.1875em;height:100%;position:absolute}#timeline-bar-ctrl:before{content:"";width:2em;height:2em;border-radius:50%;transform:translate3d(-50%,0,0);background:#000;position:absolute}#tracks{height:calc(100% - 2em);overflow-y:scroll}.track{width:100%;min-height:15em;display:grid;grid-template:100% / 20em 1fr}.track+.track{border-top:1px solid var(--c1)}.track-ctrl{padding:1em;background:var(--c3)}.track-viz{background:var(--c3)}ul.segments{padding:0;grid-template:1fr / repeat(4,1fr);list-style:none;display:grid;grid-template:;height:100%}ul.segments li{background:#ccc;color:#000;border-left:.0625em solid #fff;padding:1em}

VANA-php/public/build/manifest.json

@@ -5,12 +5,12 @@
     "isEntry": true
   },
   "resources/css/app.css": {
-    "file": "assets/app-Brxm-Dry.css",
+    "file": "assets/app-iI2T_Ixf.css",
     "src": "resources/css/app.css",
     "isEntry": true
   },
   "resources/js/app.js": {
-    "file": "assets/app-Bj0O7PhW.js",
+    "file": "assets/app-NJQOXLgd.js",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true

VANA-php/resources/css/app.css

@@ -70,7 +70,6 @@ h2,
 h3,
 h4 {
     text-wrap: balance;
-
 }
 
 /* A elements that don't have a class get default styles */
@@ -193,9 +192,34 @@ input[type="radio"] + label:hover {
 
 
 /* Layout */
+header{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: #000;
+    z-index: 99;
+    height: 2.5em;
+    display: flex;
+    align-items: center;
+    padding: 0 2em;
+}
+
+header a{
+    text-decoration: none;
+
+}
+
+header a:before{
+    content: '←';
+    padding: 0 .5em 0 0;
+
+}
+
 main {
     width: 100%;
-    height: calc(100vh - 3em);
+    margin-top: 1.5em;
+    height: calc(100vh - 6.5em);
     display: grid;
     grid-template-areas: "video tabs" "timeline timeline";
     grid-template-columns: repeat(2, 1fr);
@@ -273,3 +297,18 @@ main {
     background: var(--c3);
 }
 
+ul.segments{
+    padding: 0;
+    grid-template: 1fr / repeat(4, 1fr);
+    list-style: none;
+    display: grid;
+    grid-template: ;
+    height: 100%;
+}
+
+ul.segments li{
+    background: #ccc;
+    color: #000;
+    border-left: .0625em solid #fff;
+    padding: 1em;
+}

VANA-php/resources/js/app.js

@@ -170,13 +170,8 @@ function timelineTimelabels(){
     document.querySelector('#timeline-bar').insertAdjacentHTML('beforeend', html);
 
     console.log(html)
-
-
-
 }
 
-
-
 /**
  * calcCurrenttimeByPosition
  * Calculate time to seek to, based on the position of the timelineIndicator.
@@ -199,7 +194,6 @@ player.on('timeupdate', e =>{
 /**
  * Initialize the timelineindicator
  **/
-
 document.addEventListener("DOMContentLoaded", (event) => {
     gsap.registerPlugin(Draggable)
     Draggable.create("#timeline-bar-ctrl", {
@@ -210,6 +204,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
         },
         onDragEnd: function () {
             player.currentTime(calcCurrenttimeByPosition(this.x));
+            player.play();
             status.timelineIndicatorIsDragged = false;
         },
     });
@@ -223,3 +218,26 @@ document.querySelector('#timeline-bar').addEventListener('click', e => {
     player.currentTime(calcCurrenttimeByPosition(x));
 })
 */
+
+function setTopicSegments(count){
+
+    let html = '';
+    for(let i = 1; i <= count; i++){
+        html += `<li>${i}</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);
+

VANA-php/resources/views/detail.blade.php

@@ -1,5 +1,8 @@
 @extends('base')
 @section('body')
+<header>
+    <a href="/">Episodenübersicht</a>
+</header>
 <main>
     <div id="video" data-urn="{{ $mediacomposition['chapterUrn'] }}">
         <video-js id="my-player" class="pillarbox-js" controls></video-js>
@@ -97,10 +100,17 @@
             </div>
             <div class="track">
                 <div class="track-ctrl">
-                    <h2>Anzahl Worte</h2>
+                    <h2>Topics</h2>
-                    <p></p>
+                    <input type="number" min="1" max="10" value="4" id="topic-track-segment-ctrl">
+                </div>
+                <div class="track-viz">
+                    <ul id="topic-segement-list" class="segments">
+                        <li>1</li>
+                        <li>2</li>
+                        <li>3</li>
+                        <li>4</li>
+                    </ul>
                 </div>
-                <div class="track-viz"></div>
             </div>
             <div class="track">
                 <div class="track-ctrl">