DEV CommiDEV Committ

packages/vitec/ContentBlocks/ContentElements/video/templates/backend-preview.html

@@ -0,0 +1,78 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<f:layout name="Preview"/>
+<f:section name="Content">
+
+<f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
+
+<div class="vitec-preview">
+
+    <f:comment>Thumbnail: poster image, then default placeholder</f:comment>
+    <f:if condition="{data.poster.0}">
+        <f:then>
+            <f:image image="{data.poster.0}"
+                     class="vitec-preview__thumb vitec-preview__thumb--video"
+                     width="200c"
+                     height="120c"
+                     alt="Video poster preview"/>
+        </f:then>
+        <f:else>
+            <div class="vitec-preview__thumb-placeholder">▶</div>
+        </f:else>
+    </f:if>
+
+    <div class="vitec-preview__body">
+        <div class="vitec-preview__label">VITEC · Video</div>
+
+        <h3 class="vitec-preview__headline">
+            <f:if condition="{data.header}">
+                <f:then>{data.header}</f:then>
+                <f:else>
+                    <em style="color:#c00;">⚠ Headline fehlt</em>
+                </f:else>
+            </f:if>
+        </h3>
+
+        <f:if condition="{data.subheader}">
+            <div class="vitec-preview__subline">{data.subheader}</div>
+        </f:if>
+
+        <f:if condition="{data.youtube_code}">
+            <div class="vitec-preview__body-text">
+                <strong>YouTube:</strong> {data.youtube_code}
+            </div>
+        </f:if>
+    </div>
+
+    <f:comment>Settings sidebar</f:comment>
+    <div class="vitec-preview__settings">
+
+        <f:if condition="{data.youtube_code}">
+            <span class="vitec-badge">▶ YouTube</span>
+        </f:if>
+
+        <f:if condition="{data.custom_video.0}">
+            <span class="vitec-badge">🎬 Custom Video</span>
+        </f:if>
+
+        <f:if condition="{data.poster.0}">
+            <span class="vitec-badge">🖼 Poster set</span>
+        </f:if>
+
+        <f:if condition="!{data.youtube_code} && !{data.custom_video.0}">
+            <span class="vitec-badge vitec-badge--warning">⚠ Kein Video-Source</span>
+        </f:if>
+        <f:if condition="{data.hide_controls}">
+            <span class="vitec-badge">⏸ Controls hidden</span>
+        </f:if>
+
+
+        <f:if condition="{data.debug}">
+            <span class="vitec-badge vitec-badge--warning">⚙ Debug ON</span>
+        </f:if>
+
+    </div>
+
+</div>
+
+</f:section>
+</html>