From 889a44145bd4ff3b3cd17e30cc9edb279e556fcb Mon Sep 17 00:00:00 2001
From: AnuragVasanwala <75766877+AnuragVasanwala@users.noreply.github.com>
Date: Thu, 21 Dec 2023 19:19:51 +0530
Subject: [PATCH 01/40] =?UTF-8?q?=E2=9C=A8=20Add=20support=20for=20`amp-st?=
=?UTF-8?q?ory-audio-sticker`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/icons/audio_stickers.svg | 1 +
packages/design-system/src/icons/index.ts | 12 +-
.../design-system/src/utils/panelTypes.ts | 1 +
.../src/audio-sticker/constants.js | 100 ++++++++++++++
.../src/audio-sticker/display.js | 95 ++++++++++++++
.../element-library/src/audio-sticker/icon.js | 37 ++++++
.../src/audio-sticker/index.js | 21 +++
.../src/audio-sticker/layer.js | 27 ++++
.../src/audio-sticker/output.js | 21 +++
.../audio-cloud/audio-cloud-posttap.png | Bin 0 -> 4178 bytes
.../audio-cloud/audio-cloud-pretap.png | Bin 0 -> 4412 bytes
.../headphone-cat/headphone-cat-posttap.gif | Bin 0 -> 647689 bytes
.../headphone-cat/headphone-cat-pretap.png | Bin 0 -> 42561 bytes
.../loud-speaker/loud-speaker-posttap.png | Bin 0 -> 80262 bytes
.../loud-speaker/loud-speaker-pretap.png | Bin 0 -> 32326 bytes
.../tape-player/tape-player-posttap.gif | Bin 0 -> 27439 bytes
.../tape-player/tape-player-pretap.png | Bin 0 -> 12395 bytes
packages/element-library/src/constants.ts | 10 ++
packages/element-library/src/elementTypes.js | 6 +
packages/elements/src/constants.ts | 1 +
packages/elements/src/types/element.ts | 7 +
packages/elements/src/types/elementType.ts | 1 +
packages/output/src/page.js | 26 ++++
.../output/src/utils/getUsedAmpExtensions.js | 8 ++
.../src/app/quickActions/constants.js | 4 +
.../src/app/quickActions/useQuickActions.js | 32 ++++-
.../floatingMenu/menus/audio_sticker.js | 58 +++++++++
.../components/floatingMenu/menus/selector.js | 3 +
.../library/panes/shapes/shapesPane.js | 4 +
.../design/audio-sticker/audioStickerStyle.js | 52 ++++++++
.../panels/design/audio-sticker/index.js | 17 +++
.../design/audio-sticker/stickerSize.js | 90 +++++++++++++
.../design/audio-sticker/stickerStyle.js | 122 ++++++++++++++++++
.../design/audio-sticker/stickerType.js | 120 +++++++++++++++++
.../panels/design/audio-sticker/utils.js | 38 ++++++
.../src/components/panels/design/index.js | 5 +-
.../style/getDesignPanelsForSelection.js | 4 +
.../style/icons/audioStickerSelectionIcon.js | 29 +++++
.../src/components/style/styleProvider.js | 4 +
39 files changed, 947 insertions(+), 9 deletions(-)
create mode 100644 packages/design-system/src/icons/audio_stickers.svg
create mode 100644 packages/element-library/src/audio-sticker/constants.js
create mode 100644 packages/element-library/src/audio-sticker/display.js
create mode 100644 packages/element-library/src/audio-sticker/icon.js
create mode 100644 packages/element-library/src/audio-sticker/index.js
create mode 100644 packages/element-library/src/audio-sticker/layer.js
create mode 100644 packages/element-library/src/audio-sticker/output.js
create mode 100644 packages/element-library/src/audio-sticker/sticker-images/audio-cloud/audio-cloud-posttap.png
create mode 100644 packages/element-library/src/audio-sticker/sticker-images/audio-cloud/audio-cloud-pretap.png
create mode 100644 packages/element-library/src/audio-sticker/sticker-images/headphone-cat/headphone-cat-posttap.gif
create mode 100644 packages/element-library/src/audio-sticker/sticker-images/headphone-cat/headphone-cat-pretap.png
create mode 100644 packages/element-library/src/audio-sticker/sticker-images/loud-speaker/loud-speaker-posttap.png
create mode 100644 packages/element-library/src/audio-sticker/sticker-images/loud-speaker/loud-speaker-pretap.png
create mode 100644 packages/element-library/src/audio-sticker/sticker-images/tape-player/tape-player-posttap.gif
create mode 100644 packages/element-library/src/audio-sticker/sticker-images/tape-player/tape-player-pretap.png
create mode 100644 packages/story-editor/src/components/floatingMenu/menus/audio_sticker.js
create mode 100644 packages/story-editor/src/components/panels/design/audio-sticker/audioStickerStyle.js
create mode 100644 packages/story-editor/src/components/panels/design/audio-sticker/index.js
create mode 100644 packages/story-editor/src/components/panels/design/audio-sticker/stickerSize.js
create mode 100644 packages/story-editor/src/components/panels/design/audio-sticker/stickerStyle.js
create mode 100644 packages/story-editor/src/components/panels/design/audio-sticker/stickerType.js
create mode 100644 packages/story-editor/src/components/panels/design/audio-sticker/utils.js
create mode 100644 packages/story-editor/src/components/style/icons/audioStickerSelectionIcon.js
diff --git a/packages/design-system/src/icons/audio_stickers.svg b/packages/design-system/src/icons/audio_stickers.svg
new file mode 100644
index 000000000000..bd69726dc48a
--- /dev/null
+++ b/packages/design-system/src/icons/audio_stickers.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/design-system/src/icons/index.ts b/packages/design-system/src/icons/index.ts
index b9846ad81db0..301b688bcb4e 100644
--- a/packages/design-system/src/icons/index.ts
+++ b/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';
diff --git a/packages/design-system/src/utils/panelTypes.ts b/packages/design-system/src/utils/panelTypes.ts
index 1cb98a21eef9..5fab8003a1f5 100644
--- a/packages/design-system/src/utils/panelTypes.ts
+++ b/packages/design-system/src/utils/panelTypes.ts
@@ -34,6 +34,7 @@ enum PanelTypes {
ImageAccessibility = 'imageAccessibility',
VideoAcessibility = 'videoAccessibility',
Product = 'product',
+ AudioSticker = 'audioSticker',
}
export default PanelTypes;
diff --git a/packages/element-library/src/audio-sticker/constants.js b/packages/element-library/src/audio-sticker/constants.js
new file mode 100644
index 000000000000..381b5ee04555
--- /dev/null
+++ b/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,
+];
diff --git a/packages/element-library/src/audio-sticker/display.js b/packages/element-library/src/audio-sticker/display.js
new file mode 100644
index 000000000000..0acfe7e42c31
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+AudioStickerDisplay.propTypes = {
+ element: StoryPropTypes.elements.shape.isRequired,
+};
+
+export default AudioStickerDisplay;
diff --git a/packages/element-library/src/audio-sticker/icon.js b/packages/element-library/src/audio-sticker/icon.js
new file mode 100644
index 000000000000..c938b30d2c6e
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default AudioStickerIcon;
diff --git a/packages/element-library/src/audio-sticker/index.js b/packages/element-library/src/audio-sticker/index.js
new file mode 100644
index 000000000000..9f614dd784b5
--- /dev/null
+++ b/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';
diff --git a/packages/element-library/src/audio-sticker/layer.js b/packages/element-library/src/audio-sticker/layer.js
new file mode 100644
index 000000000000..d743dd841ab2
--- /dev/null
+++ b/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;
diff --git a/packages/element-library/src/audio-sticker/output.js b/packages/element-library/src/audio-sticker/output.js
new file mode 100644
index 000000000000..bd9d2e0f480e
--- /dev/null
+++ b/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