feat: improve embed experience (#286)

Author: smeijer

src/components/Embed.js

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Input from './Input';
 import CopyButton from './CopyButton';
 import Embedded from './Embedded';
-import { XIcon } from '@primer/octicons-react';
+import { SyncIcon, XIcon } from '@primer/octicons-react';
 
 function TabButton({ children, active, onClick, disabled }) {
   return (
@@ -24,30 +24,41 @@ function TabButton({ children, active, onClick, disabled }) {
 
 const possiblePanes = ['markup', 'preview', 'query', 'result'];
 
-function Embed({ dirty, gistId, gistVersion }) {
-  const [panes, setPanes] = useState(['preview', 'result']);
+const styles = {
+  section: { width: 850 },
+  frame: { width: 850, height: 375 },
+};
+
+// TODO: make the preview frame height match the end result, and let
+//  the user modify the frame height
+function Embed({ dispatch, dirty, gistId, gistVersion }) {
+  useEffect(() => {
+    if (!dirty) {
+      return;
+    }
 
-  const width = 850;
-  const height = 300;
+    dispatch({ type: 'SAVE' });
+  }, [dirty, gistId, dispatch]);
+
+  const [panes, setPanes] = useState(['preview', 'result']);
 
   const embedUrl =
     [location.origin, 'embed', gistId, gistVersion].filter(Boolean).join('/') +
     `?panes=${panes.join(',')}`;
 
-  const embedCode = `<iframe src="${embedUrl}" height="${height}" width="100%" scrolling="no" frameBorder="0" allowTransparency="true" title="Testing Playground" style="overflow: hidden; display: block; width: 100%"></iframe>`;
+  const embedCode = `<iframe src="${embedUrl}" height="450" width="100%" scrolling="no" frameBorder="0" allowTransparency="true" title="Testing Playground" style="overflow: hidden; display: block; width: 100%"></iframe>`;
   const canAddPane = panes.length < 3;
 
+  const loader = (
+    <div className="flex space-x-4 items-center border rounded w-full py-2 px-3 bg-white text-gray-800 leading-tight">
+      <SyncIcon size={12} className="spinner" />
+      <span>one sec...</span>
+    </div>
+  );
+
   return (
     <div className="settings text-sm pb-2">
       <div className="space-y-6">
-        {dirty && (
-          <section className="bg-blue-100 p-2 text-xs rounded my-2 text-blue-800">
-            Please note that this playground has
-            <strong> unsaved changes </strong>. The embed
-            <strong> will not include </strong> your latest changes!
-          </section>
-        )}
-
         <section className="flex flex-col space-y-4">
           <div className="flex items-center justify-between">
             <h3 className="text-sm font-bold">Configure</h3>
@@ -98,35 +109,51 @@ function Embed({ dirty, gistId, gistVersion }) {
               ))}
             </div>
 
-            <div style={{ width, height }}>
-              <Embedded
-                panes={panes}
-                gistId={gistId}
-                gistVersion={gistVersion}
-              />
+            <div style={styles.frame}>
+              {dirty ? null : (
+                <Embedded
+                  panes={panes}
+                  gistId={gistId}
+                  gistVersion={gistVersion}
+                  height={styles.frame.height}
+                />
+              )}
             </div>
           </div>
         </section>
 
-        <section className="flex flex-col space-y-4" style={{ width }}>
+        <section className="flex flex-col space-y-4" style={styles.section}>
           <h3 className="text-sm font-bold">Copy & Paste</h3>
 
           <label className="text-xs">
             embed link:
-            <div className="flex space-x-4">
-              <Input value={embedUrl} onChange={() => {}} readOnly name="url" />
-              <CopyButton text={embedUrl} />
-            </div>
+            {dirty ? (
+              loader
+            ) : (
+              <div className="flex space-x-4">
+                <Input
+                  value={embedUrl}
+                  onChange={() => {}}
+                  readOnly
+                  name="url"
+                />
+                <CopyButton text={embedUrl} />
+              </div>
+            )}
           </label>
 
           <label className="text-xs">
             embed code:
-            <div className="w-full flex space-x-4">
-              <code className="p-4 rounded bg-gray-200 text-gray-800 font-mono text-xs">
-                {embedCode}
-              </code>
-              <CopyButton text={embedCode} />
-            </div>
+            {dirty ? (
+              loader
+            ) : (
+              <div className="w-full flex space-x-4">
+                <code className="p-4 rounded bg-gray-200 text-gray-800 font-mono text-xs">
+                  {embedCode}
+                </code>
+                <CopyButton text={embedCode} />
+              </div>
+            )}
           </label>
         </section>
       </div>

src/components/Embedded.js

@@ -33,6 +33,8 @@ function Embedded(props) {
   });
   const { markup, query, result, status } = state;
   const isLoading = status === 'loading';
+  // props.height because it describes better, params.maxheight because oembed
+  const height = props.height || params.maxheight || params.height;
 
   const location = useLocation();
   const searchParams = queryString.parse(location.search);
@@ -71,7 +73,10 @@ function Embedded(props) {
   useParentMessaging(dispatch);
 
   return (
-    <div className="relative w-full h-full">
+    <div
+      className="relative w-full h-screen"
+      style={height ? { height } : undefined}
+    >
       <Loader loading={isLoading} />
       <div
         className={[

src/components/Header.js

@@ -117,6 +117,7 @@ function Header({
                 <ModalContents>
                   <Embed
                     dirty={dirty}
+                    dispatch={dispatch}
                     gistId={gistId}
                     gistVersion={gistVersion}
                   />

src/components/Share.js

@@ -18,7 +18,6 @@ function Share({ dirty, dispatch, gistId, gistVersion }) {
     ? [location.origin, 'gist', gistId, gistVersion].filter(Boolean).join('/')
     : location.href;
 
-  console.log('share url');
   return (
     <div className="settings text-sm pb-2">
       <div>

src/lambda/oembed/oembed.js

@@ -34,7 +34,7 @@ function handler(event, context, callback) {
     );
   }
 
-  const { url, referrer, maxwidth = 900, maxheight = 300 } = params;
+  const { url, referrer, maxwidth = 900, maxheight = 450 } = params;
 
   callback(null, {
     statusCode: 200,

src/lambda/server/server.js

@@ -35,7 +35,7 @@ function handler(event, context, callback) {
 
   const oembedLink = [
     `<link rel="alternate" type="application/json+oembed" href="${host}/oembed?${oembedSearch}" title="Testing Playground" />`,
-    `<link rel="iframely player" type="text/html" href="${frameSrc}" media="height: 300" />`,
+    `<link rel="iframely player" type="text/html" href="${frameSrc}" media="height: 450" />`,
   ].join('');
 
   let body = indexHtml.replace(