hy-video.tsx

import {Component, Prop, h, Element} from '@stencil/core';
import {HeadingVarians} from '../../utils/utils';

@Component({
  tag: 'hy-video',
  styleUrl: 'hy-video.scss',
  shadow: false,
})
export class HyVideo {
  @Element() el: HTMLElement;

  /** Video title */
  @Prop() videoTitle: string;
  /** Video description */
  @Prop() videoDescription: string;
  /** Context label */
  @Prop() contextLabel: string;
  /** Should context label be visible */
  @Prop() contextLabelVisible: boolean = false;
  /** Preview image url */
  @Prop() previewImageUrl: string;
  /** Url to video, used with preview image */
  @Prop() linkToVideo: string;
  /** Label for play button if preview image is provided */
  @Prop() playButtonLabel: string;
  /** Should play button be visible */
  @Prop() playButtonVisible: boolean = false;
  /** Views count number */
  @Prop() views: string;
  /** Label for views number */
  @Prop() viewsLabel: string;
  /** Duration number */
  @Prop() duration: string;
  /** Label for duration number */
  @Prop() durationLabel: string;
  /** Date added date as string */
  @Prop() dateAdded: string;
  /** Label for date added */
  @Prop() dateAddedLabel: string;
  /** Use horizontal layout where metadata is on side */
  @Prop() horizontal: boolean = false;

  @Prop() headerstyle: string = 'default';

  componentDidLoad() {
    let hyMainDiv = this.el.closest('.hy-main');
    if (hyMainDiv) {
      if (!hyMainDiv.classList.contains('with-sidebar')) {
        this.headerstyle = 'large';
      }
    }
  }

  renderPreviewWithLink = () => {
    return this.linkToVideo ? (
      <a title={this.videoTitle} href={this.linkToVideo} class="hy-video__link-to-video">
        <img class="hy-video__preview-image" src={this.previewImageUrl} alt={this.videoTitle} />
      </a>
    ) : (
      <img class="hy-video__preview-image" src={this.previewImageUrl} alt={this.videoTitle} />
    );
  };

  renderPlayButton = () => {
    return (
      <span class="hy-video__play">
        <button type="button">
          <hy-icon icon={'hy-icon-video'} class={'hy-video__play-icon'} size={20} />
          <span class="hy-video__button-label">{this.playButtonLabel}</span>
        </button>
      </span>
    );
  };

  render() {
    const classAttributes = [
      'hy-video',
      this.horizontal ? 'hy-video--horizontal' : '',
      `hy-video__${this.headerstyle}`,
    ].join(' ');

    return [
      <div class={classAttributes}>
        <div class="hy-video__video-container">
          {this.previewImageUrl ? (
            <div>
              {this.renderPreviewWithLink()}
              <slot name="video"></slot>
            </div>
          ) : (
            <slot name="video"></slot>
          )}
          {this.playButtonVisible && this.renderPlayButton()}
          {this.contextLabelVisible && <span class="hy-video__label">{this.contextLabel}</span>}
        </div>
        <div class="hy-video__meta">
          {this.videoTitle && (
            <hy-heading class="hy-video__meta__title" heading={HeadingVarians.h2}>
              {this.videoTitle}
            </hy-heading>
          )}
          {(this.duration || this.views || this.dateAdded) && (
            <div class="hy-video__meta__details">
              {this.duration && (
                <div class="hy-video__meta__details--item">
                  <span class="hy-video__meta__label">{this.durationLabel}</span>
                  <span class="hy-video__meta__content">{this.duration}</span>
                </div>
              )}
              {this.views && (
                <div class="hy-video__meta__details--item">
                  <span class="hy-video__meta__label">{this.viewsLabel}</span>
                  <span class="hy-video__meta__content">{this.views}</span>
                </div>
              )}
              {this.dateAdded && (
                <div class="hy-video__meta__details--item">
                  <span class="hy-video__meta__label">{this.dateAddedLabel}</span>
                  <span class="hy-video__meta__content">{this.dateAdded}</span>
                </div>
              )}
            </div>
          )}
          {this.videoDescription && <div class="hy-video__meta__description">{this.videoDescription}</div>}
        </div>
      </div>,
      <hy-box mb="1.75, 1.75, 2, 2.5" />,
    ];
  }
}