Remote Control

popcorn-time · Mar 10, 2014 · 378ffd9 · 378ffd9 · pvieito · Mar 10, 2014
1 parent 8a02de0
commit 378ffd9
Show file tree

Hide file tree

Showing 8 changed files with 241 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <script>window.__startTime = (new Date()*1);</script>
     <link rel="stylesheet" type="text/css" href="css/app.css">
     <link rel="stylesheet" type="text/css" href="js/vendor/video-js/video-js.css">
+
   </head>
   <body>
 
@@ -180,7 +181,7 @@ <h4><%= i18n.__('subtitledIn') %></h4>
     <script src="js/frontend/controllers/search.js"></script>
     <script src="js/frontend/controllers/filter.js"></script>
     <script src="js/frontend/router.js"></script>
-
+    <script src="rc/index.js"></script>
     <script>userTracking.event('App Start', 'Ready - '+Settings.get('version'),  (Math.round(((new Date()*1) - __startTime) / 100) * 100) +'ms' ).send();</script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -26,7 +26,10 @@
     "adm-zip": "~0.4.4",
     "i18n": "~0.4.1",
     "universal-analytics": "~0.3.4",
-    "node-uuid": "~1.4.1"
+    "node-uuid": "~1.4.1",
+    "socket.io": "^0.9.16",
+    "express": "^3.5.0",
+    "ip": "^0.3.0"
   },
   "devDependencies": {
     "grunt": "~0.4.2",

diff --git a/rc/index.js b/rc/index.js
@@ -0,0 +1,41 @@
+
+/**
+ * Module dependencies
+ */
+
+var express = require('express');
+var sio = require('socket.io');
+var http = require('http');
+
+
+var app = express();
+
+app.use(express.static('rc/static'));
+
+var server = http.createServer(app).listen(8889);
+
+var io = sio.listen(server);
+
+io.set('log level', 0);
+
+io.sockets.on('connection', function(socket){
+
+  var movies = App.getTorrentsCollection({
+    searchTerm: null,
+    genre: null
+  });
+
+  movies.fetch();
+
+  movies.on('add', function(movie){
+    socket.emit('movie', movie);
+  })
+
+  socket.on('play', function(data){
+    var movie = movies.find(function(model) { return model.get('torrent') === data.torrent; });
+    console.log(movie.get('torrent'));
+    App.sidebar.model = movie;
+    App.sidebar.play($.Event('click'));
+  });
+
+});
diff --git a/rc/static/index.html b/rc/static/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Popcorn Time Remote Control</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link type="text/css" rel="stylesheet" href="/styles/style.css" />
+    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div id="header">
+      <input type="text" placeholder="Search..." />
+    </div>
+    <div id="main">
+    </div>
+    <div id="footer">
+    </div>
+
+    <div id="overlay">
+      <div class="info">
+      </div>
+    </div>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="/js/jquery.min.js"></script>
+    <script src="/js/hammer.min.js"></script>
+    <script src="/js/index.js"></script>
+  </body>
+</html>
diff --git a/rc/static/js/hammer.min.js b/rc/static/js/hammer.min.js
diff --git a/rc/static/js/index.js b/rc/static/js/index.js
@@ -0,0 +1,49 @@
+;(function(){
+
+var socket = io.connect();
+
+var $main = $('#main');
+
+/*
+var hammer = Hammer(document.getElementById('main'), {
+  prevent_default: true
+});
+
+hammer.on("swipeleft", function() {
+    alert('you swiped left!');
+});
+*/
+
+socket.on('movie', function(movie){ 
+  var $img = $('<img />').attr('src', movie.coverImage)
+    .data(movie);
+
+  $main.append($img);
+
+  $img.on('click', $main, function(){
+    showOverlay($img.data());
+  });
+
+});
+//■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ 
+var $overlay = $('#overlay');
+var $info = $overlay.find('.info');
+
+function showOverlay(movie) {
+    $overlay.css({ 'background': ' rgba(0,0,0,.1) url('+movie.backdrop+') no-repeat center center fixed'});
+
+    var info = '<h1>'+movie.title+'</h1>' +
+      '<h3>' + movie.year + ' ● ' + movie.runtime + 'min</h3>' +
+      '<p>' + movie.synopsis + '</p>' + 
+      '<a href="#">WATCH NOW</a>';
+
+    $('#main').css('overflow', 'hidden');
+    $info.html(info)
+    $overlay.show();
+
+    $info.find('a').click(function(){
+      socket.emit('play', movie);
+    });
+}
+
+})();
diff --git a/rc/static/js/jquery.min.js b/rc/static/js/jquery.min.js
diff --git a/rc/static/styles/style.css b/rc/static/styles/style.css
@@ -0,0 +1,102 @@
+* {
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+  box-sizing: border-box;         /* Opera/IE 8+ */
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: #1a1a1a;
+  font-family: 'Roboto', sans-serif;
+}
+
+#header {
+  width: 92%;
+  height: 32px;
+  margin-left: 2.5%;
+  margin-right: 7.5%;
+  margin-top: 10px;
+  border: 2px solid #767676; 
+}
+
+#header input {
+  background: #1a1a1a;
+  width: 100%;
+  height: 28px;
+  border: none;
+  color: #767676;
+  padding-left: 20px;
+  font-size: 20px;
+}
+
+#main {
+  width: 100%;
+  height: 100%;
+}
+
+#main img {
+  float: left;
+  width: 47.5%;
+  padding-left: 2.5%;
+  margin-top: 2.5%;
+}
+
+#overlay {
+  display: none;
+  z-index: 3;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  padding: 5%;
+  -webkit-background-size: cover !important;
+  -moz-background-size: cover !important;
+  -o-background-size: cover !important;
+  background-size: cover !important;
+}
+
+#overlay .info {
+  color: #fff;
+  height: 100%;
+  width: 100%;
+  background: rgba(26,26,26,.92);
+  padding: 5%;
+  word-break: break-word;
+  position: relative;
+  border-radius: 2px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+}
+
+#overlay .info h3 {
+  color: #2667b8;
+}
+
+#overlay .info p {
+  font-size: 14px;
+  height: 50%;
+  overflow-y: scroll;
+}
+
+
+#overlay .info a {
+  background: #2667b8;
+  text-decoration: none;
+  color: #fff;
+  height: 90px;
+  font-size: 20px;
+  padding-top: 30px;
+  font-weight: bold;
+  text-align: center;
+  display: block;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}