DEV CommiDEV Committ

2026-07-01 10:34:48 +02:00
1 parent 4541c58fe7
commit c6759186cb
@@ -0,0 +1,23 @@
+identifier: Vitec/ButtonStyle
+fields:
+  - identifier: button_style
+    type: Select
+    renderType: selectSingle
+    prefixField: false
+    default: orange
+    label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.label'
+    items:
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.orange.label'
+        value: orange
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.blue.label'
+        value: blue
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.graphite.label'
+        value: graphite
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.midnight.label'
+        value: midnight
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.light.label'
+        value: light
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.dark.label'
+        value: dark
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:button_style.items.text_only.label'
+        value: text_only
@@ -0,0 +1,23 @@
+identifier: Vitec/SecondaryButtonStyle
+fields:
+  - identifier: secondary_button_style
+    type: Select
+    renderType: selectSingle
+    prefixField: false
+    default: graphite
+    label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.label'
+    items:
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.orange.label'
+        value: orange
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.blue.label'
+        value: blue
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.graphite.label'
+        value: graphite
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.midnight.label'
+        value: midnight
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.light.label'
+        value: light
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.dark.label'
+        value: dark
+      - label: 'LLL:EXT:vitec/Resources/Private/Language/locallang_buttons.xlf:secondary_button_style.items.text_only.label'
+        value: text_only
@@ -1,5 +1,5 @@
 name: vitec/card
-group: vitec
+group: vitec_custom_components
 prefixFields: true
 prefixType: vendor

@@ -61,6 +61,12 @@ fields:
    type: Text
    max: 30

+  - identifier: Vitec/ButtonStyle
+    type: Basic
+
+  - identifier: Vitec/SecondaryButtonStyle
+    type: Basic
+
  - identifier: card_link
    type: Link
    allowedTypes:
@@ -1,5 +1,5 @@
 name: vitec/cta-banner
-group: vitec
+group: vitec_custom_components
 prefixFields: true
 prefixType: vendor

@@ -39,6 +39,12 @@ fields:
    type: Text
    max: 30

+  - identifier: Vitec/ButtonStyle
+    type: Basic
+
+  - identifier: Vitec/SecondaryButtonStyle
+    type: Basic
+
  - identifier: layout_variant
    type: Select
    renderType: selectSingle
@@ -1,5 +1,5 @@
 name: vitec/herosection
-group: vitec
+group: vitec_custom_components
 prefixFields: true
 prefixType: vendor

@@ -12,6 +12,15 @@ fields:
    useExistingField: true
    required: true

+  - identifier: header_layout
+    useExistingField: true
+
+  - identifier: header_position
+    useExistingField: true
+
+  - identifier: header_link
+    useExistingField: true
+
  - identifier: subheader
    useExistingField: true

@@ -32,6 +41,17 @@ fields:
    default: 'Learn more'
    max: 30

+  - identifier: Vitec/ButtonStyle
+    type: Basic
+
+  # --- Image ---
+  - identifier: hero_bgimage
+    type: File
+    minitems: 0
+    maxitems: 1
+    allowed: common-image-types
+    extendedPalette: true
+
  - identifier: hero_image
    type: File
    minitems: 0
@@ -39,22 +59,71 @@ fields:
    allowed: common-image-types
    extendedPalette: true

-  - identifier: background_variant
+  - identifier: hero_image_alignment
    type: Select
    renderType: selectSingle
-    default: none
+    default: center
    items:
-      - label: None
-        value: none
-      - label: Orange
-        value: orange
-      - label: Blue
-        value: blue
-      - label: Graphite
-        value: graphite
-      - label: Midnight
-        value: midnight
+      - label: Left
+        value: left
+      - label: Center
+        value: center
+      - label: Right
+        value: right
+      - label: Fullwidth
+        value: fullwidth
+
+  # --- Video ---
+  - identifier: hero_video
+    type: File
+    minitems: 0
+    maxitems: 1
+    allowed: mp4,webm,ogv,mov,m4v
+
+  - identifier: hero_video_alignment
+    type: Select
+    renderType: selectSingle
+    default: center
+    items:
+      - label: Left
+        value: left
+      - label: Center
+        value: center
+      - label: Right
+        value: right
+      - label: Fullwidth
+        value: fullwidth
+
+  - identifier: hero_video_autoplay
+    type: Checkbox
+    default: 0
+
+  - identifier: hero_video_loop
+    type: Checkbox
+    default: 0
+
+  - identifier: hero_video_muted
+    type: Checkbox
+    default: 1
+
+  - identifier: hero_layout_variant
+    type: Select
+    renderType: selectSingle
+    default: fullscreen
+    items:
+      - label: Fullscreen
+        value: fullscreen
+      - label: Medium
+        value: md
+      - label: Small
+        value: sm
+      - label: Extra Small
+        value: xs

  - identifier: show_logo_wall
    type: Checkbox
-    default: 0
+    default: 0
+
+  - identifier: debug
+    type: Checkbox
+    default: 0
@@ -30,13 +30,78 @@
        <source>Hero Image</source>
      </trans-unit>

-      <trans-unit id="background_variant.label">
-        <source>Background Variant</source>
-      </trans-unit>
-
      <trans-unit id="show_logo_wall.label">
        <source>Show Logo Wall below</source>
      </trans-unit>
+      <trans-unit id="hero_layout_variant.label">
+        <source>Hero Layout Variant</source>
+      </trans-unit>
+      <trans-unit id="hero_layout_variant.items.fullscreen.label">
+        <source>Fullscreen</source>
+      </trans-unit>
+      <trans-unit id="hero_layout_variant.items.md.label">
+        <source>Medium</source>
+      </trans-unit>
+      <trans-unit id="hero_layout_variant.items.sm.label">
+        <source>Small</source>
+      </trans-unit>
+      <trans-unit id="hero_layout_variant.items.xs.label">
+        <source>Extra Small</source>
+      </trans-unit>
+      <trans-unit id="debug.label">
+        <source>Allow Debug Output</source>
+      </trans-unit>
+      <trans-unit id="hero_image_alignment.label">
+        <source>Image Alignment</source>
+      </trans-unit>
+      <trans-unit id="hero_image_alignment.items.left.label">
+        <source>Left</source>
+      </trans-unit>
+      <trans-unit id="hero_image_alignment.items.center.label">
+        <source>Center</source>
+      </trans-unit>
+      <trans-unit id="hero_image_alignment.items.right.label">
+        <source>Right</source>
+      </trans-unit>
+      <trans-unit id="hero_image_alignment.items.fullwidth.label">
+        <source>Fullwidth</source>
+      </trans-unit>
+      <trans-unit id="hero_video.label">
+        <source>Hero Video</source>
+      </trans-unit>
+      <trans-unit id="hero_video.description">
+        <source>Upload an MP4/WebM/OGV/MOV/M4V file, or pick one from the file list.</source>
+      </trans-unit>
+      <trans-unit id="hero_video_alignment.label">
+        <source>Video Alignment</source>
+      </trans-unit>
+      <trans-unit id="hero_video_alignment.items.left.label">
+        <source>Left</source>
+      </trans-unit>
+      <trans-unit id="hero_video_alignment.items.center.label">
+        <source>Center</source>
+      </trans-unit>
+      <trans-unit id="hero_video_alignment.items.right.label">
+        <source>Right</source>
+      </trans-unit>
+      <trans-unit id="hero_video_alignment.items.fullwidth.label">
+        <source>Fullwidth</source>
+      </trans-unit>
+      <trans-unit id="hero_video_autoplay.label">
+        <source>Autoplay</source>
+      </trans-unit>
+      <trans-unit id="hero_video_loop.label">
+        <source>Loop</source>
+      </trans-unit>
+      <trans-unit id="hero_video_muted.label">
+        <source>Muted</source>
+      </trans-unit>
+      <trans-unit id="hero_bgimage.label">
+        <source>Background Image</source>
+      </trans-unit>
+      <trans-unit id="hero_bgimage.description">
+        <source>Optional background image placed behind the hero content.</source>
+      </trans-unit>
    </body>
  </file>
-</xliff>
+</xliff>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <rect x="1.5" y="2.5" width="13" height="11" rx="1" fill="none" stroke="#000" stroke-width="1.2"/>
+  <text x="3.4" y="6.6" font-family="serif" font-weight="bold" font-size="6" fill="#000">¶</text>
+  <rect x="3" y="8" width="9" height="1" rx="0.2" fill="#000" opacity="0.4"/>
+  <rect x="3" y="9.6" width="7.5" height="1" rx="0.2" fill="#000" opacity="0.35"/>
+  <rect x="3" y="11.2" width="4" height="1.6" rx="0.3" fill="#000" opacity="0.55"/>
+</svg>
@@ -0,0 +1,117 @@
+name: vitec/intro-paragraph
+group: vitec_custom_components
+prefixFields: true
+prefixType: vendor
+
+fields:
+  - identifier: header
+    useExistingField: true
+    required: true
+
+  - identifier: header_layout
+    useExistingField: true
+
+  - identifier: header_position
+    useExistingField: true
+
+  - identifier: header_link
+    useExistingField: true
+
+  - identifier: subheader
+    useExistingField: true
+
+  - identifier: bodytext
+    useExistingField: true
+    enableRichtext: true
+
+  - identifier: button_text
+    type: Text
+    max: 40
+
+  - identifier: button_link
+    type: Link
+    allowedTypes:
+      - page
+      - url
+      - file
+      - email
+
+  - identifier: Vitec/ButtonStyle
+    type: Basic
+
+  # --- Image ---
+  - identifier: intro_image
+    type: File
+    minitems: 0
+    maxitems: 1
+    allowed: common-image-types
+    extendedPalette: true
+
+  - identifier: intro_image_alignment
+    type: Select
+    renderType: selectSingle
+    default: center
+    items:
+      - label: Left
+        value: left
+      - label: Center
+        value: center
+      - label: Right
+        value: right
+      - label: Fullwidth
+        value: fullwidth
+
+  # --- Video ---
+  - identifier: intro_video
+    type: File
+    minitems: 0
+    maxitems: 1
+    allowed: mp4,webm,ogv,mov,m4v
+
+  - identifier: intro_video_alignment
+    type: Select
+    renderType: selectSingle
+    default: center
+    items:
+      - label: Left
+        value: left
+      - label: Center
+        value: center
+      - label: Right
+        value: right
+      - label: Fullwidth
+        value: fullwidth
+
+  - identifier: intro_video_autoplay
+    type: Checkbox
+    default: 0
+
+  - identifier: intro_video_loop
+    type: Checkbox
+    default: 0
+
+  - identifier: intro_video_muted
+    type: Checkbox
+    default: 1
+
+  - identifier: intro_layout_variant
+    type: Select
+    renderType: selectSingle
+    default: variant_1
+    items:
+      - label: Variant 1
+        value: variant_1
+      - label: Variant 2
+        value: variant_2
+      - label: Variant 3
+        value: variant_3
+      - label: Variant 4
+        value: variant_4
+
+  - identifier: fullwidth
+    type: Checkbox
+    default: 0
+
+  - identifier: debug
+    type: Checkbox
+    default: 0
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2">
+  <file source-language="en" datatype="plaintext" original="messages">
+    <body>
+      <trans-unit id="title">
+        <source>VITEC · Intro Paragraph</source>
+      </trans-unit>
+      <trans-unit id="description">
+        <source>Headline + RTE text + optional CTA button. Multiple layout variants and VITEC button colour styles.</source>
+      </trans-unit>
+
+      <trans-unit id="button_text.label">
+        <source>Button Text</source>
+      </trans-unit>
+      <trans-unit id="button_link.label">
+        <source>Button Link</source>
+      </trans-unit>
+
+      <!-- ============================================================== -->
+      <!-- button_style                                                    -->
+      <!-- ============================================================== -->
+      <trans-unit id="button_style.label">
+        <source>Button Style</source>
+      </trans-unit>
+      <trans-unit id="button_style.items.orange.label">
+        <source>Orange</source>
+      </trans-unit>
+      <trans-unit id="button_style.items.blue.label">
+        <source>Blue</source>
+      </trans-unit>
+      <trans-unit id="button_style.items.graphite.label">
+        <source>Graphite</source>
+      </trans-unit>
+      <trans-unit id="button_style.items.midnight.label">
+        <source>Midnight</source>
+      </trans-unit>
+      <trans-unit id="button_style.items.light.label">
+        <source>Light</source>
+      </trans-unit>
+      <trans-unit id="button_style.items.dark.label">
+        <source>Dark</source>
+      </trans-unit>
+      <trans-unit id="button_style.items.text_only.label">
+        <source>Only Text (no button background)</source>
+      </trans-unit>
+
+      <!-- ============================================================== -->
+      <!-- layout_variant                                                  -->
+      <!-- ============================================================== -->
+      <trans-unit id="intro_layout_variant.label">
+        <source>Layout Variant</source>
+      </trans-unit>
+      <trans-unit id="intro_layout_variant.items.variant_1.label">
+        <source>Variant 1</source>
+      </trans-unit>
+      <trans-unit id="intro_layout_variant.items.variant_2.label">
+        <source>Variant 2</source>
+      </trans-unit>
+      <trans-unit id="intro_layout_variant.items.variant_3.label">
+        <source>Variant 3</source>
+      </trans-unit>
+      <trans-unit id="intro_layout_variant.items.variant_4.label">
+        <source>Variant 4</source>
+      </trans-unit>
+
+      <trans-unit id="fullwidth.label">
+        <source>Render full-width (edge to edge)</source>
+      </trans-unit>
+      <trans-unit id="debug.label">
+        <source>Allow Debug Output</source>
+      </trans-unit>
+      <trans-unit id="debug.description">
+        <source>When enabled, extra debug fields may be included in the JSON output for this element.</source>
+      </trans-unit>
+      <trans-unit id="intro_image.label">
+        <source>Image</source>
+      </trans-unit>
+      <trans-unit id="intro_image_alignment.label">
+        <source>Image Alignment</source>
+      </trans-unit>
+      <trans-unit id="intro_image_alignment.items.left.label"><source>Left</source></trans-unit>
+      <trans-unit id="intro_image_alignment.items.center.label"><source>Center</source></trans-unit>
+      <trans-unit id="intro_image_alignment.items.right.label"><source>Right</source></trans-unit>
+      <trans-unit id="intro_image_alignment.items.fullwidth.label"><source>Fullwidth</source></trans-unit>
+      <trans-unit id="intro_video.label"><source>Video</source></trans-unit>
+      <trans-unit id="intro_video.description"><source>Upload an MP4/WebM/OGV/MOV/M4V file, or pick one from the file list.</source></trans-unit>
+      <trans-unit id="intro_video_alignment.label"><source>Video Alignment</source></trans-unit>
+      <trans-unit id="intro_video_alignment.items.left.label"><source>Left</source></trans-unit>
+      <trans-unit id="intro_video_alignment.items.center.label"><source>Center</source></trans-unit>
+      <trans-unit id="intro_video_alignment.items.right.label"><source>Right</source></trans-unit>
+      <trans-unit id="intro_video_alignment.items.fullwidth.label"><source>Fullwidth</source></trans-unit>
+      <trans-unit id="intro_video_autoplay.label"><source>Autoplay</source></trans-unit>
+      <trans-unit id="intro_video_loop.label"><source>Loop</source></trans-unit>
+      <trans-unit id="intro_video_muted.label"><source>Muted</source></trans-unit>
+    </body>
+  </file>
+</xliff>
@@ -0,0 +1,76 @@
+<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">
+    <div class="vitec-preview__body">
+        <div class="vitec-preview__label">VITEC · Intro Paragraph</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.bodytext}">
+            <div class="vitec-preview__body-text">
+                <f:format.stripTags>{data.bodytext}</f:format.stripTags>
+            </div>
+        </f:if>
+
+        <f:if condition="{data.button_text}">
+            <div class="vitec-preview__ctas">
+                <span class="vitec-preview__cta-btn vitec-preview__cta-btn--{data.button_style}">
+                    {data.button_text} →
+                </span>
+            </div>
+        </f:if>
+    </div>
+
+    <f:comment>Settings sidebar</f:comment>
+    <div class="vitec-preview__settings">
+
+        <span class="vitec-badge">
+            <f:switch expression="{data.intro_layout_variant}">
+                <f:case value="variant_1">▤ Variant 1</f:case>
+                <f:case value="variant_2">▥ Variant 2</f:case>
+                <f:case value="variant_3">▤ Variant 3</f:case>
+                <f:case value="variant_4">▥ Variant 4</f:case>
+                <f:defaultCase>{data.intro_layout_variant}</f:defaultCase>
+            </f:switch>
+        </span>
+
+        <f:if condition="{data.button_text}">
+            <span class="vitec-badge">
+                <span class="vitec-badge__dot vitec-badge__dot--{data.button_style}"></span>
+                Button: {data.button_style}
+            </span>
+        </f:if>
+
+        <f:if condition="{data.fullwidth}">
+            <span class="vitec-badge">↔ Full width</span>
+        </f:if>
+
+        <f:if condition="{data.button_text} && {data.button_link.url} == ''">
+            <span class="vitec-badge vitec-badge--warning">⚠ Button-Text ohne Link</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>
@@ -0,0 +1,3 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<!-- Headless mode: JSON is built by nb-headless-content-blocks -->
+</html>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <rect x="1.5" y="3" width="13" height="10" rx="1.4" fill="none" stroke="#000" stroke-width="1.2"/>
+  <polygon points="6.5,5.8 11,8 6.5,10.2" fill="#000" opacity="0.7"/>
+</svg>
@@ -0,0 +1,46 @@
+name: vitec/video
+group: vitec_custom_components
+prefixFields: true
+prefixType: vendor
+
+fields:
+  - identifier: header
+    useExistingField: true
+    required: true
+
+  - identifier: header_layout
+    useExistingField: true
+
+  - identifier: header_position
+    useExistingField: true
+
+  - identifier: header_link
+    useExistingField: true
+
+  - identifier: subheader
+    useExistingField: true
+
+  - identifier: youtube_code
+    type: Text
+    max: 50
+    description: 'YouTube video ID (e.g. "dQw4w9WgXcQ") OR full URL. Leave empty to use Custom Video instead.'
+
+  - identifier: poster
+    type: File
+    minitems: 0
+    maxitems: 1
+    allowed: common-image-types
+
+  - identifier: custom_video
+    type: File
+    minitems: 0
+    maxitems: 1
+    allowed: mp4,webm,ogv,mov,m4v
+
+  - identifier: hide_controls
+    type: Checkbox
+    default: 0
+
+  - identifier: debug
+    type: Checkbox
+    default: 0
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2">
+  <file source-language="en" datatype="plaintext" original="messages">
+    <body>
+      <trans-unit id="title">
+        <source>VITEC · Video</source>
+      </trans-unit>
+      <trans-unit id="description">
+        <source>Embedded video — YouTube code or uploaded video file, with optional poster image.</source>
+      </trans-unit>
+
+      <trans-unit id="youtube_code.label">
+        <source>YouTube Code</source>
+      </trans-unit>
+      <trans-unit id="youtube_code.description">
+        <source>YouTube video ID (e.g. "dQw4w9WgXcQ") OR full URL. Leave empty to use Custom Video instead.</source>
+      </trans-unit>
+
+      <trans-unit id="poster.label">
+        <source>Poster Image</source>
+      </trans-unit>
+      <trans-unit id="poster.description">
+        <source>Thumbnail / poster shown before the video plays.</source>
+      </trans-unit>
+
+      <trans-unit id="custom_video.label">
+        <source>Custom Video</source>
+      </trans-unit>
+      <trans-unit id="custom_video.description">
+        <source>Upload an MP4/WebM/OGV/MOV/M4V file, or pick one from the file list.</source>
+      </trans-unit>
+
+      <trans-unit id="hide_controls.label">
+        <source>Hide Player Controls</source>
+      </trans-unit>
+      <trans-unit id="hide_controls.description">
+        <source>When enabled, the video player UI (play/pause, scrub bar, volume) is hidden. Useful for autoplaying background loops.</source>
+      </trans-unit>
+
+      <trans-unit id="debug.label">
+        <source>Allow Debug Output</source>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>
@@ -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>
@@ -0,0 +1,3 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<!-- Headless mode: JSON is built by nb-headless-content-blocks -->
+</html>