Revert "Add DeviceFrames support (#515)" (#526)

This reverts commit 1621056.

Author: Dobromir Hristov

bin/check-source

@@ -18,7 +18,7 @@ here="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
 function replace_acceptable_years() {
     # this needs to replace all acceptable forms with 'YEARS'
-    sed -e 's/20[12][78901]-20[12][890123]/YEARS/' -e 's/20[12][890123]/YEARS/'
+    sed -e 's/20[12][78901]-20[12][89012]/YEARS/' -e 's/20[12][89012]/YEARS/'
 }
 
 printf "=> Checking license headers… "

src/components/Asset.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  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
@@ -55,10 +55,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    deviceFrame: {
-      type: String,
-      required: false,
-    },
   },
   computed: {
     rawAsset() {
@@ -107,7 +103,6 @@ export default {
         muted: this.videoMuted,
         autoplays: this.prefersReducedMotion ? false : this.videoAutoplays,
         posterVariants: this.videoPoster ? this.videoPoster.variants : [],
-        deviceFrame: this.deviceFrame,
       };
     },
     assetListeners() {

src/components/ConditionalWrapper.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  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
@@ -28,7 +28,6 @@ import Row from './ContentNode/Row.vue';
 import TabNavigator from './ContentNode/TabNavigator.vue';
 import TaskList from './ContentNode/TaskList.vue';
 import LinksBlock from './ContentNode/LinksBlock.vue';
-import DeviceFrame from './ContentNode/DeviceFrame.vue';
 
 export const BlockType = {
   aside: 'aside',
@@ -217,14 +216,9 @@ function renderNode(createElement, references) {
       abstract = [],
       anchor,
       title,
-      ...metadata
     },
-    ...rest
+    ...node
   }) => {
-    const node = {
-      ...rest,
-      metadata,
-    };
     const figureContent = [renderChildren([node])];
     if ((title && abstract.length) || abstract.length) {
       // if there is a `title`, it should be above, otherwise below
@@ -236,14 +230,6 @@ function renderNode(createElement, references) {
     return createElement(Figure, { props: { anchor } }, figureContent);
   };
 
-  const renderDeviceFrame = ({ metadata: { deviceFrame }, ...node }) => (
-    createElement(DeviceFrame, {
-      props: {
-        device: deviceFrame,
-      },
-    }, renderChildren([node]))
-  );
-
   return function render(node) {
     switch (node.type) {
     case BlockType.aside: {
@@ -349,14 +335,14 @@ function renderNode(createElement, references) {
       if (node.metadata && node.metadata.abstract) {
         return renderFigure(node);
       }
-      if (!references[node.identifier]) return null;
-      const { deviceFrame } = node.metadata || {};
-      return createElement(BlockVideo, {
-        props: {
-          identifier: node.identifier,
-          deviceFrame,
-        },
-      });
+
+      return references[node.identifier] ? (
+        createElement(BlockVideo, {
+          props: {
+            identifier: node.identifier,
+          },
+        })
+      ) : null;
     }
     case BlockType.row: {
       const columns = node.numberOfColumns ? { large: node.numberOfColumns } : undefined;
@@ -407,16 +393,16 @@ function renderNode(createElement, references) {
       }
 
       const image = references[node.identifier];
-      if (!image) return null;
-      if (node.metadata && node.metadata.deviceFrame) {
-        return renderDeviceFrame(node);
-      }
-      return createElement(InlineImage, {
-        props: {
-          alt: image.alt,
-          variants: image.variants,
-        },
-      });
+      return image ? (
+        createElement(InlineImage, {
+          props: {
+            alt: image.alt,
+            variants: image.variants,
+          },
+        })
+      ) : (
+        null
+      );
     }
     case InlineType.link:
       // Note: `InlineType.link` has been deprecated, but may still be found in old JSON.

src/components/ContentNode.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  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
@@ -15,7 +15,6 @@
     :video-muted="false"
     :showsReplayButton="!isClientMobile"
     :showsVideoControls="isClientMobile"
-    :deviceFrame="deviceFrame"
   />
 </template>
 
@@ -32,10 +31,6 @@ export default {
       type: String,
       required: true,
     },
-    deviceFrame: {
-      type: String,
-      required: false,
-    },
   },
 };
 </script>

src/components/ContentNode/BlockVideo.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  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
@@ -17,15 +17,14 @@
       :showsControls="showsControls"
       :muted="muted"
       :posterVariants="posterVariants"
-      :deviceFrame="deviceFrame"
       @pause="onPause"
       @playing="onVideoPlaying"
       @ended="onVideoEnd"
     />
     <a
       class="replay-button"
       href="#"
-      :class="{ visible: showsReplayButton }"
+      :class="{ visible: this.showsReplayButton }"
       @click.prevent="replay"
     >
       {{ text }}
@@ -68,10 +67,6 @@ export default {
       type: Array,
       default: () => [],
     },
-    deviceFrame: {
-      type: String,
-      required: false,
-    },
   },
   computed: {
     text: ({ played }) => (played ? 'Replay' : 'Play'),
@@ -84,7 +79,7 @@ export default {
   },
   methods: {
     async replay() {
-      const videoPlayer = this.$refs.asset.$refs.video;
+      const videoPlayer = this.$refs.asset.$el;
       if (videoPlayer) {
         await videoPlayer.play();
         this.showsReplayButton = false;
@@ -110,7 +105,7 @@ export default {
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
 
-.video-replay-container .replay-button {
+.replay-button {
   display: flex;
   align-items: center;
   justify-content: center;