VANA/VANA-php/resources/views/detail.blade.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>
                            &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">
                    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