UI stuff

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": {

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

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,
+    margin: 0;
-h1,
-h2,
-h3,
-h4,
-p,
-figure,
-blockquote,
-dl,
-dd {
-    margin-block-end: 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;
+  background: var(--c3);
-  color: #fff;
 }
 
 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-columns: repeat(2, 1fr);
-    grid-template-rows: 50% 50%;
+    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);
 }
 

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

@@ -49,7 +49,26 @@
                 <h2 class="visually-hidden">
                     Transkript (Inhalt)
                 </h2>
-                <p>TRANSCRIPT</p>
+                <div class="inner">
+                <ol id="transcript">
+                    @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>
+                        </div>
+                        <div>
+                            {!! $cue['text'] !!}
+                        </div>
+                    </li>
+                    @endforeach
+                </ol>
+                </div>
             </div>
             <div class="panel" id="tablist_panel_terms_panel" hidden>
                 <h2 class="visually-hidden">
@@ -83,13 +102,33 @@
         </div>
         <div id="tracks">
             <div class="track">
-                <div class="track-ctrl"></div>
+                <div class="track-ctrl">
+                    <h2>Anzahl Worte</h2>
+                    <p></p>
+                </div>
+                <div class="track-viz"></div>
+            </div>
+            <div class="track">
+                <div class="track-ctrl">
+                    <h2>Sentiment</h2>
+                    <p></p>
+                </div>
+                <div class="track-viz"></div>
+            </div>
+            <div class="track">
+                <div class="track-ctrl">
+                    <h2>Anzahl Worte</h2>
+                    <p></p>
+                </div>
+                <div class="track-viz"></div>
+            </div>
+            <div class="track">
+                <div class="track-ctrl">
+                    <h2>Anzahl Worte</h2>
+                    <p></p>
+                </div>
                 <div class="track-viz"></div>
             </div>
-            <div class="track"></div>
-            <div class="track"></div>
-            <div class="track"></div>
-            <div class="track"></div>
         </div>
     </div>
 </main>

VANA-php/routes/web.php

@@ -4,6 +4,9 @@ use App\Models\Episode as EpisodeModel;
 use App\Subtitles as AppSubtitles;
 use Illuminate\Support\Facades\Route;
 use Wikidata\Wikidata;
+use Podlove\Webvtt\Parser;
+use Podlove\Webvtt\ParserException;
+
 
 use App\Models\Episode;
 
@@ -21,6 +24,10 @@ Route::get('/detail/{id}', function(int $id) {
     $subtitles = $ep->subtitles;
     $mediacomposition = json_decode($ep->mediacomposition, 1);
 
+    $parser = new Podlove\Webvtt\Parser();
+    $subtitles = $parser->parse($subtitles);
+    //dump($subtitles);
+
     return view('detail', ['title' => $title, 'subtitles' => $subtitles, 'mediacomposition' => $mediacomposition]);
 
 });