UI stuff
Giò Diani
parent
1e0693709d
commit
161af3cf9e
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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.
|
|
@ -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
|
|
@ -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>
|
||||
—
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue