Tentative mise en place crossfade sur le background

src/components/launcher/crossfade-image.js

@@ -0,0 +1,46 @@
+/* jshint node: true jsx: true */
+var React = require('react');
+var AnimateMixin = require('../mixins/animate');
+
+module.exports = React.createClass({
+
+  mixins: [AnimateMixin],
+
+  propTypes: {
+    src: React.PropTypes.string
+  },
+
+  getInitialState: function() {
+    return { currSrc: null, prevSrc: null };
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    this.setState({ currSrc: nextProps.src, prevSrc: this.state.currSrc });
+  },
+
+  render: function() {
+
+    var topStyle = {};
+
+    if(this.state.prevSrc) {
+      topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
+    }
+
+    var bottomStyle = {
+      backgroundImage: 'url('+this.state.currSrc+')'
+    };
+
+    return (
+      <div className="crossfade-image">
+        <div className="bottom" style={bottomStyle}></div>
+        <div ref="top" className="top" style={topStyle}></div>
+      </div>
+    );
+
+  },
+
+  componentDidUpdate: function() {
+    this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
+  }
+
+});

src/components/launcher/launcher-view.js

@@ -6,9 +6,11 @@ var AnimateMixin = require('../mixins/animate');
 var actions = require('../../store/actions');
 var connect = require('react-redux').connect;
 var debug = require('../../util/debug')('launcher-view');
+var CrossfadeImage = require('./crossfade-image');
 var path = require('path');
 
 var DEFAULT_PROFILE = path.join(__dirname, '..', '..', '..', 'default-profile.json');
+var DEFAULT_BACKGROUND = path.join(__dirname, '..', '..', '..', 'img', 'background.svg');
 
 var LauncherView = React.createClass({
 
@@ -52,14 +54,11 @@ var LauncherView = React.createClass({
       null
     ;
 
-    var style = {};
-
-    if(currentItem && currentItem.background) {
-      style.backgroundImage = 'url('+currentItem.background+')';
-    }
+    var background = currentItem && currentItem.background ? currentItem.background : DEFAULT_BACKGROUND;
 
     return (
-      <div className="launcher" style={style}>
+      <div className="launcher">
+        <CrossfadeImage src={background} />
         {header}
         <div className="main">
           {nav}

src/components/mixins/animate.js

@@ -1,5 +1,6 @@
 var Events = {
-  ANIMATION_END: 'webkitAnimationEnd'
+  ANIMATION_END: 'webkitAnimationEnd',
+  TRANSITION_END: 'webkitTransitionEnd'
 };
 
 module.exports = {
@@ -13,10 +14,51 @@ module.exports = {
       el.style.webkitAnimation = animation;
 
       function onAnimEnd(evt) {
+        el.style.webkitAnimation = '';
         el.removeEventListener(Events.ANIMATION_END, onAnimEnd);
         return resolve(el);
       }
 
+    });
+  },
+
+  transition: function(component, style, time, easing) {
+    return new Promise(function(resolve, reject) {
+
+      console.log('transition start', style, time);
+
+      time = time || '500ms';
+      easing = easing || 'linear';
+
+      var props = Object.keys(style);
+      var el = component.getDOMNode();
+
+      el.style.transition = null;
+
+      el.addEventListener(Events.TRANSITION_END, onTransitionEnd, false);
+
+      props.forEach(function(styleProp) {
+        el.style[styleProp] = style[styleProp].start;
+      });
+
+      var transition = '';
+      props.forEach(function(styleProp) {
+        if(transition) transition += ', ';
+        transition += styleProp + ' ' + time + ' ' + easing;
+      });
+      el.style.transition = transition;
+
+      props.forEach(function(styleProp) {
+        el.style[styleProp] = style[styleProp].end;
+      });
+
+      function onTransitionEnd(evt) {
+        console.log('transition end', evt);
+        el.style.transition = null;
+        el.removeEventListener(Events.TRANSITION_END, onTransitionEnd);
+        return resolve(el);
+      }
+
     });
   }