Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Add support for amp-story-audio-sticker #13540

Merged
merged 56 commits into from
May 23, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
56 commits
Select commit Hold shift + click to select a range
889a441
✨ Add support for `amp-story-audio-sticker`
AnuragVasanwala Dec 21, 2023
7e517fa
Merge branch 'main' into feat/13440--amp-story-audio-sticker
AnuragVasanwala Jan 3, 2024
bec634a
Merge branch 'main' into feat/13440--amp-story-audio-sticker
AnuragVasanwala Jan 4, 2024
304da6c
♻️Remove unnecessary attrs
AnuragVasanwala Jan 5, 2024
24b53cb
♻️Fix naming convention to `camelCase`
AnuragVasanwala Jan 5, 2024
943e668
Use camelCase, change output
swissspidy Jan 8, 2024
75bfcdf
Improve styling
swissspidy Jan 8, 2024
78c35ea
Merge branch 'main' into feat/13440--amp-story-audio-sticker
AnuragVasanwala Jan 8, 2024
6c44461
♻️ Move constants to `story-editor` package
AnuragVasanwala Jan 8, 2024
4a8adab
♻️ Update imports for the constants
AnuragVasanwala Jan 8, 2024
bf53db2
⏪ Remove unused ref from `shapesPane`
AnuragVasanwala Jan 8, 2024
57c287d
♻️ Remove redundant code from `display.js` and add `alt` labels to Au…
AnuragVasanwala Jan 8, 2024
780b40d
🐛 Add fix for `audioSticker` tap bug, also fixes the outline not appe…
AnuragVasanwala Jan 8, 2024
69fb11a
♻️ Use `ProductMenu` as right click menu for the `audioSticker`
AnuragVasanwala Jan 8, 2024
ace04ed
♻️ Hide Link and Animation panels for `audioSticker` element
AnuragVasanwala Jan 8, 2024
7f4caae
Merge branch 'feat/13440--amp-story-audio-sticker' of https://github.…
AnuragVasanwala Jan 8, 2024
f3058b9
Merge branch 'main' into feat/13440--amp-story-audio-sticker
AnuragVasanwala Jan 31, 2024
d6f9191
Merge branch 'main' into feat/13440--amp-story-audio-sticker
AnuragVasanwala Feb 9, 2024
14f873c
Merge branch 'main' into feat/13440--amp-story-audio-sticker
swissspidy Feb 15, 2024
b439bfb
Merge branch 'main' into feat/13440--amp-story-audio-sticker
swissspidy Feb 21, 2024
705a485
♻️ Remove unused deps and export style presetsto be used in tests
Swanand01 Feb 27, 2024
f9c76a3
Add tests for sticker style panels
Swanand01 Feb 27, 2024
9514477
Merge branch 'feat/13440--amp-story-audio-sticker' of https://github.…
Swanand01 Feb 27, 2024
1c180a2
Add getter for the insert Audio Sticker quick action button
Swanand01 Feb 28, 2024
969ab7b
Add fixture container for the Audio Sticker Type Panel
Swanand01 Feb 28, 2024
0fbed9f
Add fixture container for the Audio Sticker Size Panel
Swanand01 Feb 28, 2024
e95b40e
Add fixture container for the Audio Sticker Style Panel
Swanand01 Feb 28, 2024
0a8b17a
Add getByText method
Swanand01 Feb 28, 2024
ec2635d
Add getters for the Audio Sticker style panel fixture containers
Swanand01 Feb 28, 2024
eb2251f
Add karma tests for Audio Sticker
Swanand01 Feb 28, 2024
2fb7894
Add test for Audio Sticker output
Swanand01 Feb 28, 2024
b5a6e06
Update `useQuickActions.js` to mitigate some unrelated test failures
Swanand01 Mar 4, 2024
f2470bf
Merge branch 'main' into feat/13440--amp-story-audio-sticker
AnuragVasanwala Mar 6, 2024
79164d9
Change the selector for audio sticker tap hint
Swanand01 Mar 18, 2024
67f3bd2
Add null check for state.pages
Swanand01 Mar 18, 2024
1e19db8
Merge branch 'main' into feat/13440--amp-story-audio-sticker
Swanand01 Mar 18, 2024
6e6f9d7
Patch `@ampproject/toolbox-optimizer`
swissspidy Mar 18, 2024
829577f
Merge branch 'main' of https://github.com/GoogleForCreators/web-stori…
Swanand01 Mar 29, 2024
efaadef
Add `amp-story-audio-sticker` to allowed story components
Swanand01 Apr 3, 2024
1ca60a9
Add audio sticker markup to `data_test_filter_kses_allowed_html`
Swanand01 Apr 5, 2024
4dff6c8
Add note for the failing output validation test
Swanand01 Apr 5, 2024
9ca1981
Merge branch 'main' into feat/13440--amp-story-audio-sticker
Swanand01 Apr 5, 2024
0343071
Use `waitFor` in the failing test
Swanand01 Apr 5, 2024
fc849d0
Skip the output validation test
Swanand01 Apr 5, 2024
78732d3
Fix TypeScript errors
swissspidy Apr 5, 2024
e063d93
Update import path for constants
Swanand01 Apr 8, 2024
bc342d7
Replace 'audioSticker' with `ElementType.AudioSticker`
Swanand01 Apr 8, 2024
dfaaf80
Use `fixture.events.sleep()` in the failing test
Swanand01 Apr 8, 2024
c437dcf
Use `AUDIO_STICKER_LABELS` for alt attribute
Swanand01 Apr 8, 2024
bb82f61
Wrap output element with a div
Swanand01 Apr 10, 2024
3056862
Add `font-family` style using the output div's classname
Swanand01 Apr 10, 2024
ae6eb92
Merge branch 'main' into feat/13440--amp-story-audio-sticker
swissspidy Apr 29, 2024
6b2e89b
Merge branch 'main' into feat/13440--amp-story-audio-sticker
AnuragVasanwala May 15, 2024
a1124f4
Re-enable skipped test
Swanand01 May 21, 2024
86fc09a
Try cache busting by always using latest runtime version
swissspidy May 22, 2024
50327ae
Merge branch 'main' into feat/13440--amp-story-audio-sticker
Swanand01 May 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/design-system/src/icons/audio_stickers.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 7 additions & 5 deletions packages/design-system/src/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -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';
Expand All @@ -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';
1 change: 1 addition & 0 deletions packages/design-system/src/utils/panelTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ enum PanelTypes {
ImageAccessibility = 'imageAccessibility',
VideoAcessibility = 'videoAccessibility',
Product = 'product',
AudioSticker = 'audioSticker',
}

export default PanelTypes;
100 changes: 100 additions & 0 deletions packages/element-library/src/audio-sticker/constants.js
Original file line number Diff line number Diff line change
@@ -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;
swissspidy marked this conversation as resolved.
Show resolved Hide resolved

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,
];
95 changes: 95 additions & 0 deletions packages/element-library/src/audio-sticker/display.js
Original file line number Diff line number Diff line change
@@ -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]}

Check warning on line 43 in packages/element-library/src/audio-sticker/display.js

View check run for this annotation

Codecov / codecov/patch

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

Added line #L43 was not covered by tests
`;

function AudioStickerDisplay({ element }) {

Check warning on line 46 in packages/element-library/src/audio-sticker/display.js

View check run for this annotation

Codecov / codecov/patch

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

Added line #L46 was not covered by tests
const {
id,
border,
swissspidy marked this conversation as resolved.
Show resolved Hide resolved
width: elementWidth,
height: elementHeight,
sticker,
style,
} = element;

Check warning on line 54 in packages/element-library/src/audio-sticker/display.js

View check run for this annotation

Codecov / codecov/patch

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

Added line #L54 was not covered by tests

const ref = useRef(null);

Check warning on line 56 in packages/element-library/src/audio-sticker/display.js

View check run for this annotation

Codecov / codecov/patch

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

Added line #L56 was not covered by tests

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 =

Check warning on line 68 in packages/element-library/src/audio-sticker/display.js

View check run for this annotation

Codecov / codecov/patch

packages/element-library/src/audio-sticker/display.js#L61-L68

Added lines #L61 - L68 were not covered by tests
height + border.top + border.bottom + 'px';
}
}
} else {
ref.current.style.width = '';
ref.current.style.height = '';

Check warning on line 74 in packages/element-library/src/audio-sticker/display.js

View check run for this annotation

Codecov / codecov/patch

packages/element-library/src/audio-sticker/display.js#L73-L74

Added lines #L73 - L74 were not covered by tests
}
}
});

return (

Check warning on line 79 in packages/element-library/src/audio-sticker/display.js

View check run for this annotation

Codecov / codecov/patch

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

Added line #L79 was not covered by tests
<Element
src={AUDIO_STICKERS[sticker]}
stickerStyle={style}
ref={ref}
height={elementHeight}
width={elementWidth}
alt="audio-sticker"
swissspidy marked this conversation as resolved.
Show resolved Hide resolved
/>
);
}

AudioStickerDisplay.propTypes = {
element: StoryPropTypes.elements.shape.isRequired,
};

export default AudioStickerDisplay;
37 changes: 37 additions & 0 deletions packages/element-library/src/audio-sticker/icon.js
Original file line number Diff line number Diff line change
@@ -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 (

Check warning on line 30 in packages/element-library/src/audio-sticker/icon.js

View check run for this annotation

Codecov / codecov/patch

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

Added line #L30 was not covered by tests
<IconContainer>
<Icons.AudioSticker height={21} width={21} />
</IconContainer>
);
}

export default AudioStickerIcon;
21 changes: 21 additions & 0 deletions packages/element-library/src/audio-sticker/index.js
Original file line number Diff line number Diff line change
@@ -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';
27 changes: 27 additions & 0 deletions packages/element-library/src/audio-sticker/layer.js
Original file line number Diff line number Diff line change
@@ -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 || {};

Check warning on line 22 in packages/element-library/src/audio-sticker/layer.js

View check run for this annotation

Codecov / codecov/patch

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

Added line #L22 was not covered by tests

return alt || __('Audio Sticker', 'web-stories');

Check warning on line 24 in packages/element-library/src/audio-sticker/layer.js

View check run for this annotation

Codecov / codecov/patch

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

Added line #L24 was not covered by tests
swissspidy marked this conversation as resolved.
Show resolved Hide resolved
}

export default getAudioStickerLayerText;
21 changes: 21 additions & 0 deletions packages/element-library/src/audio-sticker/output.js
Original file line number Diff line number Diff line change
@@ -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'.
swissspidy marked this conversation as resolved.
Show resolved Hide resolved
return <div>{'AudioStickerOutput'}</div>;

Check warning on line 18 in packages/element-library/src/audio-sticker/output.js

View check run for this annotation

Codecov / codecov/patch

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

Added line #L18 was not covered by tests
}

export default AudioStickerOutput;
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions packages/element-library/src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
swissspidy marked this conversation as resolved.
Show resolved Hide resolved

export const DEFAULT_ATTRIBUTES_FOR_MEDIA = {
scale: 100,
focalX: 50,
Expand Down
Loading
Loading