🚧 Site > Improve demo

.eslintrc.js

@@ -4,15 +4,14 @@ module.exports = {
         'browser': true,
         'es6': true
     },
-    'plugins': ['node'],
+    'extends': ['eslint:recommended'],
-    'extends': ['eslint:recommended', 'plugin:node/recommended'],
     'parserOptions':
     {
         'sourceType': 'module'
     },
     'rules':
     {
-        'node/no-unsupported-features': 0,
+        'no-unused-vars': 1,
         'no-console': 0,
         'dot-notation': 1,
         'eqeqeq': 1,
@@ -30,8 +29,8 @@ module.exports = {
         'comma-style': [1, 'last'],
         'func-style': [1, 'expression'],
         'id-length': 0,
-        'indent': [1, 4],
+        'indent': [1, 4, { SwitchCase: 1 }],
-        'keyword-spacing': 0,
+        'keyword-spacing': [1, { after: false, before: true, overrides: { from: { after: true }, return: { after: true }, import: { after: true }, case: { after: true } } }],
         'max-len': 0,
         'new-cap': [1, { newIsCap: true, newIsCapExceptions: [], capIsNew: false, capIsNewExceptions: ['Immutable.Map', 'Immutable.Set', 'Immutable.List'] }],
         'no-array-constructor': 1,
@@ -41,7 +40,7 @@ module.exports = {
         'no-new-object': 1,
         'no-plusplus': 0,
         'no-restricted-syntax': 0,
-        'no-trailing-spaces': 0,
+        'no-trailing-spaces': 1,
         'no-underscore-dangle': 0,
         'no-unneeded-ternary': 1,
         'no-whitespace-before-property': 1,
@@ -49,14 +48,14 @@ module.exports = {
         'one-var': [1, 'never'],
         'padded-blocks': [1, 'never'],
         'quote-props': [1, 'as-needed'],
-        'quotes': 0,
+        'quotes': [1, 'single'],
         'semi': [1, 'never'],
         'space-before-blocks': [1, 'always'],
         'space-before-function-paren': [1, { anonymous: 'never', named: 'never', asyncArrow: 'never' }],
         'space-in-parens': [1, 'never'],
         'space-infix-ops': 1,
         'spaced-comment': [1, 'always'],
-        'arrow-body-style': [1, 'as-needed'],
+        'arrow-body-style': 0,
         'arrow-parens': [1, 'always'],
         'arrow-spacing': [1, { before: true, 'after': true }],
         'no-confusing-arrow': 0,
@@ -64,11 +63,11 @@ module.exports = {
         'no-duplicate-imports': 0,
         'no-useless-constructor': 1,
         'no-var': 1,
-        'object-shorthand': 1,
+        'object-shorthand': 0,
         'prefer-const': 1,
         'prefer-rest-params': 1,
         'prefer-spread': 1,
         'prefer-template': 0,
         'template-curly-spacing': [1, 'never']
     }
-};
+}

site/index.html

@@ -62,7 +62,10 @@
                 </div>
                 <div class="audience js-audience">
                     <div class="icon"></div>
+                    <div class="white-cache"></div>
+                    <div class="url-bar"></div>
                 </div>
+                <div class="url">http://192.168.1.13</div>
             </div>
 
             <a class="get-started-button js-scroll-item" href="#get-started">

site/src/javascript/Demo.js

@@ -5,6 +5,7 @@ export default class Demo
 {
     constructor()
     {
+        this.step = 0
         this.$container = document.querySelector('.js-demo')
 
         // Speaker
@@ -13,18 +14,101 @@ export default class Demo
         this.$speakerVideo = document.createElement('video')
         this.$speakerVideo.src = speaker
         this.$speakerVideo.height = 300
-        this.$speakerVideo.autoplay = true
 
         this.$speaker.appendChild(this.$speakerVideo)
 
+        this.speakerCurrentTime = 0
+
         // Audience
         this.$audience = this.$container.querySelector('.js-audience')
 
         this.$audienceVideo = document.createElement('video')
         this.$audienceVideo.src = audience
         this.$audienceVideo.height = 300
-        this.$audienceVideo.autoplay = true
 
         this.$audience.appendChild(this.$audienceVideo)
+
+        this.audienceCurrentTime = 0
+
+        // Go step
+        window.setTimeout(() =>
+        {
+            this.goStep(0)
+        }, 1000)
+
+        /**
+         * Loop
+         */
+        this.setLoop()
+    }
+
+    /**
+     * Set loop
+     */
+    setLoop()
+    {
+        const loop = () =>
+        {
+            window.requestAnimationFrame(loop)
+
+            this.loop()
+        }
+
+        loop()
+    }
+
+    /**
+     * Loop
+     */
+    loop()
+    {
+        if(this.speakerCurrentTime < 7 && this.$speakerVideo.currentTime >= 7)
+        {
+            this.goStep(2)
+        }
+
+        if(this.audienceCurrentTime < 0.85 && this.$audienceVideo.currentTime >= 0.85)
+        {
+            this.goStep(3)
+        }
+
+        this.speakerCurrentTime = this.$speakerVideo.currentTime
+        this.audienceCurrentTime = this.$audienceVideo.currentTime
+    }
+
+    /**
+     * Go to step
+     */
+    goStep(index)
+    {
+        console.log(index)
+        // // Remove old step class
+        // if(this.step !== null)
+        // {
+        //     this.$container.classList.remove(`step-${this.step}`)
+        // }
+
+        // Add new step class
+        this.step = index
+        this.$container.classList.add(`step-${this.step}`)
+
+        // Cases
+        switch(this.step)
+        {
+            case 0:
+                this.$speakerVideo.play()
+                    .then(() =>
+                    {
+                        this.goStep(1)
+                    })
+                break
+
+            case 1:
+                break
+
+            case 2:
+                this.$audienceVideo.play()
+                break
+        }
     }
 }

site/src/style/header.styl

@@ -91,14 +91,18 @@ section.header
         position absolute
         top 520px
         left 50%
-        width 1px
-        height 1px
-        background #ffffff
 
         .speaker
             position absolute
             top -150px
             left -245px
+            opacity 0
+            overflow hidden
+            transition transform 0.75s, opacity 0.75s
+            will-change transform
+
+            video
+                border-radius 5px
 
             .icon
                 position absolute
@@ -114,7 +118,14 @@ section.header
             position absolute
             top -150px
             left -245px
+            transform translateX(-120%)
+            opacity 0
+            overflow hidden
+            transition transform 0.75s, opacity 0.75s
+            will-change transform
 
+            video
+                border-radius 5px
             .icon
                 position absolute
                 left calc(50% - 20px)
@@ -125,6 +136,54 @@ section.header
                 background-repeat no-repeat
                 background-position center center
 
+            .url-bar
+                position absolute
+                top 1.5%
+                left 30%
+                right 30%
+                height 7.5%
+                border-radius 3px
+                background #adadad
+
+            .white-cache
+                position absolute
+                top 0
+                left 30%
+                right 6px
+                height 10.7%
+                background #fffeff
+
+        .url
+            position absolute
+            top -30px
+            left 61px
+            font-size 13px
+            letter-spacing 0.4px
+            font-family Courier
+            color #ffffff
+            opacity 0
+            transform translateX(0px) translateY(0px)
+            transition transform 1s cubic-bezier(0.75, 0, 0.58, 1)
+            will-change transform
+
+        &.step-1
+            .speaker
+                opacity 1
+
+        &.step-2
+            .speaker
+                transform translateX(60%)
+
+            .audience
+                transform translateX(-60%)
+                transition-delay 0.15s, 0.15s
+                opacity 1
+
+        &.step-3
+            .url
+                opacity 1
+                transform translateX(-432px) translateY(-111px)
+
     .get-started-button
         position absolute
         bottom 130px

site/static/svg/demo-audience.svg

@@ -1,14 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.04 80.57"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Fichier 1</title><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M56.57,53.29a3.06,3.06,0,0,0-3.3-.37A18.48,18.48,0,0,1,36.6,53a3,3,0,0,0-3.22.35C28.16,57.59,24.75,64,24.75,69c0,8.14,9.08,11.59,20.27,11.59S65.29,77.12,65.29,69C65.29,64,61.84,57.51,56.57,53.29Z"/><circle class="cls-1" cx="45.02" cy="36.42" r="12.5"/><circle class="cls-1" cx="45.02" cy="9.21" r="9.21"/><path class="cls-1" d="M83.61,34.59a2.26,2.26,0,0,0-2.43-.27,13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26c-3.85,3.11-6.36,7.83-6.36,11.51,0,6,6.69,8.54,14.94,8.54S90,52.16,90,46.16C90,42.46,87.5,37.7,83.61,34.59Z"/><circle class="cls-1" cx="75.1" cy="22.15" r="9.21"/><path class="cls-1" d="M29.89,46.16c0-3.7-2.54-8.46-6.43-11.57A2.26,2.26,0,0,0,21,34.32a13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26C2.51,37.76,0,42.48,0,46.16c0,6,6.69,8.54,14.94,8.54S29.89,52.16,29.89,46.16Z"/><circle class="cls-1" cx="14.94" cy="22.15" r="9.21"/></g></g></svg>
-<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 120.9" style="enable-background:new 0 0 100 120.9;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<rect x="56.9" y="10.4" class="st0" width="10.1" height="20.7"/>
-	<path class="st0" d="M84.2,0H5.4C2.4,0,0,2.4,0,5.4v85.9c0,3,2.4,5.4,5.4,5.4h89.1c3,0,5.4-2.4,5.4-5.4V15.5L84.2,0z M19.6,10.8
-		C19.6,8.1,22,6,25,6H75c3,0,5.4,2.2,5.4,4.8v19.8c0,2.6-2.4,4.8-5.4,4.8H25c-3,0-5.4-2.2-5.4-4.8V10.8L19.6,10.8z M86,86.6H14V44.8
-		h72V86.6z"/>
-</g>
-</svg>

site/static/svg/demo-speaker.svg

@@ -1 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.04 80.57"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Fichier 1</title><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M56.57,53.29a3.06,3.06,0,0,0-3.3-.37A18.48,18.48,0,0,1,36.6,53a3,3,0,0,0-3.22.35C28.16,57.59,24.75,64,24.75,69c0,8.14,9.08,11.59,20.27,11.59S65.29,77.12,65.29,69C65.29,64,61.84,57.51,56.57,53.29Z"/><circle class="cls-1" cx="45.02" cy="36.42" r="12.5"/><circle class="cls-1" cx="45.02" cy="9.21" r="9.21"/><path class="cls-1" d="M83.61,34.59a2.26,2.26,0,0,0-2.43-.27,13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26c-3.85,3.11-6.36,7.83-6.36,11.51,0,6,6.69,8.54,14.94,8.54S90,52.16,90,46.16C90,42.46,87.5,37.7,83.61,34.59Z"/><circle class="cls-1" cx="75.1" cy="22.15" r="9.21"/><path class="cls-1" d="M29.89,46.16c0-3.7-2.54-8.46-6.43-11.57A2.26,2.26,0,0,0,21,34.32a13.63,13.63,0,0,1-12.29.08,2.22,2.22,0,0,0-2.38.26C2.51,37.76,0,42.48,0,46.16c0,6,6.69,8.54,14.94,8.54S29.89,52.16,29.89,46.16Z"/><circle class="cls-1" cx="14.94" cy="22.15" r="9.21"/></g></g></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 120.9" style="enable-background:new 0 0 100 120.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="56.9" y="10.4" class="st0" width="10.1" height="20.7"/>
+	<path class="st0" d="M84.2,0H5.4C2.4,0,0,2.4,0,5.4v85.9c0,3,2.4,5.4,5.4,5.4h89.1c3,0,5.4-2.4,5.4-5.4V15.5L84.2,0z M19.6,10.8
+		C19.6,8.1,22,6,25,6H75c3,0,5.4,2.2,5.4,4.8v19.8c0,2.6-2.4,4.8-5.4,4.8H25c-3,0-5.4-2.2-5.4-4.8V10.8L19.6,10.8z M86,86.6H14V44.8
+		h72V86.6z"/>
+</g>
+</svg>