viewer

// src/components/apps/extranet/asset-detail/app-asset-detail/viewer/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: https://finstral.com/apps/extranet/asset-detail/app-asset-detail/viewer
type: object
required:
  - url
  - width
additionalProperties: false
properties:
  alt:
    type: string
  height:
    type: integer
  type:
    type: string
    enum:
      - video
      - image
  url:
    type: string
    format: uri-reference
  width:
    type: integer

// src/components/apps/extranet/asset-detail/app-asset-detail/viewer/mocks.yaml

url: https://placehold.co/648x300
width: 648
height: 300
alt: alt
$variants:
  - $name: video
    type: video
    url: /build/assets/video/dummy/finstral-snippet-9-16.mp4

// src/components/apps/extranet/asset-detail/app-asset-detail/viewer/viewer.twig

<div class="Viewer">
	<div class="Viewer-assetContainer">
		{% if type|default("image") == "video" %}
			{% include "@elements/video/video.twig" with {
				src: url,
				width: width,
				height: height,
				controls: true,
				skip_cookiebot_consent: true,
				classes: ["Viewer-video"],
			} only %}

		{% else %}

			{% include "@elements/image/image.twig" with {
				uri: url,
				width: width,
				height: height,
				alt: alt,
			} only %}
		{% endif %}
	</div>
</div>