master
Giò Diani 2024-10-29 21:27:29 +01:00
parent 1e0693709d
commit 161af3cf9e
7 changed files with 305 additions and 87 deletions

View File

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

53
VANA-php/composer.lock generated
View File

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

Binary file not shown.

View File

@ -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);
}

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -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]);
});