├── .editorconfig ├── .gitignore ├── Gruntfile.js ├── README.md ├── gh-deploy.sh ├── package.json ├── src ├── React │ ├── components │ │ ├── Cast.js │ │ ├── DetailMovie.js │ │ ├── MovieItem.js │ │ ├── RelatedMovie.js │ │ ├── Stars.js │ │ └── TrailerMovieId.js │ ├── index.js │ └── routes │ │ ├── Home.js │ │ ├── Movie.js │ │ ├── MovieId.js │ │ ├── MovieQuery.js │ │ └── Serie.js └── Sass │ ├── app.scss │ └── mixins.scss └── web ├── CNAME ├── api ├── movie │ └── sintel.json └── movies.json ├── favicon.ico ├── images ├── bg-background.jpg ├── bg-header.jpg └── logo.svg ├── index.html ├── js └── app.js └── styles ├── app.css └── app.css.map /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Coverage tools 11 | lib-cov 12 | coverage 13 | 14 | # Dependency directory 15 | node_modules 16 | 17 | # Generated css 18 | public/styles/*.css 19 | .DS_Store 20 | .sass-cache/ 21 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | var fs = require("fs"); 2 | 3 | module.exports = function(grunt) { 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON("package.json"), 6 | 7 | watch: { 8 | scripts: { 9 | files: ["src/Sass/**/*.scss", "src/React/**/*.jsx", "src/React/**/*.js"], 10 | tasks: ["sass", "browserify:dev"] 11 | } 12 | }, 13 | 14 | browserify: { 15 | dev: { 16 | options: { 17 | debug: true, 18 | transform: [['babelify', {presets: ['es2015', 'react']}]] 19 | }, 20 | files: { 21 | "web/js/app.js": ["src/React/**/*.js"] 22 | } 23 | }, 24 | build: { 25 | options: { 26 | debug: false, 27 | transform: [["babelify", {presets: ['es2015', 'react']}]] 28 | }, 29 | files: { 30 | "web/js/app.js": "src/React/**/*.js" 31 | } 32 | } 33 | }, 34 | 35 | sass: { 36 | dist: { 37 | files: { 38 | "web/styles/app.css": "src/Sass/app.scss" 39 | } 40 | } 41 | } 42 | }); 43 | 44 | grunt.loadNpmTasks("grunt-contrib-sass"); 45 | grunt.loadNpmTasks("grunt-contrib-watch"); 46 | grunt.loadNpmTasks("grunt-browserify"); 47 | 48 | 49 | 50 | grunt.registerTask("default", ["sass", "browserify:dev", "watch"]); 51 | grunt.registerTask("dev", ["browserify:dev", "sass"]); 52 | grunt.registerTask("deploy", ["browserify:build", "sass"]); 53 | }; 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 |

Browsertime

5 |

Stream torrents in your browser Popcorn Time style!

6 |

Uses webtorrent.io to serve your movies.

7 |

8 | 9 | 10 | 11 |

12 | 13 |
14 | 15 | # Get started 16 | ``` 17 | $ npm install 18 | $ grunt 19 | ``` 20 | 21 | 22 | ##Milestones so far 23 | - [x] Make webtorrent play the selected movie in your browser 24 | - [ ] Make the movie API modular(Make it run on any api with our format) 25 | 26 | 27 | ##Contribute 28 | - Chat with us on [![Join the chat at https://gitter.im/KeizerDev/Browsertime](https://badges.gitter.im/KeizerDev/Browsertime.svg)](https://gitter.im/KeizerDev/Browsertime?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 29 | - Just get one of the issue's and send a PR 30 | - Do some design tweaks and send a PR 31 | - Any help is welcome 32 | 33 | 34 | 35 | 36 | **Feel free to fork and build your clone with your own movies** 37 | -------------------------------------------------------------------------------- /gh-deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | if [ -z "$1" ] 3 | then 4 | echo "Which folder do you want to deploy to GitHub Pages?" 5 | exit 1 6 | fi 7 | git subtree push --prefix $1 origin gh-pages 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browsertime", 3 | "version": "0.0.0", 4 | "private": true, 5 | "description": "Browsertime", 6 | "dependencies": { 7 | "grunt": "^0.4.5", 8 | "grunt-contrib-sass": "^0.9.2", 9 | "grunt-contrib-uglify": "^1.0.1", 10 | "grunt-contrib-watch": "^0.6.1", 11 | "grunt-browserify": "^5.0.0", 12 | "babelify": "^7.2.0", 13 | "babel-preset-es2015": "^6.6.0", 14 | "babel-preset-react": "^6.5.0", 15 | "browserify": "^13.0.0", 16 | "jquery": "^2.2.3", 17 | "plyr": "^1.8.7", 18 | "webtorrent": "~0.76.0", 19 | "react": "^0.14.7", 20 | "react-dom": "^0.14.7", 21 | "react-router": "^2.0.1" 22 | } 23 | } -------------------------------------------------------------------------------- /src/React/components/Cast.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var Cast = React.createClass({ 4 | 5 | getInitialState: function() { 6 | return { 7 | castList: [] 8 | }; 9 | }, 10 | 11 | componentWillReceiveProps: function(props){ 12 | var castList = [] 13 | 14 | if (props.castList) { 15 | props.castList.forEach(function(cast) { 16 | castList.push(
  • 17 | 18 | {cast.name} as {cast.character_name} 19 |
    • ) 20 | }); 21 | } else { 22 | console.error("No cast list found.") 23 | } 24 | 25 | this.setState({castList: castList}); 26 | }, 27 | 28 | render: function() { 29 | 30 | return (); 31 | } 32 | }); 33 | 34 | module.exports = Cast; 35 | -------------------------------------------------------------------------------- /src/React/components/DetailMovie.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Stars = require('../components/Stars') 3 | var Cast = require('../components/Cast') 4 | var RelatedMovie = require('../components/RelatedMovie') 5 | 6 | var DetailMovie = React.createClass({ 7 | 8 | getInitialState: function() { 9 | return {}; 10 | }, 11 | 12 | componentDidMount: function() { 13 | }, 14 | 15 | render: function() { 16 | var detailMovie = "" 17 | var movieList = [ 18 | { 19 | title: "The Last Stand", 20 | rating: "5.9", 21 | cover: "http://www.gstatic.com/tv/thumb/movieposters/9337470/p9337470_p_v8_ac.jpg" 22 | }, 23 | { 24 | title: "Batman Returns", 25 | rating: "9.3", 26 | cover: "http://www.gstatic.com/tv/thumb/iconics/12631/p12631_i_v8_aa.jpg" 27 | }, 28 | { 29 | title: "The Revenant", 30 | rating: "8.6", 31 | cover: "http://static.rogerebert.com/uploads/movie/movie_poster/the-revenant-2015/large_large_oXUWEc5i3wYyFnL1Ycu8ppxxPvs.jpg" 32 | }, 33 | { 34 | title: "The Revenant", 35 | rating: "8.6", 36 | cover: "http://static.rogerebert.com/uploads/movie/movie_poster/the-revenant-2015/large_large_oXUWEc5i3wYyFnL1Ycu8ppxxPvs.jpg" 37 | } 38 | ] 39 | 40 | 41 | switch(this.props.typeDetail) { 42 | case "text": 43 | detailMovie = this.props.data 44 | break; 45 | case "cast": 46 | detailMovie = 47 | break; 48 | case "more_information": 49 | detailMovie =
    50 | 58 |
    59 | break; 60 | case "related": 61 | detailMovie = 62 | break; 63 | } 64 | 65 | return (
    66 |

    {this.props.title}

    67 |
    68 | {detailMovie} 69 |
    70 |
    ); 71 | } 72 | }); 73 | 74 | module.exports = DetailMovie; 75 | -------------------------------------------------------------------------------- /src/React/components/MovieItem.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Stars = require('../components/Stars') 3 | import { Link } from 'react-router' 4 | 5 | var MovieItem = React.createClass({ 6 | 7 | getInitialState: function() { 8 | return {}; 9 | }, 10 | 11 | render: function() { 12 | return ( 13 |
    14 | 15 |
    16 |

    {this.props.title}

    17 |

    18 | 19 |

    20 |
    21 |
    22 | ); 23 | } 24 | }); 25 | 26 | module.exports = MovieItem; 27 | -------------------------------------------------------------------------------- /src/React/components/RelatedMovie.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var Stars = require('../components/Stars') 3 | var MovieItem = require('../components/MovieItem') 4 | 5 | var RelatedMovie = React.createClass({ 6 | 7 | getInitialState: function() { 8 | return { 9 | movieList: [] 10 | }; 11 | }, 12 | 13 | componentWillReceiveProps: function(nextProps){ 14 | var movieList = [] 15 | 16 | nextProps.movieList.map(function(movie, i){ 17 | movieList.push() 18 | }); 19 | 20 | this.setState({movieList: movieList}); 21 | }, 22 | 23 | render: function() { 24 | return (
    25 | {this.state.movieList} 26 |
    ); 27 | } 28 | }); 29 | 30 | module.exports = RelatedMovie; 31 | -------------------------------------------------------------------------------- /src/React/components/Stars.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var Stars = React.createClass({ 4 | 5 | getInitialState: function() { 6 | return {}; 7 | }, 8 | 9 | componentDidMount: function() { 10 | }, 11 | 12 | render: function() { 13 | var stars = [], 14 | rate = 0, 15 | rating = Math.round(this.props.stars) / 2 16 | 17 | for (var i = 0; i < this.props.totalStars; i++) { 18 | rate = i + 1; 19 | 20 | if (rate <= rating) { 21 | stars.push() 22 | } else if ((rate - 0.5) == rating) { 23 | stars.push() 24 | } else { 25 | stars.push() 26 | } 27 | } 28 | 29 | return (
    30 | {stars} 31 |
    ); 32 | } 33 | }); 34 | 35 | module.exports = Stars; 36 | -------------------------------------------------------------------------------- /src/React/components/TrailerMovieId.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var TrailerMovieId = React.createClass({ 4 | 5 | getInitialState: function() { 6 | return { 7 | trailer: [] 8 | }; 9 | }, 10 | 11 | componentWillReceiveProps: function(nextProps){ 12 | var trailer = [] 13 | var trailerUrl = "http://www.youtube.com/embed/" + nextProps.ytCode 14 | console.log(nextProps) 15 | 16 | trailer.push() 17 | 18 | this.setState({trailer: trailer}); 19 | }, 20 | 21 | render: function() { 22 | var trailerUrl = "http://www.youtube.com/embed/" + this.props.ytCode + "?autoplay=1" 23 | 24 | return (); 25 | } 26 | }); 27 | 28 | module.exports = TrailerMovieId; 29 | -------------------------------------------------------------------------------- /src/React/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import { Router, Route, IndexRoute, NotFoundRoute, Link, IndexLink, hashHistory } from 'react-router' 4 | 5 | var routes = { 6 | Home: require('./routes/Home'), 7 | Movie: require('./routes/Movie'), 8 | MovieId: require('./routes/MovieId'), 9 | MovieQuery: require('./routes/MovieQuery'), 10 | Series: require('./routes/Serie') 11 | }; 12 | 13 | const ACTIVE = { color: 'red' } 14 | 15 | class Header extends React.Component { 16 | render() { 17 | return (); 26 | } 27 | } 28 | 29 | class Footer extends React.Component { 30 | render() { 31 | return (
    32 |
    33 |
    34 |
    35 | 
    Bitcoin: 146z8MPUeogNxpT3ptpBWjr6rkpviGd4JG
    36 |
    37 |
    38 | Add movies 39 |
    40 |
    41 |
    42 |
    ); 43 | } 44 | } 45 | 46 | class App extends React.Component { 47 | render() { 48 | return ( 49 |
    50 |
    51 |
    52 | {this.props.children} 53 |
    54 |
    55 |
    56 | ) 57 | } 58 | } 59 | 60 | class PageNav extends React.Component { 61 | 62 | constructor(props) { 63 | super(props); 64 | this.state = {text: 'Search'}; 65 | } 66 | 67 | inputSubmit() { 68 | this.setState({text: ''}); 69 | 70 | if(this.refs.userInput.getDOMNode().value != 'Search') 71 | window.location = "../search/" + this.refs.userInput.getDOMNode().value; 72 | } 73 | handleChange(e) { 74 | this.setState({text: e.target.value}); 75 | } 76 | handleKeyDown(e) { 77 | if (e.keyCode === 13 ) { 78 | return this.inputSubmit(); 79 | } 80 | } 81 | render() { 82 | //
  • TV Series
    • 83 | return ( 84 |
      85 |
    • Movies
      • 86 |
      • 87 |
    88 | ); 89 | } 90 | } 91 | 92 | render(( 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | ), document.getElementById('app')) 105 | -------------------------------------------------------------------------------- /src/React/routes/Home.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var Home = React.createClass({ 4 | render: function() { 5 | return ( 6 |

    Home Page

    7 | ); 8 | } 9 | }); 10 | 11 | module.exports = Home; 12 | -------------------------------------------------------------------------------- /src/React/routes/Movie.js: -------------------------------------------------------------------------------- 1 | var React = require('react'), 2 | Stars = require('../components/Stars'), 3 | MovieItem = require('../components/MovieItem') 4 | 5 | var Movie = React.createClass({ 6 | 7 | getInitialState: function() { 8 | return { 9 | movies: [], 10 | isLoaded: false 11 | }; 12 | }, 13 | 14 | componentDidMount: function() { 15 | $.get('/api/movies.json', function(result) { 16 | if (this.isMounted()) { 17 | this.setState({ 18 | movies: result, 19 | isLoaded: true 20 | }); 21 | } 22 | }.bind(this)); 23 | }, 24 | 25 | render: function() { 26 | console.log(this.state.movies) 27 | return ( 28 |
    29 |
    30 | { 31 | !this.state.isLoaded ? 32 | 33 | : this.state.movies.map(function(movie, i){ 34 | var moviesUrl = "/movie" + movie.url.slice(0, -1); 35 | return () 36 | }) 37 | } 38 |
    39 |
    40 | ); 41 | } 42 | }); 43 | 44 | module.exports = Movie; 45 | -------------------------------------------------------------------------------- /src/React/routes/MovieId.js: -------------------------------------------------------------------------------- 1 | var React = require('react') 2 | var WebTorrent = require('webtorrent') 3 | var TrailerMovieId = require('../components/TrailerMovieId') 4 | var DetailMovie = require('../components/DetailMovie') 5 | 6 | var MovieId = React.createClass({ 7 | 8 | getInitialState: function() { 9 | return { 10 | movie: { 11 | images: [], 12 | hashes: [] 13 | }, 14 | torrentlist: [], 15 | isTrailer: false 16 | }; 17 | }, 18 | 19 | handleClick: function(event) { 20 | this.setState({isTrailer: !this.state.isTrailer}); 21 | }, 22 | 23 | componentDidMount: function() { 24 | $.get('/api/movie/' + this.props.params.id + '.json', function(result) { 25 | if (this.isMounted()) { 26 | this.setState({ 27 | movie: result, 28 | torrentlist: result.hashes 29 | }); 30 | } 31 | }.bind(this)); 32 | }, 33 | 34 | handlePlayMovieClick: function(event) { 35 | var client = new WebTorrent() 36 | console.log(this.state.movie.hashes[1]) 37 | var magnetURI = this.state.movie.hashes[1] 38 | 39 | client.add(magnetURI, function (torrent) { 40 | // Got torrent metadata! 41 | console.log('Client is downloading:', torrent.infoHash) 42 | 43 | torrent.files.forEach(function (file) { 44 | // Display the file by appending it to the DOM. Supports video, audio, images, and 45 | // more. Specify a container element (CSS selector or reference to DOM node). 46 | file.appendTo('.play-container') 47 | }) 48 | }) 49 | }, 50 | 51 | render: function() { 52 | var toggleTrailer = this.state.isTrailer ? :
    ; 53 | 54 | return (
    55 |
    56 |
    57 |
    58 |
    59 | {toggleTrailer} 60 |
    61 |
    62 | Play Movie 63 |
    64 |
    65 | Trailer 66 |
    67 |
    68 |
    69 |
    70 |
    71 |
    72 | 73 | 74 | 75 | 76 |
    77 |
    78 |
    ); 79 | } 80 | }); 81 | 82 | module.exports = MovieId; 83 | -------------------------------------------------------------------------------- /src/React/routes/MovieQuery.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var MovieQuery = React.createClass({ 4 | 5 | getInitialState: function() { 6 | return { 7 | movies: [] 8 | }; 9 | }, 10 | 11 | componentDidMount: function() { 12 | $.get('/api/search/' + this.props.params.query, function(result) { 13 | var movies = result['data'].movies; 14 | if (this.isMounted()) { 15 | this.setState({ 16 | movies: movies 17 | }); 18 | } 19 | }.bind(this)); 20 | }, 21 | 22 | render: function() { 23 | console.log(this.state.movies) 24 | return ( 25 |
    26 |
    27 | {this.state.movies.map(function(object, i){ 28 | var divStyle = { 29 | background: 'url(' + object.medium_cover_image + ') center' 30 | }; 31 | var moviesUrl = "/movies/" + object.id; 32 | 33 | return ( 34 | 35 |
    {object.rating}
    36 |     ) 37 | })} 38 |
    39 |
    40 | ); 41 | } 42 | }); 43 | 44 | module.exports = MovieQuery; 45 | -------------------------------------------------------------------------------- /src/React/routes/Serie.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var Serie = React.createClass({ 4 | render: function() { 5 | return ( 6 |
    7 |
    8 |
    9 |
    10 |
    11 |
    12 | Image.jpg 13 |
    14 |
    15 |
    16 |
    17 |
    18 | ); 19 | } 20 | }); 21 | 22 | module.exports = Serie; 23 | -------------------------------------------------------------------------------- /src/Sass/app.scss: -------------------------------------------------------------------------------- 1 | // Import Bootstrap 2 | @import "mixins.scss"; 3 | 4 | $header-height: 75px; 5 | $header-white: #ffffff; 6 | $header-border: #ECECEC; 7 | $header-grey: #252525; 8 | $theme-white: #000000; 9 | $theme-grey: #ffffff; 10 | $body-grey: #3D3D3D; 11 | $body-white: #FFFFFF; 12 | $text-red: #C1272D; 13 | 14 | html, body { 15 | background-color: $header-white; 16 | height: 100%; 17 | margin: 0; padding: 0; /* to avoid scrollbars */ 18 | } 19 | 20 | header { 21 | background: $header-white; 22 | height: $header-height; 23 | position: fixed; 24 | left: 0; 25 | top: 0; 26 | width: 100%; 27 | z-index: 999; 28 | transition: all 0.2s ease-in-out; 29 | border-bottom: 1px $header-border solid; 30 | 31 | .container { 32 | 33 | .logo { 34 | float: left; 35 | line-height: $header-height; 36 | 37 | img { 38 | height: 38px; 39 | } 40 | } 41 | 42 | .logo-text { 43 | float: left; 44 | text-transform: uppercase; 45 | font-weight: bold; 46 | line-height: $header-height; 47 | margin-left: 10px; 48 | letter-spacing: 1px; 49 | color: $theme-white; 50 | } 51 | 52 | ul { 53 | float: right; 54 | list-style-type: none; 55 | 56 | li { 57 | float: left; 58 | line-height: 75px; 59 | padding: 0px 20px; 60 | color: $theme-white; 61 | text-transform: uppercase; 62 | font-weight: bold; 63 | display: block; 64 | 65 | .active { 66 | color: $text-red; 67 | } 68 | 69 | &:last-child { 70 | padding-right: 0px; 71 | } 72 | 73 | a { 74 | text-decoration: none; 75 | color: $theme-white; 76 | 77 | &:hover { 78 | color: $text-red; 79 | text-decoration: none; 80 | } 81 | } 82 | } 83 | } 84 | } 85 | } 86 | .page { 87 | display: table; 88 | table-layout: fixed; 89 | height: 100%; 90 | width: 100%; 91 | } 92 | 93 | .movie-content { 94 | height: auto; 95 | } 96 | 97 | .col-movie { 98 | position: relative; 99 | } 100 | 101 | .movie-cover a { 102 | width: 300px; 103 | } 104 | 105 | .col-md-4 { 106 | margin-bottom: 50px; 107 | 108 | ul { 109 | list-style-type: none; 110 | margin: 0; 111 | padding: 0; 112 | 113 | li { 114 | padding: 5px; 115 | width: 100%; 116 | border-bottom: 1px #ECECEC solid; 117 | 118 | a { 119 | color: black; 120 | font-weight: bold; 121 | } 122 | 123 | img { 124 | width: 40px; 125 | height: 40px; 126 | margin-right: 10px; 127 | background: url(https://yts.ag/assets/images/actors/thumb/default_avatar.jpg) center / cover; 128 | } 129 | } 130 | } 131 | &:last-child { 132 | margin-bottom: 0px; 133 | } 134 | } 135 | 136 | .col-md-8 { 137 | margin-bottom: 50px; 138 | 139 | &:last-child { 140 | margin-bottom: 0px; 141 | } 142 | } 143 | 144 | 145 | .information { 146 | opacity: 0; 147 | text-align: center; 148 | width: 100%; 149 | height: 100%; 150 | color: white; 151 | font-size: 15px; 152 | background-color: rgba(0, 0, 0, 0.47); 153 | position: absolute; 154 | left: 0; 155 | top: 0; 156 | right: 0; 157 | bottom: 0; 158 | padding: 30px 20px 0 20px; 159 | @include transition(opacity 0.4s ease-in-out); 160 | 161 | &:hover { 162 | opacity: 1; 163 | } 164 | } 165 | 166 | 167 | .btn-movieid { 168 | margin-bottom: 30px; 169 | a { 170 | cursor: pointer; 171 | color: white; 172 | border: 3px solid white; 173 | padding: 11px 70px; 174 | width: 100%; 175 | text-align: center; 176 | display: inline-block; 177 | text-transform: uppercase; 178 | font-size: 16px; 179 | letter-spacing: 3px; 180 | margin-bottom: 20px !important; 181 | text-decoration: none; 182 | @include transition(all 0.4s ease-in-out); 183 | } 184 | } 185 | 186 | .p-left { 187 | padding-left: 24px; 188 | margin: 0em 189 | } 190 | 191 | .col-md-6 a:hover { 192 | background: white; 193 | color: black; 194 | } 195 | 196 | .movie-cover { 197 | width: 100%; 198 | background: url(http://www.orville.com/images/parallax/img-background.jpg) center / cover !important; 199 | 200 | } 201 | 202 | .movie-underlay { 203 | background: url(/images/bg-header.jpg) center / cover; 204 | width: 100%; 205 | height: auto; 206 | } 207 | 208 | .movie-cover.top .container .row .col-md-12 { 209 | margin-top: 50px; 210 | margin-bottom: 50px; 211 | } 212 | 213 | .movie-cover.top .container .row .col-md-12 img { 214 | width: 230px; 215 | border: 4px solid white; 216 | } 217 | 218 | .top-p { 219 | padding-top: 50px; 220 | padding-bottom: 50px; 221 | } 222 | 223 | .fa { 224 | padding-left: 2px; 225 | padding-right: 2px; 226 | } 227 | 228 | .container-fluid { 229 | padding-left: 0; 230 | padding-right: 0; 231 | } 232 | 233 | .active { 234 | color: #F3CB0B; 235 | } 236 | 237 | .center { 238 | text-align: center; 239 | } 240 | 241 | .glyphicon { 242 | color: $theme-white; 243 | } 244 | 245 | .glyphicon:hover { 246 | color: #C1272D; 247 | } 248 | 249 | h2 { 250 | border-left: 3px #C1272D solid; 251 | font-weight: bold; 252 | text-transform: uppercase; 253 | font-size: 26px; 254 | color: $body-grey; 255 | padding-left: 20px; 256 | margin: 0; 257 | margin-bottom: 10px; 258 | } 259 | 260 | h3 { 261 | border-left: 3px #C1272D solid; 262 | font-weight: bold; 263 | text-transform: uppercase; 264 | font-size: 22px; 265 | color: $body-grey; 266 | padding-left: 20px; 267 | margin: 0; 268 | margin-bottom: 10px; 269 | } 270 | 271 | 272 | .header-shadow { 273 | @include box-shadow('0px 7px 30px 0px rgba(50, 50, 50, 0.74)'); 274 | @include opacity(0.99); 275 | } 276 | 277 | .top { 278 | padding-top: 90px; 279 | padding-bottom: 15px; 280 | } 281 | 282 | .width { 283 | width: 100%; 284 | } 285 | 286 | .container.top .col-md-2 { 287 | padding: 2px; 288 | transform: scale(1); 289 | @include transition('transform .3s ease-in-out'); 290 | } 291 | 292 | .row { 293 | padding-right: 13px; 294 | padding-left: 13px; 295 | } 296 | 297 | footer { 298 | background-color: $body-grey; 299 | color: white; 300 | display: table-row; 301 | height: 1px; 302 | 303 | .container { 304 | padding: 50px; 305 | 306 | .row { 307 | padding-left: 0px; 308 | padding-right: 0px; 309 | 310 | .col-md-2 { 311 | select { 312 | width: 100%; 313 | height: 40px; 314 | color: white; 315 | background: transparent; 316 | border: 2px white solid; 317 | border-radius: 0px !important; 318 | outline: none; 319 | } 320 | } 321 | } 322 | } 323 | } 324 | .fa-star-o { 325 | color: #F3CB0B; 326 | } 327 | .clear { 328 | height: 1px; 329 | } 330 | 331 | .yt-player { 332 | height: 420px; 333 | width: 60%; 334 | border: 0px; 335 | display: block; 336 | margin: 0 auto; 337 | } 338 | 339 | .no-padding { 340 | padding-left: 0.5px; 341 | padding-right: 0.5px; 342 | } 343 | 344 | @media only screen and (max-width: 700px) { 345 | 346 | header .container .logo-text { 347 | display: none !important; 348 | } 349 | 350 | .fa { 351 | font-size: 11px; 352 | } 353 | 354 | .yt-player { 355 | width: 100%; 356 | height: 315px; 357 | } 358 | } 359 | -------------------------------------------------------------------------------- /src/Sass/mixins.scss: -------------------------------------------------------------------------------- 1 | 2 | // SHADOWS 3 | @mixin box-shadow ($string) { 4 | -webkit-box-shadow: $string; 5 | -moz-box-shadow: $string; 6 | box-shadow: $string; 7 | } 8 | @mixin drop-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) { 9 | -webkit-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha); 10 | -moz-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha); 11 | box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha); 12 | } 13 | @mixin inner-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) { 14 | -webkit-box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha); 15 | -moz-box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha); 16 | box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha); 17 | } 18 | 19 | // BOX MODEL 20 | @mixin box-sizing ($type: border-box) { 21 | -webkit-box-sizing: $type; 22 | -moz-box-sizing: $type; 23 | box-sizing: $type; 24 | } 25 | 26 | // BORDERS 27 | @mixin borders($top-color: #EEE, $right-color: #EEE, $bottom-color: #EEE, $left-color: #EEE) { 28 | border-top: solid 1px $top-color; 29 | border-left: solid 1px $left-color; 30 | border-right: solid 1px $right-color; 31 | border-bottom: solid 1px $bottom-color; 32 | } 33 | @mixin border-radius ($radius: 2px) { 34 | -webkit-border-radius: $radius; 35 | -moz-border-radius: $radius; 36 | border-radius: $radius; 37 | -moz-background-clip: padding; 38 | -webkit-background-clip: padding-box; 39 | background-clip: padding-box; 40 | } 41 | @mixin border-radiuses ($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) { 42 | -webkit-border-top-right-radius: $topright; 43 | -webkit-border-bottom-right-radius: $bottomright; 44 | -webkit-border-bottom-left-radius: $bottomleft; 45 | -webkit-border-top-left-radius: $topleft; 46 | -moz-border-radius-topright: $topright; 47 | -moz-border-radius-bottomright: $bottomright; 48 | -moz-border-radius-bottomleft: $bottomleft; 49 | -moz-border-radius-topleft: $topleft; 50 | border-top-right-radius: $topright; 51 | border-bottom-right-radius: $bottomright; 52 | border-bottom-left-radius: $bottomleft; 53 | border-top-left-radius: $topleft; 54 | -moz-background-clip: padding; 55 | -webkit-background-clip: padding-box; 56 | background-clip: padding-box; 57 | } 58 | @mixin border-radius-top-left ($radius: 0) { 59 | -webkit-border-top-left-radius: $radius; 60 | -moz-border-radius-topleft: $radius; 61 | border-top-left-radius: $radius; 62 | } 63 | @mixin border-radius-top-right ($radius: 0) { 64 | -webkit-border-top-right-radius: $radius; 65 | -moz-border-radius-topright: $radius; 66 | border-top-right-radius: $radius; 67 | } 68 | @mixin border-radius-bottom-left ($radius: 0) { 69 | webkit-border-bottom-left-radius: $radius; 70 | -moz-border-radius-bottomleft: $radius; 71 | border-bottom-left-radius: $radius; 72 | } 73 | @mixin border-radius-bottom-right ($radius: 0) { 74 | -webkit-border-bottom-right-radius: $radius; 75 | -moz-border-radius-bottomright: $radius; 76 | border-bottom-right-radius: $radius; 77 | } 78 | 79 | // OPACITY 80 | @mixin opacity($opacity: 0.5) { 81 | opacity: $opacity; 82 | } 83 | 84 | // GRADIENTS 85 | @mixin gradient ($startColor: #eee, $endColor: white) { 86 | background-color: $startColor; 87 | background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)); 88 | background: -webkit-linear-gradient(top, $startColor, $endColor); 89 | background: -moz-linear-gradient(top, $startColor, $endColor); 90 | background: -ms-linear-gradient(top, $startColor, $endColor); 91 | background: -o-linear-gradient(top, $startColor, $endColor); 92 | } 93 | @mixin horizontal-gradient ($startColor: #eee, $endColor: white) { 94 | background-color: $startColor; 95 | background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor)); 96 | background-image: -webkit-linear-gradient(left, $startColor, $endColor); 97 | background-image: -moz-linear-gradient(left, $startColor, $endColor); 98 | background-image: -ms-linear-gradient(left, $startColor, $endColor); 99 | background-image: -o-linear-gradient(left, $startColor, $endColor); 100 | } 101 | @mixin linear-gradient-m ($fallback, $string) { 102 | background-color: $fallback; 103 | background: -webkit-linear-gradient($string); 104 | background: -moz-linear-gradient($string); 105 | background: -ms-linear-gradient($string); 106 | background: -o-linear-gradient($string); 107 | } 108 | 109 | // ANIMATIONS / TRANSITIONS / TRANSFORMS 110 | @mixin transition ($string) { 111 | -webkit-transition: $string; 112 | -moz-transition: $string; 113 | -ms-transition: $string; 114 | -o-transition: $string; 115 | } 116 | @mixin transition-duration($duration: 0.2s) { 117 | -webkit-transition-duration: $duration; 118 | -moz-transition-duration: $duration; 119 | -ms-transition-duration: $duration; 120 | -o-transition-duration: $duration; 121 | } 122 | @mixin animate ($string) { 123 | -webkit-animation: $string; 124 | -moz-animation: $string; 125 | } 126 | 127 | @mixin transform($string){ 128 | -webkit-transform: $string; 129 | -moz-transform: $string; 130 | -ms-transform: $string; 131 | -o-transform: $string; 132 | } 133 | @mixin scale ($factor) { 134 | zoom: $factor; 135 | -webkit-transform: scale($factor); 136 | -moz-transform: scale($factor); 137 | -ms-transform: scale($factor); 138 | -o-transform: scale($factor); 139 | } 140 | @mixin rotate ($deg) { 141 | -webkit-transform: rotate($deg + deg); 142 | -moz-transform: rotate($deg + deg); 143 | -ms-transform: rotate($deg + deg); 144 | -o-transform: rotate($deg + deg); 145 | } 146 | @mixin skew ($deg, $deg2) { 147 | -webkit-transform: skew($deg, $deg2); 148 | -moz-transform: skew($deg, $deg2); 149 | -ms-transform: skew($deg, $deg2); 150 | -o-transform: skew($deg, $deg2); 151 | } 152 | @mixin translate ($x: 0, $y: 0) { 153 | -webkit-transform: translate($x, $y); 154 | -moz-transform: translate($x, $y); 155 | -ms-transform: translate($x, $y); 156 | -o-transform: translate($x, $y); 157 | } 158 | @mixin translate3d ($x, $y: 0, $z: 0) { 159 | -webkit-transform: translate3d($x, $y, $z); 160 | -moz-transform: translate3d($x, $y, $z); 161 | -ms-transform: translate3d($x, $y, $z); 162 | -o-transform: translate3d($x, $y, $z); 163 | } 164 | @mixin perspective ($value: 1000) { 165 | -webkit-perspective: $value; 166 | -moz-perspective: $value; 167 | -ms-perspective: $value; 168 | } 169 | @mixin transform-origin ($x: center, $y: center) { 170 | -webkit-transform-origin: $x $y; 171 | -moz-transform-origin: $x $y; 172 | -ms-transform-origin: $x $y; 173 | -o-transform-origin: $x $y; 174 | } 175 | 176 | // ACCESSIBILITY HELPERS 177 | @mixin screen-reader-text() { 178 | position: absolute; 179 | top: -9999px; 180 | left: -9999px; 181 | } -------------------------------------------------------------------------------- /web/CNAME: -------------------------------------------------------------------------------- 1 | browsertime.keizerdev.net 2 | -------------------------------------------------------------------------------- /web/api/movie/sintel.json: -------------------------------------------------------------------------------- 1 | { 2 | "title" : "Sintel (2010)", 3 | "title_clean" : "Sintel", 4 | "year" : 2010, 5 | "rating" : 7.6, 6 | "duration" : 122, 7 | "yt_trailer_code" : "HOfdboHvshg", 8 | "imdb_code" : "tt1727587", 9 | "description" : "A wandering warrior finds an unlikely friend in the form of a young dragon. The two develop a close bond, until one day the dragon is snatched away. She then sets out on a relentless quest to reclaim her friend, finding in the end that her quest exacts a far greater price than she had ever imagined.", 10 | "genres" : ["Animation","Short","Fantasy"], 11 | "images" : ["https://image.tmdb.org/t/p/w185/iJQy5tF9eMRU1Id3OqCvimazJZl.jpg","https://image.tmdb.org/t/p/w396/iJQy5tF9eMRU1Id3OqCvimazJZl.jpg"], 12 | "hashes" : ["0#720p","6a9759bffd5c0af65319979fb7832189f4f3c35d"] 13 | } 14 | -------------------------------------------------------------------------------- /web/api/movies.json: -------------------------------------------------------------------------------- 1 | 2 | [ 3 | 4 | { 5 | "title" : "The Lobster (2015)", 6 | "title_clean" : "The Lobster", 7 | "rating" : 7.4, 8 | "url" : "/the-lobster/", 9 | "images" : ["https://image.tmdb.org/t/p/w185/ahUiUaeOE2lvnOy7srxaUJbbvYv.jpg","https://image.tmdb.org/t/p/w396/ahUiUaeOE2lvnOy7srxaUJbbvYv.jpg"] 10 | } , 11 | 12 | { 13 | "title" : "Steve Jobs (2015)", 14 | "title_clean" : "Steve Jobs", 15 | "rating" : 7.4, 16 | "url" : "/steve-jobs/", 17 | "images" : ["https://image.tmdb.org/t/p/w185/ahUiUaeOE2lvnOy7srxaUJbbvYv.jpg","https://image.tmdb.org/t/p/w396/ahUiUaeOE2lvnOy7srxaUJbbvYv.jpg"] 18 | } , 19 | 20 | { 21 | "title" : "Sintel (2010)", 22 | "title_clean" : "Sintel", 23 | "rating" : 7.6, 24 | "url" : "/sintel/", 25 | "images" : ["https://image.tmdb.org/t/p/w185/iJQy5tF9eMRU1Id3OqCvimazJZl.jpg","https://image.tmdb.org/t/p/w396/iJQy5tF9eMRU1Id3OqCvimazJZl.jpg"] 26 | } 27 | 28 | ] 29 | -------------------------------------------------------------------------------- /web/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KeizerDev/Browsertime/42001a385d5da826a72b9d899f5b6faf7f65a2ea/web/favicon.ico -------------------------------------------------------------------------------- /web/images/bg-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KeizerDev/Browsertime/42001a385d5da826a72b9d899f5b6faf7f65a2ea/web/images/bg-background.jpg -------------------------------------------------------------------------------- /web/images/bg-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KeizerDev/Browsertime/42001a385d5da826a72b9d899f5b6faf7f65a2ea/web/images/bg-header.jpg -------------------------------------------------------------------------------- /web/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 18 | 20 | 23 | 30 | 31 | 32 | 56 | 58 | Created by potrace 1.13, written by Peter Selinger 2001-2015 59 | 60 | 62 | image/svg+xml 63 | 65 | 66 | 67 | 68 | 69 | 73 | 76 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Browsertime 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | 18 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /web/styles/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | background-color: #ffffff; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | /* to avoid scrollbars */ } 7 | 8 | header { 9 | background: #ffffff; 10 | height: 75px; 11 | position: fixed; 12 | left: 0; 13 | top: 0; 14 | width: 100%; 15 | z-index: 999; 16 | transition: all 0.2s ease-in-out; 17 | border-bottom: 1px #ECECEC solid; } 18 | header .container .logo { 19 | float: left; 20 | line-height: 75px; } 21 | header .container .logo img { 22 | height: 38px; } 23 | header .container .logo-text { 24 | float: left; 25 | text-transform: uppercase; 26 | font-weight: bold; 27 | line-height: 75px; 28 | margin-left: 10px; 29 | letter-spacing: 1px; 30 | color: #000000; } 31 | header .container ul { 32 | float: right; 33 | list-style-type: none; } 34 | header .container ul li { 35 | float: left; 36 | line-height: 75px; 37 | padding: 0px 20px; 38 | color: #000000; 39 | text-transform: uppercase; 40 | font-weight: bold; 41 | display: block; } 42 | header .container ul li .active { 43 | color: #C1272D; } 44 | header .container ul li:last-child { 45 | padding-right: 0px; } 46 | header .container ul li a { 47 | text-decoration: none; 48 | color: #000000; } 49 | header .container ul li a:hover { 50 | color: #C1272D; 51 | text-decoration: none; } 52 | 53 | .page { 54 | display: table; 55 | table-layout: fixed; 56 | height: 100%; 57 | width: 100%; } 58 | 59 | .movie-content { 60 | height: auto; } 61 | 62 | .col-movie { 63 | position: relative; } 64 | 65 | .movie-cover a { 66 | width: 300px; } 67 | 68 | .col-md-4 { 69 | margin-bottom: 50px; } 70 | .col-md-4 ul { 71 | list-style-type: none; 72 | margin: 0; 73 | padding: 0; } 74 | .col-md-4 ul li { 75 | padding: 5px; 76 | width: 100%; 77 | border-bottom: 1px #ECECEC solid; } 78 | .col-md-4 ul li a { 79 | color: black; 80 | font-weight: bold; } 81 | .col-md-4 ul li img { 82 | width: 40px; 83 | height: 40px; 84 | margin-right: 10px; 85 | background: url(https://yts.ag/assets/images/actors/thumb/default_avatar.jpg) center/cover; } 86 | .col-md-4:last-child { 87 | margin-bottom: 0px; } 88 | 89 | .col-md-8 { 90 | margin-bottom: 50px; } 91 | .col-md-8:last-child { 92 | margin-bottom: 0px; } 93 | 94 | .information { 95 | opacity: 0; 96 | text-align: center; 97 | width: 100%; 98 | height: 100%; 99 | color: white; 100 | font-size: 15px; 101 | background-color: rgba(0, 0, 0, 0.47); 102 | position: absolute; 103 | left: 0; 104 | top: 0; 105 | right: 0; 106 | bottom: 0; 107 | padding: 30px 20px 0 20px; 108 | -webkit-transition: opacity 0.4s ease-in-out; 109 | -moz-transition: opacity 0.4s ease-in-out; 110 | -ms-transition: opacity 0.4s ease-in-out; 111 | -o-transition: opacity 0.4s ease-in-out; } 112 | .information:hover { 113 | opacity: 1; } 114 | 115 | .btn-movieid { 116 | margin-bottom: 30px; } 117 | .btn-movieid a { 118 | cursor: pointer; 119 | color: white; 120 | border: 3px solid white; 121 | padding: 11px 70px; 122 | width: 100%; 123 | text-align: center; 124 | display: inline-block; 125 | text-transform: uppercase; 126 | font-size: 16px; 127 | letter-spacing: 3px; 128 | margin-bottom: 20px !important; 129 | text-decoration: none; 130 | -webkit-transition: all 0.4s ease-in-out; 131 | -moz-transition: all 0.4s ease-in-out; 132 | -ms-transition: all 0.4s ease-in-out; 133 | -o-transition: all 0.4s ease-in-out; } 134 | 135 | .p-left { 136 | padding-left: 24px; 137 | margin: 0em; } 138 | 139 | .col-md-6 a:hover { 140 | background: white; 141 | color: black; } 142 | 143 | .movie-cover { 144 | width: 100%; 145 | background: url(http://www.orville.com/images/parallax/img-background.jpg) center/cover !important; } 146 | 147 | .movie-underlay { 148 | background: url(/images/bg-header.jpg) center/cover; 149 | width: 100%; 150 | height: auto; } 151 | 152 | .movie-cover.top .container .row .col-md-12 { 153 | margin-top: 50px; 154 | margin-bottom: 50px; } 155 | 156 | .movie-cover.top .container .row .col-md-12 img { 157 | width: 230px; 158 | border: 4px solid white; } 159 | 160 | .top-p { 161 | padding-top: 50px; 162 | padding-bottom: 50px; } 163 | 164 | .fa { 165 | padding-left: 2px; 166 | padding-right: 2px; } 167 | 168 | .container-fluid { 169 | padding-left: 0; 170 | padding-right: 0; } 171 | 172 | .active { 173 | color: #F3CB0B; } 174 | 175 | .center { 176 | text-align: center; } 177 | 178 | .glyphicon { 179 | color: #000000; } 180 | 181 | .glyphicon:hover { 182 | color: #C1272D; } 183 | 184 | h2 { 185 | border-left: 3px #C1272D solid; 186 | font-weight: bold; 187 | text-transform: uppercase; 188 | font-size: 26px; 189 | color: #3D3D3D; 190 | padding-left: 20px; 191 | margin: 0; 192 | margin-bottom: 10px; } 193 | 194 | h3 { 195 | border-left: 3px #C1272D solid; 196 | font-weight: bold; 197 | text-transform: uppercase; 198 | font-size: 22px; 199 | color: #3D3D3D; 200 | padding-left: 20px; 201 | margin: 0; 202 | margin-bottom: 10px; } 203 | 204 | .header-shadow { 205 | -webkit-box-shadow: "0px 7px 30px 0px rgba(50, 50, 50, 0.74)"; 206 | -moz-box-shadow: "0px 7px 30px 0px rgba(50, 50, 50, 0.74)"; 207 | box-shadow: "0px 7px 30px 0px rgba(50, 50, 50, 0.74)"; 208 | opacity: 0.99; } 209 | 210 | .top { 211 | padding-top: 90px; 212 | padding-bottom: 15px; } 213 | 214 | .width { 215 | width: 100%; } 216 | 217 | .container.top .col-md-2 { 218 | padding: 2px; 219 | transform: scale(1); 220 | -webkit-transition: "transform .3s ease-in-out"; 221 | -moz-transition: "transform .3s ease-in-out"; 222 | -ms-transition: "transform .3s ease-in-out"; 223 | -o-transition: "transform .3s ease-in-out"; } 224 | 225 | .row { 226 | padding-right: 13px; 227 | padding-left: 13px; } 228 | 229 | footer { 230 | background-color: #3D3D3D; 231 | color: white; 232 | display: table-row; 233 | height: 1px; } 234 | footer .container { 235 | padding: 50px; } 236 | footer .container .row { 237 | padding-left: 0px; 238 | padding-right: 0px; } 239 | footer .container .row .col-md-2 select { 240 | width: 100%; 241 | height: 40px; 242 | color: white; 243 | background: transparent; 244 | border: 2px white solid; 245 | border-radius: 0px !important; 246 | outline: none; } 247 | 248 | .fa-star-o { 249 | color: #F3CB0B; } 250 | 251 | .clear { 252 | height: 1px; } 253 | 254 | .yt-player { 255 | height: 420px; 256 | width: 60%; 257 | border: 0px; 258 | display: block; 259 | margin: 0 auto; } 260 | 261 | .no-padding { 262 | padding-left: 0.5px; 263 | padding-right: 0.5px; } 264 | 265 | @media only screen and (max-width: 700px) { 266 | header .container .logo-text { 267 | display: none !important; } 268 | 269 | .fa { 270 | font-size: 11px; } 271 | 272 | .yt-player { 273 | width: 100%; 274 | height: 315px; } } 275 | 276 | /*# sourceMappingURL=app.css.map */ 277 | -------------------------------------------------------------------------------- /web/styles/app.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../../src/Sass/app.scss","../../src/Sass/mixins.scss"], 5 | "names": [], 6 | "file": "app.css" 7 | } 8 | --------------------------------------------------------------------------------