Zum Inhalt springen

Vorlagen-Teile

Modulare Vorlagenstruktur für Wartbarkeit und Anpassbarkeit.

VidPly TYPO3 Extension Logo

Speicherort

Resources/Private/Partials/VidPly/

Verfügbare Teilvorlagen

1. Assets.html

Registriert CSS- und JavaScript-Assets bedingt

 
<f:render partial="VidPly/Assets" arguments="{
    needsPrivacyLayer: vidply.needsPrivacyLayer,
    needsVidPlay: vidply.needsVidPlay,
    needsPlaylist: vidply.needsPlaylist,
    needsHLS: vidply.needsHLS,
    needsDASH: vidply.needsDASH
}" />
 

Argumente:

  • needsPrivacyLayer - PrivacyLayer.js laden (externe Dienste)
  • needsVidPlay - VidPly-Kern laden (nativer Player)
  • needsPlaylist - PlaylistInit.js laden (Wiedergabelisten/Player-Initialisierung)
  • needsHLS - hls.js laden (HLS-Streaming)
  • needsDASH - Lade dash.js (DASH-Streaming)

Wird immer geladen:

  • vidply.min.css - Player-Styling

Wird je nach Medientyp bedingt geladen:

  • privacy-layer.css - Stile für die Datenschutzebene (nur externe Dienste)
  • PrivacyLayer.js - YouTube, Vimeo, SoundCloud
  • hls.js (CDN) – Nur HLS-Streams
  • dash.js (CDN) – Nur DASH-Streams
  • PlaylistInit.js - Wiedergabelisten oder Player-Initialisierung
  • vidply/vidply.esm.min.js - Nur nativer Player (plus Code-Split-Chunks)

Siehe Documentation/AssetLoading.md für Details zur Optimierung.

2. VideoSources.html

Rendert „<source>“-Elemente für Videoplayer

 
<f:render partial="VidPly/VideoSources" arguments="{
    videoUrl: vidply.videoUrl,
    playlistData: vidply.playlistData,
    sources: vidply.sources,
    mediaFiles: vidply.mediaFiles
}" />
 

Verarbeitet:

  • Mehrere Quellformate mit Fallback-Reihenfolge (DASH → HLS → MP4/WebM)
  • Mehrere Qualitäts-/Formatoptionen
  • Playlist-Modus
  • Quellen für Audiodeskription

3. AudioSources.html

Rendert „<source>“-Elemente für Audio-Player

 
<f:render partial="VidPly/AudioSources" arguments="{
    playlistData: vidply.playlistData,
    tracks: vidply.tracks,
    sources: vidply.sources,
    mediaFiles: vidply.mediaFiles
}" />
 

Verarbeitet:

  • Mehrere Quellformate mit Fallback-Reihenfolge (DASH → HLS → MP3/OGG)
  • Wiedergabelistenmodus
  • Format-Fallback

4. Tracks.html

Rendert Untertitel- und Kapitel<track>-Elemente

 
<f:render partial="VidPly/Tracks" arguments="{
    captions: vidply.captions,
    chapters: vidply.chapters,
    languageSelection: vidply.languageSelection
}" />
 

Wird von Video- und Audio-Playern gemeinsam genutzt. Unterstützt mehrere Sprachen und Track-Arten.

5. MetadataScripts.html

JSON-Metadaten für Barrierefreiheitsfunktionen

 
<f:render partial="VidPly/MetadataScripts" arguments="{
    uniqueId: vidply.uniqueId,
    audioDescriptionTracks: vidply.audioDescriptionTracks,
    audioDescription: vidply.audioDescription,
    signLanguage: vidply.signLanguage
}" />
 

Wird von Videoplayern für Audiodeskription und Gebärdensprache verwendet.

6. PrivacyLayer.html

DSGVO-Einwilligungsschicht für externe Dienste

 
<f:render partial="VidPly/PrivacyLayer" arguments="{
    service: 'youtube',
    videoUrl: vidply.videoUrl,
    poster: vidply.poster,
    title: data.header,
    uniqueId: vidply.uniqueId,
    privacySettings: vidply.privacySettings.youtube
}" />
 

Zeigt die Wiedergabetaste mit Datenschutzhinweis für YouTube, Vimeo und SoundCloud an. Verwendet Datenbank-Einstellungen aus der tx_mpcvidply_privacy_settings Tabelle mit Fallback auf Übersetzungen aus Sprachdateien. Lädt Iframe bei Einwilligung.

Struktur der Datenschutzeinstellungen:

 
[
    'headline' => 'Optional headline',
    'intro_text' => 'Text before link',
    'outro_text' => 'Text after link',
    'policy_link' => 'https://...',
    'link_text' => 'Link text',
    'button_label' => 'Button aria-label'
]
 

Vorlagenstruktur

 
VidPly.html (Main)
├── Header
├── Check if external service?
│   ├── YES → PrivacyLayer
│   └── NO → VideoPlayer or AudioPlayer (video/audio, may include HLS/DASH sources)
│       ├── VideoSources / AudioSources
│       ├── Tracks
│       └── MetadataScripts (video only)
└── Assets
 

Anpassung

Überschreibung im Sitepackage

TypoScript:

 
tt_content.mpc_vidply {
    partialRootPaths.100 = EXT:your_sitepackage/Resources/Private/Partials/
}
 

Benutzerdefiniertes Partial erstellen:

 
your_sitepackage/
└── Resources/Private/Partials/VidPly/
    └── VideoSources.html  ← Your customization
 

Andere Partials bleiben unverändert.

Listview- und Detailvorlagen

Speicherort: Resources/Private/Partials/Listview/ und Resources/Private/Templates/Listview.html / Detail.html

Partial / VorlageRolle
Listview/RowEin Regal oder eine Rasterzeile: Überschrift, Sortierung <select>, optionaler Paginierungs-Wrapper
Listview/RowListBodyGemeinsam <ul> für Raster oder Regal (mit oder ohne Paginierung verwendbar)
Listview/CardEinzelne Medienkarte (Poster, Titel, Künstler, Kategorie-Chips, Link)
Listview/ShelfArrowsSteuerelemente für „Vorheriges/Nächstes“ für das horizontale Regal

Auf die gleiche Weise überschreiben mit partialRootPaths für mpc_vidply Listansicht TypoScript, falls dein Sitepackage ein anderes Markup benötigt; behalte data-* die Attribute bei, wenn Sie auf Listview.js (Shelf, Sortierung, Paginierung).

Vorteile

  • Einzige Zuständigkeit – Jedes Partial hat einen klaren Zweck
  • Wiederverwendbarkeit – Verfolgt Partials, die von Video/Audio gemeinsam genutzt werden
  • Einfaches Überschreiben – Passen Sie nur das an, was Sie benötigen
  • Wartbarkeit – Änderungen beschränken sich auf bestimmte Dateien
  • Lesbarkeit – Hauptvorlage von 250 auf 130 Zeilen reduziert

Keine grundlegenden Änderungen

Durch die Refaktorisierung bleiben HTML-Ausgabe und Funktionalität unverändert. Bestehende Konfigurationen funktionieren ohne Änderungen.

Seite teilen