✨ Add support for amp-story-audio-sticker

packages/design-system/src/icons/index.ts

@@ -17,6 +17,7 @@
 /**
  * Internal dependencies
  */
+
 export { default as AlignBottom } from './align_bottom.svg';
 export { default as AlignCenter } from './align_center.svg';
 export { default as AlignLeft } from './align_left.svg';
@@ -39,8 +40,9 @@ export { default as ArrowOutline } from './arrow_outline.svg';
 export { default as ArrowRight } from './arrow_right.svg';
 export { default as ArrowRightCurved } from './arrow_right_curved.svg';
 export { default as ArrowRightLarge } from './arrow_right_large.svg';
-export { default as ArrowUp } from './arrow_up.svg';
 export { default as ArrowsLeftRight } from './arrows_leftright.svg';
+export { default as ArrowUp } from './arrow_up.svg';
+export { default as AudioSticker } from './audio_stickers.svg';
 export { default as BackgroundBlur } from './background_blur.svg';
 export { default as BackgroundBlurOff } from './background_blur_off.svg';
 export { default as Border } from './border.svg';
@@ -83,6 +85,7 @@ export { default as FloppyDisk } from './floppy_disk.svg';
 export { default as GearWithGauge } from './gear_with_gauge.svg';
 export { default as Gif } from './gif.svg';
 export { default as Group } from './group.svg';
+export { default as History } from './history.svg';
 export { default as Keyboard } from './keyboard.svg';
 export { default as Launch } from './launch.svg';
 export { default as LetterAHeight } from './letter_a_height.svg';
@@ -94,9 +97,9 @@ export { default as LetterMOutline } from './letter_m_outline.svg';
 export { default as LetterSStrikethrough } from './letter_s_strikethrough.svg';
 export { default as LetterT } from './letter_t.svg';
 export { default as LetterTArrow } from './letter_t_arrow.svg';
+export { default as LetterTLargeLetterTSmall } from './letter_t_large_letter_t_small.svg';
 export { default as LetterTPlus } from './letter_t_plus.svg';
 export { default as LetterTUppercase } from './letter_t_uppercase.svg';
-export { default as LetterTLargeLetterTSmall } from './letter_t_large_letter_t_small.svg';
 export { default as LetterUUnderline } from './letter_u_underline.svg';
 export { default as Link } from './link.svg';
 export { default as LockClosed } from './lock_closed.svg';
@@ -123,12 +126,13 @@ export { default as PictureSwap } from './picture_swap.svg';
 export { default as Pipette } from './pipette.svg';
 export { default as Play } from './play.svg';
 export { default as PlayFilled } from './play_filled.svg';
-export { default as PlusFilledSmall } from './plus_filled_small.svg';
 export { default as PlayOutline } from './play_outline.svg';
 export { default as Plus } from './plus.svg';
 export { default as PlusFilled } from './plus_filled.svg';
+export { default as PlusFilledSmall } from './plus_filled_small.svg';
 export { default as PlusOutline } from './plus_outline.svg';
 export { default as QuestionMarkOutline } from './question_mark_outline.svg';
+export { default as RemoveMask } from './remove_mask.svg';
 export { default as Rotate } from './rotate.svg';
 export { default as Scissors } from './scissors.svg';
 export { default as Settings } from './settings.svg';
@@ -148,5 +152,3 @@ export { default as Union } from './union.svg';
 export { default as Video } from './video.svg';
 export { default as Visibility } from './visibility.svg';
 export { default as VisibilityOff } from './visibility_off.svg';
-export { default as RemoveMask } from './remove_mask.svg';
-export { default as History } from './history.svg';

packages/design-system/src/utils/panelTypes.ts

@@ -34,6 +34,7 @@ enum PanelTypes {
   ImageAccessibility = 'imageAccessibility',
   VideoAcessibility = 'videoAccessibility',
   Product = 'product',
+  AudioSticker = 'audioSticker',
 }
 
 export default PanelTypes;

packages/element-library/src/audio-sticker/constants.js

@@ -0,0 +1,100 @@
+/*
+ * Copyright 2023 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.
+ */
+/**
+ * External dependencies
+ */
+import { PanelTypes } from '@googleforcreators/design-system';
+/**
+ * Internal dependencies
+ */
+import { SHARED_DEFAULT_ATTRIBUTES } from '../shared';
+import headphoneCat from './sticker-images/headphone-cat/headphone-cat-pretap.png';
+import tapePlayer from './sticker-images/tape-player/tape-player-pretap.png';
+import loudSpeaker from './sticker-images/loud-speaker/loud-speaker-posttap.png';
+import audioCloud from './sticker-images/audio-cloud/audio-cloud-posttap.png';
+
+export const hasEditMode = false;
+export const hasEditModeIfLocked = false;
+export const hasEditModeMoveable = false;
+export const editModeGrayout = false;
+
+export const hasDesignMenu = true;
+
+export const hasDuplicateMenu = false;
+
+export const isMedia = false;
+
+export const canFlip = true;
+
+export const isMaskable = false;
+
+export const isAspectAlwaysLocked = false;
+
+export const resizeRules = {
+  vertical: false,
+  horizontal: false,
+  diagonal: false,
+};
+
+export const AUDIO_STICKERS = {
+  'headphone-cat': headphoneCat,
+  'tape-player': tapePlayer,
+  'loud-speaker': loudSpeaker,
+  'audio-cloud': audioCloud,
+};
+
+export const AUDIO_STICKER_WIDTH_PRESETS = {
+  SMALL: 120,
+  LARGE: 180,
+};
+
+export const AUDIO_STICKER_ASPECT_RATIOS = {
+  'headphone-cat': 1.24,
+  'tape-player': 1.18,
+  'loud-speaker': 1,
+  'audio-cloud': 1.54,
+};
+
+export const AUDIO_STICKER_DEFAULT_PRESET = {
+  x: 100,
+  y: 100,
+  width:
+    AUDIO_STICKER_WIDTH_PRESETS.SMALL *
+    AUDIO_STICKER_ASPECT_RATIOS['headphone-cat'],
+  height: AUDIO_STICKER_WIDTH_PRESETS.SMALL,
+  sticker: 'headphone-cat',
+  size: 'small',
+};
+
+export const AUDIO_STICKER_STYLES = {
+  none: '',
+  outline: 'border: 2px solid white; border-radius: 20px',
+  dropshadow: 'filter: drop-shadow(0 0 0.75rem crimson);',
+};
+
+export const defaultAttributes = {
+  ...SHARED_DEFAULT_ATTRIBUTES,
+  size: 'small',
+  sticker: 'headphone-cat',
+  style: 'none',
+  lockDimensions: true,
+};
+
+export const panels = [
+  PanelTypes.ElementAlignment,
+  PanelTypes.AudioSticker,
+  PanelTypes.Animation,
+];

packages/element-library/src/audio-sticker/display.js

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2023 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.
+ */
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+import { useRef } from '@googleforcreators/react';
+import { useTransformHandler } from '@googleforcreators/transform';
+import { shouldDisplayBorder } from '@googleforcreators/masks';
+import { StoryPropTypes } from '@googleforcreators/elements';
+
+/**
+ * Internal dependencies
+ */
+import {
+  elementFillContent,
+  elementWithBackgroundColor,
+  elementWithBorder,
+} from '../shared';
+import { AUDIO_STICKERS, AUDIO_STICKER_STYLES } from './constants';
+
+/**
+ * Internal dependencies
+ */
+
+const Element = styled.img`
+  ${elementFillContent}
+  ${elementWithBackgroundColor}
+  ${elementWithBorder}
+  ${({ stickerStyle }) => AUDIO_STICKER_STYLES[stickerStyle]}
+`;
+
+function AudioStickerDisplay({ element }) {
+  const {
+    id,
+    border,
+    width: elementWidth,
+    height: elementHeight,
+    sticker,
+    style,
+  } = element;
+
+  const ref = useRef(null);
+
+  useTransformHandler(id, (transform) => {
+    // Since outside border is applied directly to the element, we need to
+    // adjust the size of the element according to the border width.
+    if (ref.current) {
+      if (transform) {
+        const { resize } = transform;
+        if (resize && resize[0] !== 0 && resize[1] !== 0) {
+          const [width, height] = resize;
+          if (shouldDisplayBorder(element)) {
+            ref.current.style.width = width + border.left + border.right + 'px';
+            ref.current.style.height =
+              height + border.top + border.bottom + 'px';
+          }
+        }
+      } else {
+        ref.current.style.width = '';
+        ref.current.style.height = '';
+      }
+    }
+  });
+
+  return (
+    <Element
+      src={AUDIO_STICKERS[sticker]}
+      stickerStyle={style}
+      ref={ref}
+      height={elementHeight}
+      width={elementWidth}
+      alt="audio-sticker"
+    />
+  );
+}
+
+AudioStickerDisplay.propTypes = {
+  element: StoryPropTypes.elements.shape.isRequired,
+};
+
+export default AudioStickerDisplay;

packages/element-library/src/audio-sticker/icon.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2020 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.
+ */
+
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+import { Icons } from '@googleforcreators/design-system';
+
+const IconContainer = styled.div`
+  height: 21px;
+  width: 21px;
+  overflow: hidden;
+`;
+
+function AudioStickerIcon() {
+  return (
+    <IconContainer>
+      <Icons.AudioSticker height={21} width={21} />
+    </IconContainer>
+  );
+}
+
+export default AudioStickerIcon;

packages/element-library/src/audio-sticker/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2023 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 { default as Display } from './display';
+export { default as Output } from './output';
+export { default as LayerIcon } from './icon';
+export { default as getLayerText } from './layer';
+
+export * from './constants';

packages/element-library/src/audio-sticker/layer.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 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.
+ */
+/**
+ * External dependencies
+ */
+import { __ } from '@googleforcreators/i18n';
+
+function getAudioStickerLayerText(element) {
+  const { alt } = element?.resource || {};
+
+  return alt || __('Audio Sticker', 'web-stories');
+}
+
+export default getAudioStickerLayerText;

packages/element-library/src/audio-sticker/output.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2023 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.
+ */
+function AudioStickerOutput() {
+  // TODO (@AnuragVasanwala): Need to move this logic here from 'packages/output/src/page.js'.
+  return <div>{'AudioStickerOutput'}</div>;
+}
+
+export default AudioStickerOutput;

packages/element-library/src/constants.ts

@@ -13,6 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+// TODO (@AnuragVasanwala): Fix ESLint issue.
+export {
+  AUDIO_STICKERS,
+  AUDIO_STICKER_WIDTH_PRESETS,
+  AUDIO_STICKER_ASPECT_RATIOS,
+  AUDIO_STICKER_DEFAULT_PRESET,
+  AUDIO_STICKER_STYLES,
+} from './audio-sticker/constants';
+
 export const DEFAULT_ATTRIBUTES_FOR_MEDIA = {
   scale: 100,
   focalX: 50,