video-custom-controls

// src/components/elements/video-custom-controls/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: elemets/video-custom-controls
type: object
required:
  - controls
  - video
additionalProperties: false
properties:
  classes:
    type: array
    items:
      type: string
  controls:
    type: object
    additionalProperties: false
    properties:
      audio:
        type: boolean
      playback:
        type: boolean
  loop:
    type: boolean
  type:
    type: string
    enum:
      - decorative
      - standard
  video:
    format: html
    type: string
    description: elements/video

// src/components/elements/video-custom-controls/mocks.yaml

video:
  $ref: elements/video#storyslider
  $tpl: elements/video
  classes:
    - VideoCustomControls-video
  class_prefix: VideoCustomControls
controls:
  audio: true
  playback: true
$variants:
  - $name: Decorative
    controls:
      audio: false
      playback: true
    type: decorative
    video:
      $ref: elements/video#video-slide-decorative

// src/components/elements/video-custom-controls/video-custom-controls.twig

{{ attach_library('finstral_global/element-video-custom-controls') }}


<video-custom-controls class="VideoCustomControls {% if classes %} {{ classes|join(' ') }} {% endif %}" type="{{ type|default('standard') }}">
	{{ video|mira({
		classes: ["VideoCustomControls-video"],
		class_prefix: "VideoCustomControls",
		autoplay: false,
		controls: true,
		loop: type == "decorative",
		muted: true,
		preload: "metadata"
	}) }}

	<ul class="VideoCustomControls-controls" hidden>
		{%- if controls.audio -%}
			<li>
				<button
					class="VideoCustomControls-control"
					data-active="{{ "global.mute_video"|t }}"
					data-inactive="{{ "global.unmute_video"|t }}"
					data-audio="true"
					id="control-audio"
					type="button">
						<span class="VideoCustomControls-muted" id="icon-muted">
							{% include "@elements/icon/icon.twig" with {
								name: "muted"
							} only %}
						</span>
						<span class="VideoCustomControls-unmuted" id="icon-unmuted">
							{% include "@elements/icon/icon.twig" with {
								name: "audio"
							} only %}
						</span>
						<span class="visually-hidden" id="control-audio-label">{{ "global.unmute_video"|t }}</span>
					</button>
			</li>
		{%- endif -%}
		{%- if controls.playback -%}
			<li>
				<button
					class="VideoCustomControls-control"
					data-active="{{ "global.play_video"|t }}"
					data-inactive="{{ "global.pause_video"|t }}"
					data-playback="false"
					id="control-playback"
					type="button">
						<span class="VideoCustomControls-play" id="icon-play">
							{% include "@elements/icon/icon.twig" with {
								name: "play"
							} only %}
						</span>
						<span class="VideoCustomControls-pause" id="icon-pause" hidden>
							{% include "@elements/icon/icon.twig" with {
								name: "pause"
							} only %}
						</span>
						<span class="visually-hidden" id="control-playback-label">{{ "global.play_video"|t }}</span>
					</button>
			</li>
		{%- endif -%}
	</ul>
</video-custom-controls>