diff --git a/build-system/tasks/css.js b/build-system/tasks/css.js index 539e611df614..49e397b762e2 100644 --- a/build-system/tasks/css.js +++ b/build-system/tasks/css.js @@ -55,10 +55,17 @@ const cssEntryPoints = [ outCss: 'video-autoplay-out.css', }, { + // Publisher imported CSS for `src/amp-story-player.js`. path: 'amp-story-player.css', outJs: 'amp-story-player.css.js', outCss: 'amp-story-player-v0.css', }, + { + // Internal CSS used for the iframes inside `src/amp-story-player.js`. + path: 'amp-story-player-iframe.css', + outJs: 'amp-story-player-iframe.css.js', + outCss: 'amp-story-player-iframe-v0.css', + }, ]; /** diff --git a/css/OWNERS b/css/OWNERS index 68ea9f7bbf65..086d6b752a6d 100644 --- a/css/OWNERS +++ b/css/OWNERS @@ -10,5 +10,9 @@ {name: 'camelburrito', requestReviews: false}, ], }, + { + pattern: '{amp-story-*}.css', + owners: [{name: 'newmuis'}, {name: 'gmajoulet'}, {name: 'enriqe'}], + }, ], } diff --git a/css/amp-story-player-iframe.css b/css/amp-story-player-iframe.css new file mode 100644 index 000000000000..1a52f07f7ba2 --- /dev/null +++ b/css/amp-story-player-iframe.css @@ -0,0 +1,43 @@ +/** + * Copyright 2020 The AMP HTML Authors. All Rights Reserved. + * + * 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 + * + * http://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. + */ + +:host { + all: initial; + display: block; + border-radius: 0 !important; + width: 360px; + height: 600px; + overflow: auto; +} + +.story-player-iframe { + height: 100%; + width: 100%; + flex: 0 0 100%; + border: 0; + opacity: 0; + transition: opacity 500ms ease; +} + +main { + display: flex; + flex-direction: row; + height: 100%; +} + +.i-amphtml-story-player-loaded iframe { + opacity: 1; +} diff --git a/css/amp-story-player.css b/css/amp-story-player.css index 0b1bf7c47db1..92b293701a45 100644 --- a/css/amp-story-player.css +++ b/css/amp-story-player.css @@ -29,6 +29,10 @@ amp-story-player a:first-of-type { display: block; } +amp-story-player a:not(:first-of-type) { + visibility: hidden; +} + amp-story-player::after { content: " "; position: absolute; diff --git a/src/amp-story-player.js b/src/amp-story-player.js index 38cd13459ab0..d2048455d0ac 100644 --- a/src/amp-story-player.js +++ b/src/amp-story-player.js @@ -23,6 +23,8 @@ import { removeFragment, } from './url'; import {dict} from './utils/object'; +// Source for this constant is css/amp-story-player-iframe.css +import {cssText} from '../build/amp-story-player-iframe.css'; import {findIndex} from './utils/array'; import {setStyle} from './style'; import {toArray} from './types'; @@ -34,13 +36,6 @@ const LoadStateClass = { ERROR: 'i-amphtml-story-player-error', }; -/** @const {string} */ -const CSS = ` - :host { all: initial; display: block; border-radius: 0 !important; width: 360px; height: 600px; overflow: auto; } - .story-player-iframe { height: 100%; width: 100%; flex: 0 0 100%; border: 0; opacity: 0; transition: opacity 500ms ease; } - main { display: flex; flex-direction: row; height: 100%; } - .i-amphtml-story-player-loaded iframe { opacity: 1; }`; - /** * Note that this is a vanilla JavaScript class and should not depend on AMP * services, as v0.js is not expected to be loaded in this context. @@ -112,7 +107,7 @@ export class AmpStoryPlayer { // Inject default styles const styleEl = this.doc_.createElement('style'); - styleEl.textContent = CSS; + styleEl.textContent = cssText; shadowRoot.appendChild(styleEl); shadowRoot.appendChild(this.rootEl_); }