feat(client): implement timeline and recording

README.md

@@ -3,7 +3,7 @@
 </div>
 
 <div align="center">
-  <strong>📝 Make slides with Markdown easily.</strong>
+  <strong>📝 Makes slides with Markdown easily.</strong>
 </div>
 
 <br />
@@ -17,22 +17,36 @@ Just write Markdown and create cool slides.😎
 ## Features
 
 - supports [mdx](https://github.com/mdx-js/mdx)
-  - you can write JavaScript in Markdown
-- supports [WebSlides](https://webslides.tv)
+  - you can write JavaScript into Markdown
+- supports [WebSlides](https://webslides.tv) as Slide UI
 - supports [Presentation API](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API)
-  - also, it works even without Presentation API
-- supports various modes
-  - development
-  - production build
-  - exporting as PDF
-  - deploying to GitHub Pages
-  - live mode
-    - fusuma can stream comments such as Twitter during the presentation
-- supports SNS, OGP, FullScreen, and etc...
-- supports Presenter Mode
-  - you can give a speech while watching a presenter's notes and timer
+  - also, Fusuma works even without Presentation API
+- supports SNS, OGP
+- records your voice
 - customizes JavaScript and CSS freely
 
+## Modes
+
+### Development
+
+Develop with webpack-dev-server.
+
+### Production
+
+Build with webpack.
+
+### Presentation
+
+You can give a speech while watching a presenter's notes and timer
+
+### Live
+
+Fusuma can stream comments such as Twitter during the presentation.
+
+### Deploying to GitHub Pages
+
+### Exporting slides as PDF
+
 ## Demos
 
 - [introduction slide of Fusuma](https://hiroppy.github.io/fusuma/intro) [[repository](/samples/intro)]
@@ -256,9 +270,16 @@ slide:
 
 ![](./media/presenter-host.png)
 
+### Practice Presentation
+
+Fusuma records the slide operation performed by the speaker.  
+And, by recording audio, you can also do time travel.
+
+![](./media/timeline.png)
+
 ## Live Mode
 
-fusuma can fetch tweets from Twitter. In addition, fusuma have an api endpoint.  
+Fusuma can fetch tweets from Twitter. In addition, fusuma have an api endpoint.  
 If you specify a `keyword` and `authentication keys`, fetching from twitter will be enabled.  
 Since comments can be sent to fusuma itself, you can use in the private case.  
 Also, this mode can run with Presenter Mode.

packages/client/assets/style/host.css

@@ -1,5 +1,11 @@
 @import './variable';
 
+.disabled {
+  pointer-events: none;
+  color: #888;
+  cursor: not-allowed;
+}
+
 .host-container {
   background: var(--color-black);
   display: grid;
@@ -81,6 +87,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    user-select: none;
 
     & > *:not(:first-child) {
       margin-left: 20px;
@@ -97,7 +104,7 @@
       font-size: 24px;
 
       & > *:not(:first-child) {
-        margin-left: 12px;
+        margin-left: 20px;
       }
 
       & > svg {
@@ -106,3 +113,28 @@
     }
   }
 }
+
+.host-timeline-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.host-timeline-audio {
+  height: 60px;
+  width: 100%;
+
+  & > audio {
+    outline: none;
+    width: 100%;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
+.host-timeline-body {
+  height: calc(100% - 60px);
+  overflow: auto;
+}

packages/client/assets/style/sidebar.css

@@ -64,18 +64,18 @@
     &:first-child {
       margin-left: 32px;
     }
-  }
 
-  & > a {
-    color: #7bb7fa;
+    & > a {
+      color: #7bb7fa;
 
-    &:not(:first-child) {
-      margin-top: 4px;
-    }
+      &:not(:first-child) {
+        margin-top: 4px;
+      }
 
-    &:focus {
-      outline: none;
-      box-shadow: none !important;
+      &:focus {
+        outline: none;
+        box-shadow: none !important;
+      }
     }
   }
 }

packages/client/package.json

@@ -24,7 +24,9 @@
     "react": "16.8.6",
     "react-burger-menu": "^2.6.10",
     "react-dom": "16.8.6",
+    "react-event-timeline": "^1.6.3",
     "react-icons": "^3.6.1",
+    "react-modal": "^3.8.1",
     "react-pose": "^4.0.8",
     "screenfull": "^4.2.0",
     "webslides": "^1.4.2"