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.

Sign up for GitHub

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

Jump to bottom

Add a screen that tells users that their browser is unsupported #13137

Merged
merged 6 commits into from Jan 30, 2018
Merged

Add a screen that tells users that their browser is unsupported #13137

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6169a90
Add unsupported browser screen.
newmuis Jan 30, 2018
923ed99
Remove testing condition.
newmuis Jan 30, 2018
216d2bb
Add expected error and prevent layoutCallback
newmuis Jan 30, 2018
b3a3309
Fix line length
newmuis Jan 30, 2018
c8b4926
Assume browser is supported during tests.
newmuis Jan 30, 2018
2f42128
Remove testing condition.
newmuis Jan 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 24 additions & 8 deletions extensions/amp-story/0.1/amp-story.css
View file
Open in desktop
Expand Up @@ -883,33 +883,41 @@ amp-story[standalone] .i-amphtml-story-developer-log {
white-space: nowrap !important;
}

amp-story[standalone] .i-amphtml-story-no-rotation-overlay {
amp-story[standalone] .i-amphtml-story-no-rotation-overlay,
.i-amphtml-story-unsupported-browser-overlay {
position: fixed !important;
z-index: 9999 !important;
z-index: 200000!important;
font-family: 'Roboto', sans-serif;
font-weight: 700 !important;
line-height: 1.5;
padding: 32px;
background-color: #000 !important;
top:0 !important;
left:0 !important;
width:100% !important;
height: 100% !important;
right:0 !important;
bottom:0 !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
display: none !important;
}

[desktop] .i-amphtml-story-no-rotation-overlay {
display: none !important;
}

amp-story[standalone].i-amphtml-story-landscape .i-amphtml-story-no-rotation-overlay {
amp-story[standalone].i-amphtml-story-landscape .i-amphtml-story-no-rotation-overlay,
.i-amphtml-story-unsupported-browser-overlay {
display: flex !important;
}

.i-amphtml-story-no-rotation-overlay{
.i-amphtml-story-no-rotation-overlay,
.i-amphtml-story-unsupported-browser-overlay {
color: #fff!important;
}

.i-amphtml-rotate-icon {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.48 2.52c3.27 1.55 5.61 4.72 5.97 8.48h1.5C23.44 4.84 18.29 0 12 0l-.66.03 3.81 3.81 1.33-1.32zm-6.25-.77c-.59-.59-1.54-.59-2.12 0L1.75 8.11c-.59.59-.59 1.54 0 2.12l12.02 12.02c.59.59 1.54.59 2.12 0l6.36-6.36c.59-.59.59-1.54 0-2.12L10.23 1.75zm4.6 19.44L2.81 9.17l6.36-6.36 12.02 12.02-6.36 6.36zm-7.31.29C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32z"/></svg>')!important;
.i-amphtml-rotate-icon,
.i-amphtml-gear-icon {
background-repeat: no-repeat!important;
background-position: center center!important;
border-radius: 50%!important;
Expand All @@ -920,6 +928,14 @@ amp-story[standalone].i-amphtml-story-landscape .i-amphtml-story-no-rotation-ove
margin: 16px auto!important;
}

.i-amphtml-rotate-icon {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.48 2.52c3.27 1.55 5.61 4.72 5.97 8.48h1.5C23.44 4.84 18.29 0 12 0l-.66.03 3.81 3.81 1.33-1.32zm-6.25-.77c-.59-.59-1.54-.59-2.12 0L1.75 8.11c-.59.59-.59 1.54 0 2.12l12.02 12.02c.59.59 1.54.59 2.12 0l6.36-6.36c.59-.59.59-1.54 0-2.12L10.23 1.75zm4.6 19.44L2.81 9.17l6.36-6.36 12.02 12.02-6.36 6.36zm-7.31.29C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32z"/></svg>')!important;
}

.i-amphtml-gear-icon {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 20 20" fill="#000000"><path fill="none" d="M0 0h20v20H0V0z"/><path d="M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"/></svg>')!important;
}

.i-amphtml-story-button-container {
display: none !important;
}
Expand Down
74 changes: 62 additions & 12 deletions extensions/amp-story/0.1/amp-story.js
View file
Open in desktop
Expand Up @@ -140,7 +140,32 @@ const LANDSCAPE_ORIENTATION_WARNING = [
},
{
tag: 'div',
text: 'The page is best viewed in Portrait mode.',
text: 'The page is best viewed in portrait mode',
},
],
},
],
},
];


const UNSUPPORTED_BROWSER_WARNING = [
{
tag: 'div',
attrs: dict({'class': 'i-amphtml-story-unsupported-browser-overlay'}),
children: [
{
tag: 'div',
attrs: dict({'class': 'i-amphtml-overlay-container'}),
children: [
{
tag: 'div',
attrs: dict({'class': 'i-amphtml-gear-icon'}),
},
{
tag: 'div',
text: 'We\'re sorry, it looks like your browser doesn\'t support ' +
'this experience',
},
],
},
Expand Down Expand Up @@ -250,12 +275,6 @@ export class AmpStory extends AMP.BaseElement {
buildCallback() {
this.assertAmpStoryExperiment_();

if (this.isDesktop_()) {
this.element.setAttribute('desktop','');
}

this.element.querySelector('amp-story-page').setAttribute('active', '');

if (this.element.hasAttribute(AMP_STORY_STANDALONE_ATTRIBUTE)) {
const html = this.win.document.documentElement;
this.mutateElement(() => {
Expand Down Expand Up @@ -283,8 +302,6 @@ export class AmpStory extends AMP.BaseElement {

registerServiceBuilder(this.win, 'story-variable',
() => this.variableService_);

this.buildLandscapeOrientationOverlay_();
}


Expand Down Expand Up @@ -512,6 +529,12 @@ export class AmpStory extends AMP.BaseElement {

/** @override */
layoutCallback() {
if (!AmpStory.isBrowserSupported(this.win)) {
this.buildUnsupportedBrowserOverlay_();
dev().expectedError(TAG, 'Unsupported browser');
return Promise.resolve();
}

const firstPageEl = user().assertElement(
scopedQuerySelector(this.element, 'amp-story-page'),
'Story must have at least one page.');
Expand All @@ -523,6 +546,7 @@ export class AmpStory extends AMP.BaseElement {
const storyLayoutPromise = this.initializePages_()
.then(() => this.buildSystemLayer_())
.then(() => this.buildHintLayer_())
.then(() => this.buildLandscapeOrientationOverlay_())
.then(() => {
this.pages_.forEach(page => {
page.setActive(false);
Expand Down Expand Up @@ -887,10 +911,27 @@ export class AmpStory extends AMP.BaseElement {
* Build overlay for Landscape mode mobile
*/
buildLandscapeOrientationOverlay_() {
this.element.insertBefore(
renderSimpleTemplate(this.win.document, LANDSCAPE_ORIENTATION_WARNING),
this.element.firstChild);
this.mutateElement(() => {
this.element.insertBefore(
renderSimpleTemplate(this.win.document,
LANDSCAPE_ORIENTATION_WARNING),
this.element.firstChild);
});
}


/**
* Build overlay for Landscape mode mobile
*/
buildUnsupportedBrowserOverlay_() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also detach the amp-story-page components from the DOM to make sure there's no sound / video playing?

Also, not very important since we're not playing the story, but as a good practice I think we should always interact with the DOM from vsync tasks.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, for vsync.

Removing the elements from the DOM causes all kinds of errors since there are a number of race conditions introduced by doing that. Every AMP element manages its own lifecycle, so the other elements get messed up by being removed from the DOM when they weren't expecting it.

this.mutateElement(() => {
this.element.insertBefore(
renderSimpleTemplate(this.win.document, UNSUPPORTED_BROWSER_WARNING),
this.element.firstChild);
});
}


/**
* Get the URL of the given page's background resource.
* @param {!Element} pageElement
Expand Down Expand Up @@ -1369,6 +1410,15 @@ export class AmpStory extends AMP.BaseElement {
}
this.switchTo_(dev().assertElement(this.pages_[0].element).id);
}

/**
* @param {!Window} win
* @return {boolean} true if the user's browser supports the features needed
* for amp-story.
*/
static isBrowserSupported(win) {
return !win.CSS.supports('display', 'grid');
}
}


Expand Down