diff --git a/client/coral-embed/src/Bridge.js b/client/coral-embed/src/Bridge.js index 264069adb..e5f5e9247 100644 --- a/client/coral-embed/src/Bridge.js +++ b/client/coral-embed/src/Bridge.js @@ -3,6 +3,7 @@ import URLSearchParams from '@ungap/url-search-params'; import pym from 'pym.js'; import EventEmitter from 'eventemitter2'; import { buildUrl } from 'coral-framework/utils/url'; + import SnackBar from './SnackBar'; import onIntersect from './onIntersect'; import { @@ -92,6 +93,21 @@ function viewportDimensions() { }; } +function parseAMPHash(opts) { + const result = { ...opts }; + const query = window.location.hash.length && window.location.hash.substr(1); + if (query) { + const parsed = queryString.parse(query); + if (parsed.asset_url && !result.asset_url) { + result.asset_url = parsed.asset_url; + } + if (parsed.asset_id && !result.asset_id) { + result.asset_id = parsed.asset_id; + } + } + return result; +} + export default class Bridge { constructor( element, @@ -110,19 +126,23 @@ export default class Bridge { lazy = process.env.TALK_DEFAULT_LAZY_RENDER === 'TRUE', // Any additional options are extracted to be sent to the embed via the // pym bridge. + amp, ...opts } ) { this.pym = null; this.element = element; - this.opts = opts; + this.amp = amp; + this.lazy = !amp && lazy; + + // Parse amp hash. + this.opts = amp ? parseAMPHash(opts) : opts; this.query = buildQuery(this.opts); this.emitter = new EventEmitter({ wildcard: true }); - this.snackBar = new SnackBar(snackBarStyles || {}); + this.snackBar = amp ? null : new SnackBar(snackBarStyles || {}); this.onAuthChanged = onAuthChanged; this.talkBaseUrl = ensureEndSlash(talkBaseUrl); this.talkStaticUrl = ensureEndSlash(talkStaticUrl); - this.lazy = lazy; // Store queued operations in a queue that can be processed once the stream // is rendered. @@ -179,6 +199,16 @@ export default class Bridge { if (height !== cachedHeight) { this.pym.el.firstChild.style.height = `${height}px`; cachedHeight = height; + if (this.amp) { + window.parent.postMessage( + { + sentinel: 'amp', + type: 'embed-size', + height, + }, + '*' + ); + } } }); @@ -267,8 +297,10 @@ export default class Bridge { // Setup Pym. this.setupPym(); - // Attach the snackBar to the pym parent and to the body of the page. - this.snackBar.attach(window.document.body, this.pym); + if (this.snackBar) { + // Attach the snackBar to the pym parent and to the body of the page. + this.snackBar.attach(window.document.body, this.pym); + } // If the user clicks outside the embed, then tell the embed. document.addEventListener('click', this.handleClick.bind(this), true); @@ -315,7 +347,10 @@ export default class Bridge { this.emitter.removeAllListeners(); // Remove the snackbar. - this.snackBar.remove(); + if (this.snackBar) { + this.snackBar.remove(); + this.snackBar = null; + } // Remove the pym parent. this.pym.remove(); diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js index e64868e15..e3bbcae63 100644 --- a/client/coral-embed/src/index.js +++ b/client/coral-embed/src/index.js @@ -56,6 +56,7 @@ export const Talk = { * @param {String} [config.auth_token] - (optional) A jwt representing the session * @param {String} [config.lazy] - (optional) If set the stream will only render lazily * @param {String} [config.talkStaticUrl] - (optional) Static URL used to serve Talk + * @param {Boolean} [config.amp] - (optional) Run Talk in AMP mode * @return {Object} */ render: (element, config) => { diff --git a/middleware/staticTemplate.js b/middleware/staticTemplate.js index 915dba95c..5afd412d3 100644 --- a/middleware/staticTemplate.js +++ b/middleware/staticTemplate.js @@ -12,6 +12,8 @@ const { STATIC_ORIGIN, } = require('../url'); +const { PORT } = require('../config'); + const { RECAPTCHA_PUBLIC, WEBSOCKET_LIVE_URI } = require('../config'); // Grab TALK_CLIENT_* environment variables. @@ -42,6 +44,7 @@ const TEMPLATE_LOCALS = { MOUNT_PATH, STATIC_URL, TALK_CLIENT_ENV, + PORT, data: TALK_CLIENT_ENV, }; diff --git a/routes/dev/amp.js b/routes/dev/amp.js new file mode 100644 index 000000000..ca16ecc06 --- /dev/null +++ b/routes/dev/amp.js @@ -0,0 +1,20 @@ +const express = require('express'); +const router = express.Router(); + +router.get('/', (req, res) => { + return res.render('dev/amp.njk', { + title: 'Coral Talk AMP', + asset_url: '', + asset_id: '', + }); +}); + +router.get('/button', (req, res) => { + return res.render('dev/amp-button.njk', { + title: 'Coral Talk AMP', + asset_url: '', + asset_id: '', + }); +}); + +module.exports = router; diff --git a/routes/dev/index.js b/routes/dev/index.js index 580e702fd..a25ff176c 100644 --- a/routes/dev/index.js +++ b/routes/dev/index.js @@ -19,5 +19,6 @@ router.get('/', staticTemplate, async (req, res) => { }); } }); +router.use('/amp', staticTemplate, require('./amp')); module.exports = router; diff --git a/routes/embed/index.js b/routes/embed/index.js index 7456a5b71..f9f2ab1c1 100644 --- a/routes/embed/index.js +++ b/routes/embed/index.js @@ -5,4 +5,8 @@ router.use('/stream', (req, res) => { res.render('embed/stream.njk'); }); +router.use('/amp', (req, res) => { + res.render('embed/amp.njk'); +}); + module.exports = router; diff --git a/views/dev/amp-button.njk b/views/dev/amp-button.njk new file mode 100644 index 000000000..3347f27e5 --- /dev/null +++ b/views/dev/amp-button.njk @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + Coral Talk AMP + + + + + + + +
+

Coral Talk AMP

+

+ Ask to go outside and ask to come inside and ask to go outside and ask to + come inside the dog smells bad. Lick butt and make a weird face. Toilet + paper attack claws fluff everywhere meow miao french ciao litterbox. Shake + treat bag immediately regret falling into bathtub or white cat sleeps on a + black shirt so what a cat-ass-trophy! eat owner's food spit up on light + gray carpet instead of adjacent linoleum. Warm up laptop with butt lick + butt fart rainbows until owner yells pee in litter box hiss at cats + scratch the box so loved it, hated it, loved it, hated it but need to + check on human, have not seen in an hour might be dead oh look, human is + alive, hiss at human, feed me. +

+ +
+ +
+
Read more
+ + + + + diff --git a/views/dev/amp.njk b/views/dev/amp.njk new file mode 100644 index 000000000..881abf7bc --- /dev/null +++ b/views/dev/amp.njk @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + Coral Talk AMP + + + + + + + +
+

Coral Talk AMP

+

+ Dismember a mouse and then regurgitate parts of it on the family room + floor. Dont wait for the storm to pass, dance in the rain stand in front + of the computer screen, so stares at human while pushing stuff off a table + chew the plant meow hiss at vacuum cleaner. Terrorize the + hundred-and-twenty-pound rottweiler and steal his bed, not sorry chew the + plant. Litter kitter kitty litty little kitten big roar roar feed me rub + whiskers on bare skin act innocent sleep on keyboard, so give me attention + or face the wrath of my claws for demand to be let outside at once, and + expect owner to wait for me as i think about it spread kitty litter all + over house so nya nya nyan. Catty ipsum massacre a bird in the living room + and then look like the cutest and most innocent animal on the planet you + have cat to be kitten me right meow. Hiss and stare at nothing then run + suddenly away refuse to come home when humans are going to bed; stay out + all night then yowl like i am dying at 4am and lick plastic bags. Chase + dog then run away purrr purr littel cat, little cat purr purr and step on + your keyboard while you're gaming and then turn in a circle . Twitch tail + in permanent irritation put butt in owner's face and the dog smells bad + yet attempt to leap between furniture but woefully miscalibrate and + bellyflop onto the floor; what's your problem? i meant to do that now i + shall wash myself intently. Sniff all the things groom forever, stretch + tongue and leave it slightly out, blep, but bring your owner a dead bird + decide to want nothing to do with my owner today for lay on arms while + you're using the keyboard meow meow, i tell my human or scratch. Sleep on + my human's head then cats take over the world bleghbleghvomit my furball + really tie the room together sleep more napping, more napping all the + napping is exhausting. When in doubt, wash drink water out of the faucet, + cats are fats i like to pets them they like to meow back and cat dog hate + mouse eat string barf pillow no baths hate everything yet swat at dog + kitty kitty but you call this cat food. Cough furball into food bowl then + scratch owner for a new one flex claws on the human's belly and purr like + a lawnmower for has closed eyes but still sees you groom yourself 4 hours + - checked, have your beauty sleep 18 hours - checked, be fabulous for the + rest of the day - checked. Freak human out make funny noise mow mow mow + mow mow mow success now attack human flex claws on the human's belly and + purr like a lawnmower or meowwww. Terrorize the hundred-and-twenty-pound + rottweiler and steal his bed, not sorry paw at your fat belly so yowling + nonstop the whole night small kitty warm kitty little balls of fur or eat + owner's food reward the chosen human with a slow blink. Gate keepers of + hell plan steps for world domination for more napping, more napping all + the napping is exhausting give me some of your food give me some of your + food give me some of your food meh, i don't want it so flop over. Make + meme, make cute face ears back wide eyed so sit and stare. Dead stare with + ears cocked furrier and even more furrier hairball. Stand in front of the + computer screen demand to have some of whatever the human is cooking, then + sniff the offering and walk away for catasstrophe, kitty scratches couch + bad kitty. Wack the mini furry mouse intrigued by the shower, and pooping + rainbow while flying in a toasted bread costume in space. Mesmerizing + birds love me! shake treat bag, yet lies down where is my slave? I'm + getting hungry so lick face hiss at owner, pee a lot, and meow repeatedly + scratch at fence purrrrrr eat muffins and poutine until owner comes back. + You have cat to be kitten me right meow sniff other cat's butt and hang + jaw half open thereafter but run outside as soon as door open so munch on + tasty moths or munch on tasty moths, for paw at beetle and eat it before + it gets away. Sit on human. Gnaw the corn cob massacre a bird in the + living room and then look like the cutest and most innocent animal on the + planet for sit on the laptop. Meow scratch leg; meow for can opener to + feed me cat fur is the new black but hide when guests come over, and Gate + keepers of hell. Refuse to come home when humans are going to bed; stay + out all night then yowl like i am dying at 4am cat slap dog in face or eat + a rug and furry furry hairs everywhere oh no human coming lie on counter + don't get off counter for i like fish sit on human they not getting up + ever but meow meow but cuddle no cuddle cuddle love scratch scratch. +

+

+ I show my fluffy belly but it's a trap! if you pet it i will tear up your + hand refuse to drink water except out of someone's glass mice, so cough + hairball, eat toilet paper or curl into a furry donut lick sellotape but + wack the mini furry mouse. When owners are asleep, cry for no apparent + reason. Chase imaginary bugs. Stinky cat reward the chosen human with a + slow blink, or chase dog then run away. Chew on cable scratch the + furniture for you are a captive audience while sitting on the toilet, pet + me for i like cats because they are fat and fluffy and spend all night + ensuring people don't sleep sleep all day. Scoot butt on the rug need to + check on human, have not seen in an hour might be dead oh look, human is + alive, hiss at human, feed me, leave fur on owners clothes, so instantly + break out into full speed gallop across the house for no reason play + riveting piece on synthesizer keyboard and scoot butt on the rug yet meow + meow. Attack dog, run away and pretend to be victim annoy the old grumpy + cat, start a fight and then retreat to wash when i lose or meow go back to + sleep owner brings food and water tries to pet on head, so scratch get + sprayed by water because bad cat. Meowwww pelt around the house and up and + down stairs chasing phantoms drink water out of the faucet meow meow, i + tell my human. Destroy couch. +

+

+ Ask to go outside and ask to come inside and ask to go outside and ask to + come inside the dog smells bad. Lick butt and make a weird face. Toilet + paper attack claws fluff everywhere meow miao french ciao litterbox. Shake + treat bag immediately regret falling into bathtub or white cat sleeps on a + black shirt so what a cat-ass-trophy! eat owner's food spit up on light + gray carpet instead of adjacent linoleum. Warm up laptop with butt lick + butt fart rainbows until owner yells pee in litter box hiss at cats + scratch the box so loved it, hated it, loved it, hated it but need to + check on human, have not seen in an hour might be dead oh look, human is + alive, hiss at human, feed me. +

+ +
+
Read more
+ +
+ + + diff --git a/views/embed/amp.njk b/views/embed/amp.njk new file mode 100644 index 000000000..4d26888a7 --- /dev/null +++ b/views/embed/amp.njk @@ -0,0 +1,19 @@ + + + + + + Coral Talk Amp Embed + + +
+ + + +