last changes

VANA-php/resources/css/app.css

@@ -187,6 +187,9 @@ input[type="radio"] + label:hover {
     margin-right: 1em;
 }
 
+.vjs-title-bar{
+    display: none !important;
+}
 
 
 /* Layout */
@@ -218,6 +221,13 @@ main {
     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{

VANA-php/resources/js/app.js

@@ -132,15 +132,12 @@ 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]');
@@ -148,6 +145,7 @@ const transcript_cues = transcript.querySelectorAll('[data-start]');
 transcript_cues.forEach(c => {
     c.addEventListener('click', (e) => {
         player.currentTime(e.target.getAttribute('data-start'));
+        player.play();
     });
 });
 
@@ -160,6 +158,25 @@ 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.

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

@@ -54,13 +54,7 @@
                     @foreach($subtitles['cues'] as $cue)
                     <li>
                         <div>
-                            <a title="Zur Zeitpunkt {{ $cue['start']}} springen." data-start="{{ $cue['start']}}">
-                                {{ $cue['start']}}
-                            </a>
-                            &mdash;
-                            <span>
-                                {{ $cue['end']}}
-                            </span>
+                            <a title="Zur Zeitpunkt {{ $cue['start']}} springen." data-start="{{ $cue['start']}}">{{ gmdate('H:i:s', $cue['start'])}}</a>
                         </div>
                         <div>
                             {!! $cue['text'] !!}
@@ -74,24 +68,7 @@
                 <h2 class="visually-hidden">
                     Begriffe (Tabinhalt)
                 </h2>
-                <h3>
-                    Some info about terms
-                </h3>
-                <p>
-                    Bla bla bla... all about terms...
-                </p>
-                <p>
-                    <img alt="A beautiful terms" src="..." />
-                </p>
-                <p>
-                    A link to a page with <a href="#">more infos about terms</a>!
-                </p>
-                <h3>
-                    More elements can come here related to terms
-                </h3>
-                <p>
-                    Maybe even some form element where you can enter a name for your terms: <input type="text" />
-                </p>
+
             </div>
         </div>
 
@@ -99,6 +76,9 @@
     <div id="timeline">
         <div id="timeline-bar">
             <div id="timeline-bar-ctrl"></div>
+            @for($i = 0; $i <= 10; $i++)
+                <span>{{ gmdate('H:i:s', $i * $durationSteps) }}</span>
+            @endfor
         </div>
         <div id="tracks">
             <div class="track">

VANA-php/routes/web.php

@@ -2,6 +2,7 @@
 
 use App\Models\Episode as EpisodeModel;
 use App\Subtitles as AppSubtitles;
+use App\Helpers;
 use Illuminate\Support\Facades\Route;
 use Wikidata\Wikidata;
 use Podlove\Webvtt\Parser;
@@ -23,11 +24,12 @@ Route::get('/detail/{id}', function(int $id) {
     $title = $ep->title;
     $subtitles = $ep->subtitles;
     $mediacomposition = json_decode($ep->mediacomposition, 1);
+    $durationSteps = $mediacomposition['chapterList'][0]['duration'] / 1000 / 10;
 
     $parser = new Podlove\Webvtt\Parser();
     $subtitles = $parser->parse($subtitles);
     //dump($subtitles);
 
-    return view('detail', ['title' => $title, 'subtitles' => $subtitles, 'mediacomposition' => $mediacomposition]);
+    return view('detail', ['title' => $title, 'subtitles' => $subtitles, 'mediacomposition' => $mediacomposition, 'durationSteps' => $durationSteps]);
 
 });