nutella_framework 0.6.6 → 0.6.7

data/framework_components/roomcast-main-app/gulp/config.js

@@ -0,0 +1,47 @@
+var dest = './dist',
+    src = './src',
+    mui = './node_modules/material-ui/src';
+
+module.exports = {
+    browserSync: {
+        server: {
+            // We're serving the src folder as well
+            // for sass sourcemap linking
+            baseDir: [dest, src]
+        },
+        files: [
+            dest + '/**'
+        ]
+    },
+    less: {
+        src: src + '/less/main.less',
+        watch: [
+            src + '/less/**',
+            mui + '/less/**'
+        ],
+        dest: dest
+    },
+    css: {
+        src: src + "/css/**",
+        dest: dest + "/css"
+    },
+    fonts: {
+        src: src + '/fonts/**',
+        dest: dest + '/fonts'
+    },
+    muiFonts: {
+        src: mui + '/less/material-ui-icons/fonts/**',
+        dest: dest + '/fonts'
+    },
+    browserify: {
+        // Enable source maps
+        debug: true,
+        // A separate bundle will be generated for each
+        // bundle config in the list below
+        bundleConfigs: [{
+            entries: src + '/app/app.js',
+            dest: dest,
+            outputName: 'app.js'
+        }]
+    }
+};

data/framework_components/roomcast-main-app/gulp/tasks/browserify.js

@@ -0,0 +1,77 @@
+/* browserify task
+   ---------------
+   Bundle javascripty things with browserify!
+   This task is set up to generate multiple separate bundles, from
+   different sources, and to use Watchify when run from the default task.
+   See browserify.bundleConfigs in gulp/config.js
+*/
+
+var browserify   = require('browserify');
+var watchify     = require('watchify');
+var bundleLogger = require('../util/bundleLogger');
+var gulp         = require('gulp');
+var handleErrors = require('../util/handleErrors');
+var source       = require('vinyl-source-stream');
+var config       = require('../config').browserify;
+
+gulp.task('browserify', function(callback) {
+
+  var bundleQueue = config.bundleConfigs.length;
+
+  var browserifyThis = function(bundleConfig) {
+
+    var bundler = browserify({
+      // Required watchify args
+      cache: {}, packageCache: {}, fullPaths: false,
+      // Specify the entry point of your app
+      entries: bundleConfig.entries,
+      // Add file extentions to make optional in your requires
+      extensions: config.extensions,
+      // Enable source maps!
+      debug: config.debug
+    });
+
+    var bundle = function() {
+      // Log when bundling starts
+      bundleLogger.start(bundleConfig.outputName);
+
+      return bundler
+        .bundle()
+        // Report compile errors
+        .on('error', handleErrors)
+        // Use vinyl-source-stream to make the
+        // stream gulp compatible. Specifiy the
+        // desired output filename here.
+        .pipe(source(bundleConfig.outputName))
+        // Specify the output destination
+        .pipe(gulp.dest(bundleConfig.dest))
+        .on('end', reportFinished);
+    };
+
+    if(global.isWatching) {
+      // Wrap with watchify and rebundle on changes
+      bundler = watchify(bundler);
+      // Rebundle on update
+      bundler.on('update', bundle);
+    }
+
+    var reportFinished = function() {
+      // Log when bundling completes
+      bundleLogger.end(bundleConfig.outputName);
+
+      if(bundleQueue) {
+        bundleQueue--;
+        if(bundleQueue === 0) {
+          // If queue is empty, tell gulp the task is complete.
+          // https://github.com/gulpjs/gulp/blob/master/docs/API.md#accept-a-callback
+          callback();
+        }
+      }
+    };
+
+    return bundle();
+  };
+
+  // Start bundling with Browserify for each bundleConfig specified
+  config.bundleConfigs.forEach(browserifyThis);
+});

data/framework_components/roomcast-main-app/gulp/tasks/build.js

@@ -0,0 +1,3 @@
+var gulp = require('gulp');
+
+gulp.task('build', ['browserify', 'less', 'fonts']);

data/framework_components/roomcast-main-app/gulp/tasks/css.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var config = require('../config').css;
+
+gulp.task('css', function() {
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-main-app/gulp/tasks/default.js

@@ -0,0 +1,3 @@
+var gulp = require('gulp');
+
+gulp.task('default', ['watch', 'css', 'build']);

data/framework_components/roomcast-main-app/gulp/tasks/fonts.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var config = require('../config').fonts;
+
+gulp.task('fonts', function() {
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-main-app/gulp/tasks/less.js

@@ -0,0 +1,16 @@
+var gulp = require('gulp'),
+  less = require('gulp-less'),
+  autoprefixer = require('gulp-autoprefixer'),
+  sourcemaps = require('gulp-sourcemaps'),
+  handleErrors = require('../util/handleErrors'),
+  config = require('../config').less;
+
+gulp.task('less', function() {
+  return gulp.src(config.src)
+    .pipe(sourcemaps.init())
+    .pipe(less())
+    .on('error', handleErrors)
+    .pipe(autoprefixer({cascade: false, browsers: ['last 2 versions']}))
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-main-app/gulp/tasks/markup.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var config = require('../config').markup;
+
+gulp.task('markup', function() {
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-main-app/gulp/tasks/setWatch.js

@@ -0,0 +1,5 @@
+var gulp = require('gulp');
+
+gulp.task('setWatch', function() {
+  global.isWatching = true;
+});

data/framework_components/roomcast-main-app/gulp/tasks/svgs.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var config = require('../config').svgs;
+
+gulp.task('svgs', function() {
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-main-app/gulp/tasks/watch.js

@@ -0,0 +1,12 @@
+
+/* Notes:
+ - gulp/tasks/browserify.js handles js recompiling with watchify
+ - gulp/tasks/browserSync.js watches and reloads compiled files
+ */
+
+var gulp   = require('gulp');
+var config = require('../config');
+
+gulp.task('watch', ['setWatch'], function() {
+    gulp.watch(config.less.watch, ['less']);
+});

data/framework_components/roomcast-main-app/gulp/util/bundleLogger.js

@@ -0,0 +1,21 @@
+/* bundleLogger
+   ------------
+   Provides gulp style logs to the bundle method in browserify.js
+*/
+
+var gutil        = require('gulp-util');
+var prettyHrtime = require('pretty-hrtime');
+var startTime;
+
+module.exports = {
+  start: function(filepath) {
+    startTime = process.hrtime();
+    gutil.log('Bundling', gutil.colors.green(filepath) + '...');
+  },
+
+  end: function(filepath) {
+    var taskTime = process.hrtime(startTime);
+    var prettyTime = prettyHrtime(taskTime);
+    gutil.log('Bundled', gutil.colors.green(filepath), 'in', gutil.colors.magenta(prettyTime));
+  }
+};

data/framework_components/roomcast-main-app/gulp/util/handleErrors.js

@@ -0,0 +1,15 @@
+var notify = require("gulp-notify");
+
+module.exports = function() {
+
+  var args = Array.prototype.slice.call(arguments);
+
+  // Send error to notification center with gulp-notify
+  notify.onError({
+    title: "Compile Error",
+    message: "<%= error.message %>"
+  }).apply(this, args);
+
+  // Keep gulp from hanging on this task
+  this.emit('end');
+};

data/framework_components/roomcast-main-app/gulpfile.js

@@ -0,0 +1,16 @@
+/*
+  gulpfile.js
+  ===========
+  Rather than manage one giant configuration file responsible
+  for creating multiple tasks, each task has been broken out into
+  its own file in gulp/tasks. Any files in that directory get
+  automatically required below.
+  To add a new task, simply add a new task file that directory.
+  gulp/tasks/default.js specifies the default set of tasks to run
+  when you run `gulp`.
+*/
+
+var requireDir = require('require-dir');
+
+// Require all tasks in gulp/tasks, including subfolders
+requireDir('./gulp/tasks', { recurse: true });

data/framework_components/roomcast-main-app/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>RoomCast</title>
+    <meta name="description" content="RoomCast's main app to log in and play channels.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="dist/main.css">
+    <link rel="stylesheet" type="text/css" href="dist/css/ionicons.min.css">
+</head>
+
+<body>
+
+<!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
+<script>
+    var WebFontConfig = {
+        google: {
+            families: ['Roboto:400,300,500:latin']
+        }
+    };
+    (function () {
+        var wf = document.createElement('script');
+        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+        wf.type = 'text/javascript';
+        wf.async = 'true';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(wf, s);
+    })();
+</script>
+
+<script src="dist/app.js"></script>
+
+</body>
+
+</html>

data/framework_components/roomcast-main-app/nutella.json

@@ -0,0 +1,6 @@
+{
+  "name": "roomcast-main-app",
+  "version": "0.1.0",
+  "type": "interface",
+  "description": "The main web interface of RoomCast, where users can log in and play channels."
+}

data/framework_components/roomcast-main-app/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "material-ui-example",
+  "version": "0.7.0",
+  "description": "Sample project that uses material-ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/callemall/material-ui.git"
+  },
+  "scripts": {
+    "start": "gulp"
+  },
+  "browserify": {
+    "transform": [
+      [
+        "reactify",
+        {
+          "es6": true
+        }
+      ]
+    ]
+  },
+  "devDependencies": {
+    "browser-sync": "^1.8.1",
+    "browserify": "^7.0.3",
+    "gulp": "^3.8.10",
+    "gulp-autoprefixer": "^2.0.0",
+    "gulp-less": "^3.0.0",
+    "gulp-notify": "^2.1.0",
+    "gulp-sourcemaps": "^1.2.8",
+    "gulp-util": "^3.0.1",
+    "pretty-hrtime": "^0.2.2",
+    "reactify": "^0.17.1",
+    "require-dir": "^0.1.0",
+    "underscore": "^1.7.0",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "d3": "^3.5.6",
+    "jquery": "^2.1.4",
+    "jquery-ui": "^1.10.5",
+    "material-ui": "0.7.0",
+    "nutella_lib": "^0.6.2",
+    "react": "0.12.2",
+    "react-tap-event-plugin": "0.1.4"
+  }
+}

data/framework_components/roomcast-main-app/src/app/app.js

@@ -0,0 +1,15 @@
+
+(function () {
+    var React = require('react'),
+        injectTapEventPlugin = require("react-tap-event-plugin"),
+        Main = require('./components/main.js');
+
+    window.React = React;
+    window.getSelection().removeAllRanges();
+
+    injectTapEventPlugin();
+
+    window.ReactMain = React.render(React.createElement(Main), document.body);
+    ReactMain.login = {};
+
+})();

data/framework_components/roomcast-main-app/src/app/components/app/Channel.js

@@ -0,0 +1,72 @@
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+var NutellaMixin = require('./NutellaMixin');
+var iOSMixin = require('./iOSMixin');
+var $ = require('jquery');
+
+/**
+ * @prop channel
+ */
+var Channel = React.createClass({
+
+    mixins: [NutellaMixin, iOSMixin],
+
+    componentDidMount: function() {
+        // Font-size adaptation based on card width
+        $('.text-fit').each(function() {
+            $(this).css('font-size', '2em');
+            while( $(this).width() > $('.name-wrapper').width() - 10 ) {
+                $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px" );
+            }
+        });
+    },
+
+    handleClick: function() {
+        this.props.onSetPlaying(this.props.chId);
+    },
+
+    render: function() {
+
+        var style = {
+            backgroundImage: 'url(' + this.props.channel.screenshot + ')',
+            backgroundSize: '100% 100%'
+        };
+
+        var iconStyle = {
+            backgroundColor: this.props.channel.icon
+        };
+
+        var border = this.props.playing ? {
+            outline: 'solid 5px rgba(255,255,0,0.5)'
+        } : null;
+
+        return (
+            <Paper className='channel' style={style} ref='channelRef' onTouchTap={this.handleClick} >
+
+                <div className='channel-div' style={border}>
+
+                    <div className='channel-caption'>
+
+                        <div className='icon-name-wrapper'>
+
+                            <div className='channel-icon' ref='channelIcon' style={iconStyle} > </div>
+
+                            <div className='name-wrapper'>
+                                <span className='channel-name text-fit'>{this.props.channel.name}</span>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </Paper>);
+
+    }
+
+});
+
+module.exports = Channel;
+

data/framework_components/roomcast-main-app/src/app/components/app/NutellaMixin.js

@@ -0,0 +1,23 @@
+
+var NutellaMixin = {
+
+    getChannelsForRid: function(message, rid) {
+        var myChannelsId = [];
+        var myChannels = [];
+        message.forEach(function(f) {
+            for (var i in f.items) {
+                var item = f.items[i];
+                if (item.name === 'iPad1') {
+                    myChannelsId = item.channels;
+                    break;
+                }
+            }
+        });
+        myChannelsId.forEach(function(id) {
+            myChannels.push(CHANNELS[id]);
+        });
+    },
+
+};
+
+module.exports = NutellaMixin;

data/framework_components/roomcast-main-app/src/app/components/app/Player.js

@@ -0,0 +1,129 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var FloatingActionButton = Mui.FloatingActionButton;
+var d3 = require('d3');
+var $ = require('jquery');
+var NUTELLA = require('nutella_lib');
+
+var Player = React.createClass({
+
+    componentDidMount: function() {
+        var self = this;
+        this.showLoading();
+        $('.channel-frame').load(function(){
+            self.handleOnLoad();
+        });
+        this.interval_ = null;
+    },
+
+    componentWillUnmount: function() {
+    },
+
+    getInitialState: function () {
+        return  {
+            playing: true,
+            loading: true
+        }
+    },
+
+    componentWillReceiveProps: function(props) {
+        this.setState({playing: props.playing});
+    },
+
+    handleOnLoad: function() {
+        this.setState({loading: false});
+        this.hideLoading();
+    },
+
+    showLoading: function() {
+        var self = this;
+
+        d3.xml("dist/assets/Logo_grid.svg", "image/svg+xml", function (logo) {
+
+            self.refs['player'].getDOMNode().appendChild(logo.documentElement);
+
+            d3.select('#logo')
+                .attr({
+                    width: window.innerWidth,
+                    height: window.innerHeight
+                });
+
+            var colorBlue = function(id) {
+                d3.select(id).style({
+                    'fill': '#00bcd4'
+                });
+            };
+
+            var colorPink = function(id) {
+                d3.select(id).style({
+                    'fill': '#e91e63'
+                });
+            };
+
+            var removeColor = function() {
+                d3.selectAll('rect').style({
+                    'fill': null
+                });
+            };
+
+            var sequence = [1,2,3,4,8,7,6,5];
+            var i = 0;
+            var action = function() {
+                removeColor();
+                if(sequence[i] < 5) {
+                    colorBlue('#ch' + sequence[i]);
+                } else {
+                    colorPink('#ch' + sequence[i]);
+                }
+                i++;
+                if(i===sequence.length) {
+                    i = 0;
+                }
+            };
+
+            self.interval_ = setInterval(action, 200);
+        });
+    },
+
+    hideLoading: function() {
+        d3.select('#logo').remove();
+        clearInterval(this.interval_);
+    },
+
+    render: function () {
+
+        var playerStyle = null;
+        if(!this.state.playing) {
+            playerStyle = {
+                opacity: 0,
+                zIndex: 90,
+                pointerEvents: 'none'
+            };
+        } else {
+            playerStyle = {
+                opacity: 1,
+                zIndex: 100,
+                pointerEvents: 'all'
+            };
+        }
+
+        var url = this.props.url;
+        var qp = this.props.nutellaParams;
+        var suffix = 'broker=' + qp.broker + '&app_id=' + qp.app_id + '&run_id=' + qp.run_id;
+        url = url.indexOf('?') === -1 ? url + '?' + suffix : url + '&' + suffix;
+
+        return (
+
+            <div className='player' style={playerStyle} ref='player' >
+
+                <iframe className='channel-frame' src={url} > </iframe>
+
+            </div>
+
+        );
+    }
+
+});
+
+module.exports = Player;

data/framework_components/roomcast-main-app/src/app/components/app/iOSMixin.js

@@ -0,0 +1,22 @@
+
+var iOSMixin = {
+
+    iOScall: function(actionType, actionParameters) {
+
+        // JavaScript to send an action to iOS code
+        var appName = 'roomcast';
+        var url;
+        if(actionParameters) {
+            var jsonString = (JSON.stringify(actionParameters));
+            var escapedJsonParameters = escape(jsonString);
+            url = appName + '://' + actionType + "#" + escapedJsonParameters;
+        } else {
+            url = appName + '://' + actionType;
+        }
+        document.location.href = url;
+        console.log('launching url: ', url);
+    }
+
+};
+
+module.exports = iOSMixin;