We're doing it live!

Author: Ives van Hoorne

packages/app/package.json

@@ -151,6 +151,7 @@
     "monaco-vue": "^0.2.1",
     "normalize.css": "^5.0.0",
     "normalizr": "^3.2.3",
+    "phoenix": "^1.3.0",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",
     "posthtml": "^0.11.3",

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -88,6 +88,10 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     ) {
       this.resizeEditor();
     }
+
+    if (this.props.readOnly !== nextProps.readOnly && this.editor) {
+      this.editor.updateOptions({ readOnly: !!nextProps.readOnly });
+    }
     return false;
   }
 
@@ -1040,6 +1044,8 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       folding: true,
       glyphMargin: false,
       fixedOverflowWidgets: true,
+
+      readOnly: !!this.props.readOnly,
     };
   };
 

packages/app/src/app/components/CodeEditor/types.js

@@ -36,7 +36,6 @@ export interface Editor {
     corrections?: Array<ModuleCorrection>
   ) => any;
   changeCode?: (code: string) => any;
-
   currentModule?: Module;
   setTSConfig?: (tsConfig: Object) => void;
 }
@@ -56,4 +55,5 @@ export type Props = {
   dependencies?: ?{ [name: string]: string },
   highlightedLines?: Array<number>,
   tsconfig?: Object,
+  readOnly?: boolean,
 };

packages/app/src/app/pages/Live/index.js

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import QuickActions from 'app/pages/Sandbox/QuickActions';
+
+import Title from 'app/components/Title';
+import SubTitle from 'app/components/SubTitle';
+import Centered from 'common/components/flex/Centered';
+import Skeleton from 'app/components/Skeleton';
+
+import Editor from '../Sandbox/Editor';
+
+class LivePage extends React.Component {
+  componentWillMount() {
+    this.initializeLive();
+  }
+
+  initializeLive = () => {
+    this.props.signals.live.roomJoined({
+      roomId: this.props.match.params.id,
+    });
+  };
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.match.params.id !== this.props.match.params.id) {
+      this.initializeLive();
+    }
+  }
+
+  render() {
+    const { match, store } = this.props;
+
+    if (store.live.isLoading) {
+      return (
+        <Centered horizontal vertical>
+          <Skeleton
+            titles={[
+              {
+                content: 'Loading sandbox...',
+                delay: 0,
+              },
+              {
+                content: 'Fetching git repository...',
+                delay: 2,
+              },
+            ]}
+          />
+        </Centered>
+      );
+    }
+
+    if (store.live.error) {
+      return (
+        <Centered style={{ height: '100vh' }} horizontal vertical>
+          <Title>An error occured when connecting to the live session:</Title>
+          <SubTitle>{store.editor.error}</SubTitle>
+          <br />
+          <br />
+          <Link to="/s">Create Sandbox</Link>
+        </Centered>
+      );
+    }
+
+    const sandbox = store.editor.currentSandbox;
+
+    if (sandbox) {
+      document.title = `${sandbox.title || sandbox.id} - CodeSandbox`;
+    }
+
+    return (
+      <React.Fragment>
+        <Editor match={match} />
+        <QuickActions />
+      </React.Fragment>
+    );
+  }
+}
+
+export default inject('signals', 'store')(
+  DragDropContext(HTML5Backend)(observer(LivePage))
+);

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.js

@@ -41,7 +41,7 @@ class Preview extends React.Component<Props, State> {
       this.handleModuleSyncedChange.bind(this, preview)
     );
     const disposeHandleCodeChange = reaction(
-      () => this.props.store.editor.currentModule.code,
+      () => this.props.store.editor.currentSandbox.modules.map(m => m.code),
       () => {
         if (preventCodeExecution) {
           preventCodeExecution = false;

packages/app/src/app/pages/Sandbox/Editor/Content/index.js

@@ -326,6 +326,7 @@ class EditorPreview extends React.Component<Props, State> {
               width={editorWidth}
               height={editorHeight}
               settings={settings(store)}
+              readOnly={store.live.isLive && !store.live.isCurrentEditor}
               onNpmDependencyAdded={name => {
                 if (sandbox.owned) {
                   signals.editor.addNpmDependency({ name, isDev: true });

packages/app/src/app/pages/Sandbox/Editor/Navigation/index.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 
 import GitHubIcon from 'react-icons/lib/go/mark-github';
+import LiveIcon from 'react-icons/lib/md/cast-connected';
 
-import workspaceItems from 'app/store/modules/workspace/items';
+import getWorkspaceItems from 'app/store/modules/workspace/items';
 import Tooltip from 'common/components/Tooltip';
 
 import InfoIcon from './InfoIcon';
@@ -19,31 +20,34 @@ const IDS_TO_ICONS = {
   github: GitHubIcon,
   deploy: RocketIcon,
   config: ConfigurationIcon,
+  live: LiveIcon,
 };
 
 const Navigation = ({ store, signals }) => (
   <Container>
-    {workspaceItems.filter(w => !w.show || w.show(store)).map(item => {
-      const { id, name } = item;
-      const Icon = IDS_TO_ICONS[id];
-      const selected = id === store.workspace.openedWorkspaceItem;
-      return (
-        <Tooltip key={id} position="right" title={name}>
-          <IconContainer
-            selected={selected}
-            onClick={() => {
-              if (selected) {
-                signals.workspace.setWorkspaceItem({ item: null });
-              } else {
-                signals.workspace.setWorkspaceItem({ item: id });
-              }
-            }}
-          >
-            <Icon />
-          </IconContainer>
-        </Tooltip>
-      );
-    })}
+    {getWorkspaceItems(store)
+      .filter(w => !w.show || w.show(store))
+      .map(item => {
+        const { id, name } = item;
+        const Icon = IDS_TO_ICONS[id];
+        const selected = id === store.workspace.openedWorkspaceItem;
+        return (
+          <Tooltip key={id} position="right" title={name}>
+            <IconContainer
+              selected={selected}
+              onClick={() => {
+                if (selected) {
+                  signals.workspace.setWorkspaceItem({ item: null });
+                } else {
+                  signals.workspace.setWorkspaceItem({ item: id });
+                }
+              }}
+            >
+              <Icon />
+            </IconContainer>
+          </Tooltip>
+        );
+      })}
   </Container>
 );
 

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js

@@ -222,7 +222,7 @@ class DirectoryEntry extends React.Component {
                     showDeleteDirectoryModal: false,
                   });
                   this.props.signals.files.directoryDeleted({
-                    moduleShortid: shortid,
+                    directoryShortid: shortid,
                   });
                 }}
               />

packages/app/src/app/pages/Sandbox/Editor/Workspace/index.js

@@ -3,12 +3,13 @@ import { inject, observer } from 'mobx-react';
 
 import VERSION from 'common/version';
 
-import workspaceItems from 'app/store/modules/workspace/items';
+import getWorkspaceItems from 'app/store/modules/workspace/items';
 import SocialInfo from 'app/components/SocialInfo';
 
 import Files from './items/Files';
 import ProjectInfo from './items/ProjectInfo';
 import GitHub from './items/GitHub';
+import Live from './items/Live';
 import Deployment from './items/Deployment';
 import ConfigurationFiles from './items/ConfigurationFiles';
 import NotOwnedSandboxInfo from './items/NotOwnedSandboxInfo';
@@ -24,6 +25,7 @@ const idToItem = {
   github: GitHub,
   deploy: Deployment,
   config: ConfigurationFiles,
+  live: Live,
 };
 
 function Workspace({ store }) {
@@ -38,7 +40,7 @@ function Workspace({ store }) {
 
   const Component = sandbox.owned ? idToItem[currentItem] : NotOwnedSandboxInfo;
 
-  const item = workspaceItems.find(i => i.id === currentItem);
+  const item = getWorkspaceItems(store).find(i => i.id === currentItem);
   return (
     <Container>
       {sandbox.owned && <ItemTitle>{item.name}</ItemTitle>}

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+
+import Button from 'app/components/Button';
+
+import {
+  Description,
+  WorkspaceInputContainer,
+  WorkspaceSubtitle,
+} from '../../elements';
+
+const Live = ({ signals, store }) => (
+  <div>
+    <Description>
+      Invite others to live edit this sandbox with you. We{"'"}re doing it live!
+    </Description>
+
+    <WorkspaceSubtitle>Create live room</WorkspaceSubtitle>
+    <Description>
+      To invite others you need to generate a URL that others can join.
+    </Description>
+    <WorkspaceInputContainer>
+      <Button
+        onClick={() => {
+          signals.live.createLiveClicked({ sandboxId: store.editor.currentId });
+        }}
+        block
+      >
+        Go Live
+      </Button>
+    </WorkspaceInputContainer>
+  </div>
+);
+
+export default inject('signals', 'store')(observer(Live));