Skip to content

Commit

Permalink
🖍 Hide the system layer and progress bar in preview mode (#38163)
Browse files Browse the repository at this point in the history 
* Hide the system layer and progress bar in preview mode; unhide them once the visibility state progresses from PREVIEW to VISIBLE

* Revert onVisibiiltyChanged logic added to the system layer and progress bar files

* Use TOGGLE_SYSTEM_UI_IS_VISIBLE to hide the system UI and progress bar in preview mode

* Lint

* Use two ifs instead of if-else

* Create isPreviewing() convenience method

* Hide the system layer when the story loads into preview mode

* Lint

* Replace one of the new isPreviewing() calls because it results in a test failure

* Set the SYSTEM_UI_IS_VISIBLE_STATE to false when loading in preview mode

* Rename isPreviewing() to isVisible()

* Dispatch TOGGLE_SYSTEM_UI_IS_VISIBLE action from amp-story instead of the amp-story-system-layer; change isHidden to isVisible
  • Loading branch information
@coreymasanto
coreymasanto authored May 11, 2022
1 parent 77bc88a commit 43d8797
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 83 deletions.
172 changes: 92 additions & 80 deletions extensions/amp-story/1.0/amp-story-system-layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,105 +92,115 @@ const HIDE_MESSAGE_TIMEOUT_MS = 1500;
/**
* @param {!Element} element
* @param {?Element=} children
* @param {boolean} isVisible
* @return {!Element}
*/
const renderSystemLayerElement = (element, children) => (
<aside class="i-amphtml-story-system-layer i-amphtml-story-system-reset">
{children}
<a class={String(ATTRIBUTION_CLASS)} target="_blank">
<div class="i-amphtml-story-attribution-logo-container">
<img alt="" class="i-amphtml-story-attribution-logo" />
const renderSystemLayerElement = (element, children, isVisible) => {
const systemLayerElement = (
<aside class="i-amphtml-story-system-layer i-amphtml-story-system-reset">
{children}
<a class={String(ATTRIBUTION_CLASS)} target="_blank">
<div class="i-amphtml-story-attribution-logo-container">
<img alt="" class="i-amphtml-story-attribution-logo" />
</div>
<div class="i-amphtml-story-attribution-text" />
</a>
<div class="i-amphtml-story-has-new-page-notification-container">
<div class="i-amphtml-story-has-new-page-text-wrapper">
<span class="i-amphtml-story-has-new-page-circle-icon" />
<div
class="i-amphtml-story-has-new-page-text"
i-amphtml-i18n-text-content={
LocalizedStringId_Enum.AMP_STORY_HAS_NEW_PAGE_TEXT
}
></div>
</div>
</div>
<div class="i-amphtml-story-attribution-text" />
</a>
<div class="i-amphtml-story-has-new-page-notification-container">
<div class="i-amphtml-story-has-new-page-text-wrapper">
<span class="i-amphtml-story-has-new-page-circle-icon" />
<div class="i-amphtml-story-system-layer-buttons">
<div
class="i-amphtml-story-has-new-page-text"
i-amphtml-i18n-text-content={
LocalizedStringId_Enum.AMP_STORY_HAS_NEW_PAGE_TEXT
}
></div>
</div>
</div>
<div class="i-amphtml-story-system-layer-buttons">
<div
role="button"
class={INFO_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_INFO_BUTTON_LABEL
}
/>
<div class="i-amphtml-story-captions-display">
<button
class={CAPTIONS_CLASS + ' i-amphtml-story-button'}
role="button"
class={INFO_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_CAPTIONS_ON_LABEL
LocalizedStringId_Enum.AMP_STORY_INFO_BUTTON_LABEL
}
/>
<div class="i-amphtml-story-captions-display">
<button
class={CAPTIONS_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_CAPTIONS_ON_LABEL
}
/>
<button
class={NOCAPTIONS_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_CAPTIONS_OFF_LABEL
}
/>
</div>
<div class="i-amphtml-story-sound-display">
<button
class={UNMUTE_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_AUDIO_UNMUTE_BUTTON_LABEL
}
/>
<button
class={MUTE_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_AUDIO_MUTE_BUTTON_LABEL
}
/>
</div>
<div class="i-amphtml-paused-display">
<button
class={PAUSE_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_PAUSE_BUTTON_LABEL
}
/>
<button
class={PLAY_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_PLAY_BUTTON_LABEL
}
/>
</div>
<button
class={NOCAPTIONS_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_CAPTIONS_OFF_LABEL
class={
SKIP_TO_NEXT_CLASS +
' i-amphtml-story-ui-hide-button i-amphtml-story-button'
}
/>
</div>
<div class="i-amphtml-story-sound-display">
<button
class={UNMUTE_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_AUDIO_UNMUTE_BUTTON_LABEL
LocalizedStringId_Enum.AMP_STORY_SKIP_TO_NEXT_BUTTON_LABEL
}
/>
<button
class={MUTE_CLASS + ' i-amphtml-story-button'}
class={SHARE_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_AUDIO_MUTE_BUTTON_LABEL
LocalizedStringId_Enum.AMP_STORY_SHARE_BUTTON_LABEL
}
/>
</div>
<div class="i-amphtml-paused-display">
<button
class={PAUSE_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_PAUSE_BUTTON_LABEL
class={
CLOSE_CLASS +
' i-amphtml-story-ui-hide-button i-amphtml-story-button'
}
/>
<button
class={PLAY_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_PLAY_BUTTON_LABEL
LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
}
/>
</div>
<button
class={
SKIP_TO_NEXT_CLASS +
' i-amphtml-story-ui-hide-button i-amphtml-story-button'
}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_SKIP_TO_NEXT_BUTTON_LABEL
}
/>
<button
class={SHARE_CLASS + ' i-amphtml-story-button'}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_SHARE_BUTTON_LABEL
}
/>
<button
class={
CLOSE_CLASS + ' i-amphtml-story-ui-hide-button i-amphtml-story-button'
}
i-amphtml-i18n-aria-label={
LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
}
/>
</div>
<div class="i-amphtml-story-system-layer-buttons-start-position" />
</aside>
);
<div class="i-amphtml-story-system-layer-buttons-start-position" />
</aside>
);

if (!isVisible) {
systemLayerElement.classList.add('i-amphtml-story-hidden');
}

return systemLayerElement;
};

/**
* Contains the event name belonging to the viewer control.
Expand Down Expand Up @@ -282,17 +292,19 @@ export class SystemLayer {
}

/**
* @return {!Element}
* @param {string} initialPageId
* @param {boolean=} isVisible
* @return {!Element}
*/
build(initialPageId) {
build(initialPageId, isVisible = true) {
if (this.root_) {
return this.root_;
}

this.systemLayerEl_ = renderSystemLayerElement(
this.parentEl_,
this.progressBar_.build(initialPageId)
this.progressBar_.build(initialPageId),
isVisible
);
localizeTemplate(this.systemLayerEl_, this.parentEl_);

Expand Down
24 changes: 21 additions & 3 deletions extensions/amp-story/1.0/amp-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -583,12 +583,13 @@ export class AmpStory extends AMP.BaseElement {
/**
* Builds the system layer DOM.
* @param {string} initialPageId
* @param {boolean} isVisible
* @private
*/
buildSystemLayer_(initialPageId) {
buildSystemLayer_(initialPageId, isVisible) {
this.updateAudioIcon_();
this.updatePausedIcon_();
this.element.appendChild(this.systemLayer_.build(initialPageId));
this.element.appendChild(this.systemLayer_.build(initialPageId, isVisible));
}

/** @private */
Expand Down Expand Up @@ -949,7 +950,16 @@ export class AmpStory extends AMP.BaseElement {
layoutStory_() {
const initialPageId = this.getInitialPageId_();

this.buildSystemLayer_(initialPageId);
const shouldShowSystemLayer = !this.getAmpDoc().isPreview();
if (!shouldShowSystemLayer) {
// The default value of `SYSTEM_UI_IS_VISIBLE_STATE` is `true`. We set it
// to `false` here solely to ensure that a subsequent firing of the
// `TOGGLE_SYSTEM_UI_IS_VISIBLE` action with a `true` value registers as
// a change in state instead of being a no-op.
this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false);
}
this.buildSystemLayer_(initialPageId, shouldShowSystemLayer);

this.setThemeColor_();

const storyLayoutPromise = Promise.all([
Expand Down Expand Up @@ -1699,6 +1709,14 @@ export class AmpStory extends AMP.BaseElement {
const vState = this.getAmpDoc().getVisibilityState();
const isPreview = vState === VisibilityState_Enum.PREVIEW;
const isVisible = vState === VisibilityState_Enum.VISIBLE;

if (isPreview) {
this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false);
}
if (isVisible) {
this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, true);
}

isPreview || isVisible ? this.resume_() : this.pause_();
}

Expand Down
8 changes: 8 additions & 0 deletions src/service/ampdoc-impl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -727,6 +727,14 @@ export class AmpDoc {
return devAssert(this.visibilityState_);
}

/**
* Whether the AMP document currently being previewed.
* @return {boolean}
*/
isPreview() {
return this.visibilityState_ == VisibilityState_Enum.PREVIEW;
}

/**
* Whether the AMP document currently visible. The reasons why it might not
* be visible include user switching to another tab, browser running the
Expand Down

0 comments on commit 43d8797

Please sign in to comment.