136 lines
5.2 KiB
PHP
136 lines
5.2 KiB
PHP
@extends('base')
|
|
@section('body')
|
|
<main>
|
|
<div id="video" data-urn="{{ $mediacomposition['chapterUrn'] }}">
|
|
<video-js id="my-player" class="pillarbox-js" controls></video-js>
|
|
</div>
|
|
<div id="tabs">
|
|
<div class="tablist">
|
|
<h1 class="visually-hidden">
|
|
Analysen (Tab-Liste)
|
|
</h1>
|
|
<p class="visually-hidden">
|
|
Hilfe zur Tablistensteuerung: Über die Tablistensteuerung kann die Sichtbarkeit der jeweiligen
|
|
Tabinhalte umgeschaltet werden, welche sich unterhalb der Tablistensteuerung befinden.
|
|
</p>
|
|
<fieldset class="controls">
|
|
<legend class="visually-hidden">Tablistensteuerung</legend>
|
|
<div class="control">
|
|
<input checked class="visually-hidden" id="tablist_panel_episode" name="tablist" type="radio" />
|
|
<label for="tablist_panel_episode"><span class="visually-hidden">Zeige Tabinhalt
|
|
</span>Episode</label>
|
|
</div>
|
|
<div class="control">
|
|
<input class="visually-hidden" id="tablist_panel_transcript" name="tablist" type="radio" />
|
|
<label for="tablist_panel_transcript"><span class="visually-hidden">Zeige Tabinhalt
|
|
</span>Transkript</label>
|
|
</div>
|
|
<div class="control">
|
|
<input class="visually-hidden" id="tablist_panel_terms" name="tablist" type="radio"
|
|
/><label for="tablist_panel_terms"><span
|
|
class="visually-hidden">Zeige Tabinhalt
|
|
</span>Dokumentbegriffe</label>
|
|
</div>
|
|
</fieldset>
|
|
<div class="panel" id="tablist_panel_episode_panel">
|
|
<h2 class="visually-hidden">
|
|
Episode (Inhalt)
|
|
</h2>
|
|
<dl>
|
|
<dt>Titel</dt>
|
|
<dd>{{ $title }}</dd>
|
|
<dt>Lead</dt>
|
|
<dd>{{ $mediacomposition['episode']['lead'] }}</dd>
|
|
<dt>Publikationsdatum</dt>
|
|
<dd>{{ date('d.m.Y H:i', strtotime($mediacomposition['episode']['publishedDate'])) }}</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="panel" id="tablist_panel_transcript_panel" hidden>
|
|
<h2 class="visually-hidden">
|
|
Transkript (Inhalt)
|
|
</h2>
|
|
<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">
|
|
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>
|
|
|
|
</div>
|
|
<div id="timeline">
|
|
<div id="timeline-bar">
|
|
<div id="timeline-bar-ctrl"></div>
|
|
</div>
|
|
<div id="tracks">
|
|
<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>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>
|
|
</div>
|
|
</main>
|
|
@endsection
|