Images and video

{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}

/*
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {TODOObject} from '../utils/todo';

export type ImgArgs = {
  /**
   * Defines an alternative text description of the image.
   */
  alt: string;
  /**
   * A space-separated list of the classes of the element.
   */
  class?: string;
  /**
   * Provides an image decoding hint to the browser. `'async'` by default
   * for images that are not `'high'` fetchpriority.
   */
  decoding?: 'sync' | 'async' | 'auto';
  /**
   * Indicates the relative priority of resources to the browser.
   */
  fetchpriority?: 'high' | 'low' | 'auto';
  /**
   * The intrinsic height of the image, in pixels. Must be an integer without a unit.
   */
  height: string;
  /**
   * Often used with CSS to style a specific element. The value of this attribute must be unique.
   */
  id?: string;
  /**
   * Flag to wrap image in `a` tag pointing to the image. `false` by default.
   */
  linkTo?: boolean;
  /**
   * Indicates how the browser should load the image. `'lazy'` by default
   * for images that are not `'high'` fetchpriority.
   */
  loading?: 'eager' | 'lazy';
  /**
   * One or more strings separated by commas, indicating a set of source sizes. If value is not provided one is generated dynamically.
   */
  sizes?: string;
  /**
   * Pathname of image hosted by imgix.
   */
  src: string;
  /**
   * A string containing CSS styling declarations to be applied to the element.
   */
  style?: string;
  /**
   * The intrinsic width of the image in pixels. Must be an integer without a unit.
   */
  width: string;
  /**
   * Params directly passed to the imgix API. This can be used to make specific overrides, use with caution.
   */
  params?: TODOObject;
  /**
   * Options passed when generating an imgix srcset.
   */
  options?: ImgixOptions;
};

export type ImgixOptions = {
  widths?: number[];
  widthTolerance?: number;
  minWidth?: number;
  maxWidth?: number;
  disableVariableQuality?: boolean;
};

{% Img
  src="image/foR0vJZKULb5AGJExlazy1xYDgI2/iuwBXAyKJMz4b7oRyIdI.jpg",
  alt="ALT_TEXT_HERE",
  width="380",
  height="240",
  params={flip: 'h'}
%}

/*
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

export type VideoArgs = {
  /**
   * A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
   */
  autoplay?: boolean;
  /**
   * A Boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application.
   */
  autoPictureInPicture?: boolean;
  /**
   * A space-separated list of the classes of the element.
   */
  class?: string;
  /**
   * If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
   */
  controls?: boolean;
  /**
   * Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.
   */
  disablePictureInPicture?: boolean;
  /**
   * The height of the video's display area, in CSS pixels (absolute values only; no percentages.)
   */
  height?: number;
  /**
   * Often used with CSS to style a specific element. The value of this attribute must be unique.
   */
  id?: string;
  /**
   * A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.
   */
  loop?: boolean;
  /**
   * Flag to wrap video in `a` tag pointing to the video. `false` by default.
   */
  linkTo?: boolean;
  /**
   * A Boolean attribute that indicates the default setting of the audio contained in the video.
   * Defaults to true if `autoplay` is enabled because browsers require autoplay videos to also be muted.
   */
  muted?: boolean;
  /**
   * A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.
   */
  playsinline?: boolean;
  /**
   * Pathname of image hosted by imgix to be shown while the video is downloading.
   */
  poster?: string;
  /**
   * This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played.
   */
  preload?: 'none' | 'metadata' | 'auto';
  /**
   * Pathname(s) of video hosted by CDN.
   */
  src: string | string[];
  /**
   * The width of the video's display area, in CSS pixels (absolute values only; no percentages).
   */
  width?: number;
};

<figure>
  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}
  <figcaption>A good boy.</figcaption>
</figure>

<figure data-size="full">
  {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg", alt="ALT_TEXT_HERE", width="380", height="240" %}
  <figcaption>A good boy.</figcaption>
</figure>

{% YouTube "qPD2yc8BoDk" %}

<!-- You can pass an optional start time as well -->
{% YouTube id="qPD2yc8BoDk", startTime="1678" %}

{% YouTubePlaylist 'PLNYkxOF6rcICntazGfSVKSj5EwuR9w5Nv' %}

<!-- You can pass allow, src, style and title as options in a second param -->
{% YouTubePlaylist 'PLNYkxOF6rcICntazGfSVKSj5EwuR9w5Nv', {title: "My title"} %}