diff --git a/.eslintrc.js b/.eslintrc.js index 084ddc6..52144d1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -4,15 +4,14 @@ module.exports = { 'browser': true, 'es6': true }, - 'plugins': ['node'], - 'extends': ['eslint:recommended', 'plugin:node/recommended'], + 'extends': ['eslint: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], - 'keyword-spacing': 0, + 'indent': [1, 4, { SwitchCase: 1 }], + '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'] } -}; \ No newline at end of file +} \ No newline at end of file diff --git a/site/index.html b/site/index.html index 3550719..187ee71 100644 --- a/site/index.html +++ b/site/index.html @@ -62,7 +62,10 @@
+
+
+
http://192.168.1.13
diff --git a/site/src/javascript/Demo.js b/site/src/javascript/Demo.js index 6c0eba7..b391137 100644 --- a/site/src/javascript/Demo.js +++ b/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 + } } } \ No newline at end of file diff --git a/site/src/style/header.styl b/site/src/style/header.styl index 04912c0..da958b1 100644 --- a/site/src/style/header.styl +++ b/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 diff --git a/site/static/svg/demo-audience.svg b/site/static/svg/demo-audience.svg index 5b059e9..59e1eb6 100644 --- a/site/static/svg/demo-audience.svg +++ b/site/static/svg/demo-audience.svg @@ -1,14 +1 @@ - - - - - - - - - +Fichier 1 \ No newline at end of file diff --git a/site/static/svg/demo-speaker.svg b/site/static/svg/demo-speaker.svg index 59e1eb6..5b059e9 100644 --- a/site/static/svg/demo-speaker.svg +++ b/site/static/svg/demo-speaker.svg @@ -1 +1,14 @@ -Fichier 1 \ No newline at end of file + + + + + + + + +