feat: add support for @Video directive

Author: Dobromir Hristov

src/components/ContentNode.vue

@@ -20,6 +20,7 @@ import InlineImage from './ContentNode/InlineImage.vue';
 import Reference from './ContentNode/Reference.vue';
 import Table from './ContentNode/Table.vue';
 import StrikeThrough from './ContentNode/StrikeThrough.vue';
+import InlineVideo from './ContentNode/InlineVideo.vue';
 
 const BlockType = {
   aside: 'aside',
@@ -38,6 +39,7 @@ const InlineType = {
   codeVoice: 'codeVoice',
   emphasis: 'emphasis',
   image: 'image',
+  video: 'video',
   inlineHead: 'inlineHead',
   link: 'link',
   newTerm: 'newTerm',
@@ -301,6 +303,19 @@ function renderNode(createElement, references) {
         null
       );
     }
+    case InlineType.video: {
+      if (node.metadata && node.metadata.abstract) {
+        return renderFigure(node);
+      }
+
+      return references[node.identifier] ? (
+        createElement(InlineVideo, {
+          props: {
+            identifier: node.identifier,
+          },
+        })
+      ) : null;
+    }
     case InlineType.link:
       // Note: `InlineType.link` has been deprecated, but may still be found in old JSON.
       return createElement('a', { attrs: { href: node.destination } }, (

src/components/ContentNode/FigureCaption.vue

@@ -31,6 +31,10 @@ export default {
 
 .caption {
   @include font-styles(documentation-figcaption);
+
+  &:last-child {
+    margin-top: $stacked-margin-xlarge;
+  }
 }
 
 /deep/ p {

src/components/ContentNode/InlineVideo.vue

@@ -0,0 +1,46 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2021 Apple Inc. and the Swift project authors
+  Licensed under Apache License v2.0 with Runtime Library Exception
+
+  See https://swift.org/LICENSE.txt for license information
+  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+-->
+
+<template>
+  <Asset
+    :identifier="identifier"
+    :video-autoplays="false"
+    :video-muted="false"
+    :showsReplayButton="!isClientMobile"
+    :showsVideoControls="isClientMobile"
+  />
+</template>
+
+<script>
+import Asset from 'docc-render/components/Asset.vue';
+import isClientMobile from 'docc-render/mixins/isClientMobile';
+
+export default {
+  name: 'InlineVideo',
+  mixins: [isClientMobile],
+  components: { Asset },
+  props: {
+    identifier: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ video {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
+  max-width: 100%;
+}
+</style>

tests/unit/components/ContentNode.spec.js

@@ -21,6 +21,7 @@ import InlineImage from 'docc-render/components/ContentNode/InlineImage.vue';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
 import Table from 'docc-render/components/ContentNode/Table.vue';
 import StrikeThrough from 'docc-render/components/ContentNode/StrikeThrough.vue';
+import InlineVideo from '@/components/ContentNode/InlineVideo.vue';
 
 const { TableHeaderStyle } = ContentNode.constants;
 
@@ -510,6 +511,100 @@ describe('ContentNode', () => {
     });
   });
 
+  describe('with type="video"', () => {
+    const identifier = 'video.mp4';
+    const references = {
+      [identifier]: {
+        identifier,
+        variants: [
+          {
+            traits: ['2x', 'light'],
+            url: '',
+            size: { width: 1202, height: 630 },
+          },
+        ],
+      },
+    };
+
+    it('renders an `InlineVideo`', () => {
+      const wrapper = mountWithItem({
+        type: 'video',
+        identifier,
+      }, references);
+
+      const inlineVideo = wrapper.find('.content').find(InlineVideo);
+      expect(inlineVideo.exists()).toBe(true);
+      expect(inlineVideo.props('identifier')).toEqual(identifier);
+    });
+
+    it('does not crash with missing video reference data', () => {
+      expect(() => mountWithItem({
+        type: 'video',
+        identifier,
+      }, {})).not.toThrow();
+    });
+
+    it('renders a `Figure`/`FigureCaption` with metadata', () => {
+      const metadata = {
+        anchor: 'foo',
+        abstract: [{
+          type: 'paragraph',
+          inlineContent: [{ type: 'text', text: 'blah' }],
+        }],
+      };
+      const wrapper = mountWithItem({
+        type: 'video',
+        identifier,
+        metadata,
+      }, references);
+
+      const figure = wrapper.find(Figure);
+      expect(figure.exists()).toBe(true);
+      expect(figure.props('anchor')).toBe('foo');
+      expect(figure.contains(InlineVideo)).toBe(true);
+
+      const caption = wrapper.find(FigureCaption);
+      expect(caption.exists()).toBe(true);
+      expect(caption.contains('p')).toBe(true);
+      expect(caption.props('title')).toBe(metadata.title);
+      expect(caption.text()).toContain('blah');
+    });
+
+    it('renders a `Figure`/`FigureCaption` without an anchor, with text under the video', () => {
+      const metadata = {
+        abstract: [{
+          type: 'paragraph',
+          inlineContent: [{ type: 'text', text: 'blah' }],
+        }],
+      };
+      const wrapper = mountWithItem({
+        type: 'video',
+        identifier,
+        metadata,
+      }, references);
+
+      const figure = wrapper.find(Figure);
+      expect(figure.exists()).toBe(true);
+      expect(figure.props('anchor')).toBeFalsy();
+      expect(figure.contains(InlineVideo)).toBe(true);
+
+      const caption = wrapper.find(FigureCaption);
+      expect(caption.exists()).toBe(true);
+      expect(caption.contains('p')).toBe(true);
+      expect(caption.props('title')).toBeFalsy();
+      expect(caption.text()).toContain('blah');
+      // assert figurerecaption is below the image
+      expect(figure.html()).toMatchInlineSnapshot(`
+        <figure-stub>
+          <inlinevideo-stub identifier="video.mp4"></inlinevideo-stub>
+          <figurecaption-stub>
+            <p>blah</p>
+          </figurecaption-stub>
+        </figure-stub>
+      `);
+    });
+  });
+
   describe('with type="link"', () => {
     it('renders a <a>', () => {
       const wrapper = mountWithItem({

tests/unit/components/ContentNode/InlineVideo.spec.js

@@ -0,0 +1,51 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Licensed under Apache License v2.0 with Runtime Library Exception
+ *
+ * See https://swift.org/LICENSE.txt for license information
+ * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+*/
+
+import InlineVideo from '@/components/ContentNode/InlineVideo.vue';
+import { shallowMount } from '@vue/test-utils';
+import Asset from '@/components/Asset.vue';
+import isClientMobile from 'docc-render/mixins/isClientMobile';
+
+jest.mock('docc-render/mixins/isClientMobile');
+
+isClientMobile.computed.isClientMobile.mockReturnValue(false);
+
+const defaultProps = {
+  identifier: 'foo',
+};
+
+const createWrapper = () => shallowMount(InlineVideo, {
+  propsData: defaultProps,
+});
+
+describe('InlineVideo', () => {
+  it('renders an Asset on desktop', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find(Asset).props()).toEqual({
+      identifier: defaultProps.identifier,
+      videoAutoplays: false,
+      videoMuted: false,
+      showsReplayButton: true,
+      showsVideoControls: false,
+    });
+  });
+
+  it('renders an Asset, on a mobile device', () => {
+    isClientMobile.computed.isClientMobile.mockReturnValue(true);
+    const wrapper = createWrapper();
+    expect(wrapper.find(Asset).props()).toEqual({
+      identifier: defaultProps.identifier,
+      videoAutoplays: false,
+      videoMuted: false,
+      showsReplayButton: false,
+      showsVideoControls: true,
+    });
+  });
+});