First commit - fullscreen player

kylemcdonald · Mar 10, 2015 · 78e978f · 78e978f
commit 78e978f
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/Procfile b/Procfile
@@ -0,0 +1 @@
+web: node index.js
diff --git a/README.md b/README.md
@@ -0,0 +1,36 @@
+# node-js-getting-started
+
+A barebones Node.js app using [Express 4](http://expressjs.com/).
+
+This application support the [Getting Started with Node on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs) article - check it out.
+
+## Running Locally
+
+Make sure you have [Node.js](http://nodejs.org/) and the [Heroku Toolbelt](https://toolbelt.heroku.com/) installed.
+
+```sh
+$ git clone git@github.com:heroku/node-js-getting-started.git # or clone your own fork
+$ cd node-js-getting-started
+$ npm install
+$ npm start
+```
+
+Your app should now be running on [localhost:5000](http://localhost:5000/).
+
+## Deploying to Heroku
+
+```
+$ heroku create
+$ git push heroku master
+$ heroku open
+```
+
+## Documentation
+
+For more information about using Node.js on Heroku, see these Dev Center articles:
+
+- [Getting Started with Node.js on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs)
+- [Heroku Node.js Support](https://devcenter.heroku.com/articles/nodejs-support)
+- [Node.js on Heroku](https://devcenter.heroku.com/categories/nodejs)
+- [Best Practices for Node.js Development](https://devcenter.heroku.com/articles/node-best-practices)
+- [Using WebSockets on Heroku with Node.js](https://devcenter.heroku.com/articles/node-websockets)
diff --git a/app.json b/app.json
@@ -0,0 +1,7 @@
+{
+  "name": "Node.js Getting Started",
+  "description": "A barebones Node.js app using Express 4",
+  "repository": "https://github.com/heroku/node-js-getting-started",
+  "logo": "http://node-js-sample.herokuapp.com/node.svg",
+  "keywords": ["node", "express", "static"]
+}
diff --git a/index.js b/index.js
@@ -0,0 +1,21 @@
+var express = require('express');
+var app = express();
+var sassMiddleware = require('node-sass-middleware');
+var path = require('path');
+
+app.set('port', (process.env.PORT || 5000));
+
+// adding the sass middleware
+app.use(sassMiddleware({
+  src: path.join(__dirname,'sass'),
+  dest: path.join(__dirname, 'public'),
+  debug: false,
+  outputStyle: 'compressed'
+}));
+
+app.use(express.static(__dirname + '/public'));
+
+
+app.listen(app.get('port'), function() {
+  console.log("Node app is running at localhost:" + app.get('port'));
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "node-js-getting-started",
+  "version": "0.1.2",
+  "description": "A sample Node.js app using Express 4",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "express": "~4.9.x",
+    "node-sass-middleware": "^0.5.0"
+  },
+  "engines": {
+    "node": "0.10.x"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/heroku/node-js-getting-started"
+  },
+  "keywords": [
+    "node",
+    "heroku",
+    "express"
+  ],
+  "license": "MIT"
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="https://www.youtube.com/player_api"></script>
+</head>
+<body>
+
+
+<div id="videocontainer">
+    <div id="ytplayer"></div>
+</div>
+
+<div id="ytblock"></div>
+
+<script src="script.js"></script>
+
+</body>
+</html>
diff --git a/public/script.js b/public/script.js
@@ -0,0 +1,60 @@
+var ytplayer;
+function onYouTubePlayerAPIReady() {
+  ytplayer = new YT.Player('ytplayer', {
+    height: '390',
+    width: '640',
+    videoId: 'SxWKffqBjMM',
+    playerVars: {
+      autoplay: 1,    //< Play on start
+      controls: 0,    //< Hide controls
+      disablekb: 1,   //< Disable keyboard controls
+      enablejsapi: 1, //< Enable js api
+      fs: 0,          // Disable fullscreen
+      modestbranding: 1, //< Thank you youtube, but no thanks
+      origin:'localhost', // Should be set for security
+      rel: 0,          //< Dont show related videos
+      showinfo: 0    //< Hide info
+    }
+  });
+}
+
+var videoZoom = 1;
+var videoPosX = 0;
+var videoPosY = 0;
+var paused = false;
+
+$(document).ready(function(){
+
+  var updatePlayerSize = function(){
+    var player = $('#ytplayer');
+    player.width($( window ).width()*videoZoom);
+    player.height($( window ).height()*videoZoom);
+
+    if(ytplayer && ytplayer.pauseVideo) {
+      if (paused) {
+        ytplayer.pauseVideo();
+        console.log("Pause");
+
+      } else {
+        ytplayer.playVideo();
+      }
+    }
+  };
+
+  // Update player on window resize
+  $(window).resize(updatePlayerSize);
+  updatePlayerSize();
+
+  $("#ytblock").click(function(){
+    if(videoZoom == 1){
+      videoZoom = 2;
+      paused = true;
+    } else {
+      videoZoom = 1;
+      paused = false;
+    }
+
+    //player.pauseVideo();
+    updatePlayerSize();
+  })
+});
diff --git a/public/style.css b/public/style.css
diff --git a/sass/style.scss b/sass/style.scss
@@ -0,0 +1,19 @@
+body {
+  padding:0;
+  margin:0;
+}
+
+#videocontainer {
+  position:absolute;
+  top:0;
+  width:100%;
+  height:100%;
+  overflow:hidden;
+}
+
+#ytblock {
+  height:100%;
+  width:100%;
+  position:absolute;
+  top:0px;
+}