initial commit

.gitignore

@@ -0,0 +1,5 @@
+.idea
+/server/vendor
+/client/node_modules
+.env
+public/assets/js/bundle.js

LICENSE.md

@@ -0,0 +1,19 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 devfake
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,46 @@
+![flox](http://80.240.132.120/flox/public/assets/img/logo-big.png)
+
+###[Try Demo](http://80.240.132.120/flox/public/)
+
+Flox is a self hosted Movies, Series and Anime watch list. It's build on top of PHP (Laravel), MySQL and React and uses [The Movie Database](https://www.themoviedb.org/) API.
+
+**The current status miss some important features. See Todo.**
+
+The rating based on an 5-Point system.
+
+### Requirements
+
+* PHP 5.5.9+
+* [Composer](https://getcomposer.org/)
+* [The Movie Database](https://www.themoviedb.org/) Account for the [API-Key](https://www.themoviedb.org/faq/api).
+
+### Install
+
+##### Server
+
+* Download Flox and `cd` into `server`.
+* Rename `.env.example` to `.env` and fill all your credentials out (your database and TMDb API-Key).
+* Run `composer install`.
+* Give `storage` recursive write access.
+* Run `php artisan migrate`. This builds the database schema for Flox.
+* Since the insertion of new items currently not working, run `php artisan db:seed` for prefabricated items.
+
+##### Client / Public
+
+* Open the `public/assets/js/config.js` file and modify them. The `uri` is needed for the react-router. If your app lives in the root folder, change it to `/`. The rest should be clear.
+
+**Only for development:**
+* Run `npm install` in your `client` folder.
+* Run `gulp watch` or `gulp watch --production` and make your work.
+
+### Todo
+
+* Fix load icon jerk.
+* Edit, remove and add items.
+* Login for admin (maybe with options).
+* Detail page for items (rather than direct to youtube).
+* Easy installer.
+* Rewrite Server API.
+* Light Theme.
+* Modify and add own categorys.
+* For series and animes a list of episodes.

client/app/api.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+class Api extends React.Component {
+
+  static categories() {
+    return $.get(config.api + 'all-categories');
+  }
+
+  static categoryItems(category) {
+    return $.get(config.api + 'category-items/' + category + '/' + this.usersFilterFor(category));
+  }
+
+  static usersFilterFor(category) {
+    if( ! localStorage.getItem('category-' + category)) {
+      localStorage.setItem('category-' + category, 'seen');
+    }
+
+    return localStorage.getItem('category-' + category);
+  }
+
+  static changeUsersFilterFor(category, type) {
+    localStorage.setItem('category-' + category, type);
+  }
+
+  static search(type, value) {
+    return $.get(config.api + 'search/' + type + '/' + value);
+  }
+
+  /*static searchTMDBByID(id) {
+    return $.get(config.api + 'search/tmdb/id/' + id);
+  }
+
+  static searchItemBySlug(slug) {
+    return $.get(config.api + 'item/' + slug)
+  }*/
+}
+
+export default Api;

client/app/app.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Router from 'react-router';
+import Api from './api';
+import Home from './sites/home';
+import Category from './sites/category';
+//import Show from './partials/show';
+import Header from './partials/header';
+import Footer from './partials/footer';
+
+let Route = Router.Route;
+
+let RouteHandler = Router.RouteHandler;
+
+class Flox extends React.Component {
+
+  render() {
+    return (
+      <div>
+        <Header />
+        <RouteHandler />
+        <Footer />
+      </div>
+    );
+  }
+}
+
+// Mäh...
+// <Route path=":category/:item" handler={Show} />
+let routes = (
+  <Route handler={Flox} path={config.uri}>
+    <Route handler={Home} />
+    <Route path=":category" handler={Category} />
+  </Route>
+);
+
+Router.run(routes, Router.HistoryLocation, (Root) => {
+  React.render(<Root />, document.querySelector('.flox'));
+});

client/app/partials/box.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Router from 'react-router';
+import FilterOptions from './filter-options';
+import Item from './item';
+import Api from '../api';
+
+let Link = Router.Link;
+
+class Box extends React.Component {
+
+  state = {
+    // No need to sync parent items.
+    items: this.props.items
+  }
+
+  render() {
+    let items = this.state.items.map((value, key) => {
+      return <Item key={key} data={value} category={this.props.category.slug} />
+    });
+
+    return (
+
+      <section className="box">
+        <div className="wrap">
+
+          <Link to={config.uri + this.props.category.slug} className="box-headline">
+            {this.props.category.name} ({this.props.category.items_count.aggregate})
+          </Link>
+
+          <FilterOptions category={this.props.category.slug} changeFilter={this.changeFilter.bind(this)} />
+
+          <div className="items">
+            { ! this.state.items.length ? <i className="icon-box-load"></i> : items}
+          </div>
+
+        </div>
+      </section>
+
+    );
+  }
+
+  changeFilter(filterBy, category) {
+    Api.changeUsersFilterFor(category, filterBy);
+
+    this.setState({
+      items: []
+    })
+
+    // todo: Move to api.
+    setTimeout(() => {
+      $.get(config.api + this.props.type + '-items/' + this.props.category.slug + '/' + filterBy, (value) => {
+        this.setState({
+          items: value.items
+        })
+      });
+    }, 200);
+  }
+}
+
+export default Box;

client/app/partials/filter-options.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Api from '../api';
+
+class FilterOptions extends React.Component {
+
+  render() {
+    return (
+
+      <div className="box-options">
+        <i className={'icon-time ' + this.setActiveIf('seen')} title="Last Seen" onClick={this.props.changeFilter.bind(null, 'seen', this.props.category)}></i>
+        <i className={'icon-star ' + this.setActiveIf('rating')} title="Best Rated" onClick={this.props.changeFilter.bind(null, 'rating', this.props.category)}></i>
+      </div>
+
+    );
+  }
+
+  setActiveIf(type) {
+    if(type === Api.usersFilterFor(this.props.category)) return 'active';
+  }
+}
+
+export default FilterOptions;

client/app/partials/flox-item.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+class FloxItem extends React.Component {
+
+  render() {
+    return (
+
+      <div className={'item ' + this.props.loadClass}>
+        <div className="icon-edit-wrap">
+          <i className="icon-edit"></i>
+        </div>
+
+        <a href={"https://www.youtube.com/results?search_query=" + this.props.data.title + " Trailer"} target="_blank" className="item-image" style={this.props.bgStyle} title={this.props.data.rating + " / 5 Points"}>
+          {this.props.bgStyle.backgroundImage ? '' : <i className="icon-no-image"></i>}
+          <div className={"rating rating-" + this.props.data.rating}></div>
+        </a>
+
+        <div className="item-content">
+          <span className="item-date" title={"Released on " + this.props.released().full}>{this.props.released().year}</span>
+          <a href={"https://www.youtube.com/results?search_query=" + this.props.data.title + " Trailer"} target="_blank" className="item-title" title={this.props.data.title}>{this.props.data.title}</a>
+        </div>
+      </div>
+
+    );
+  }
+}
+
+export default FloxItem;

client/app/partials/footer.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Router from 'react-router';
+
+let Link = Router.Link;
+
+class Footer extends React.Component {
+
+  render() {
+    return (
+
+      <footer className="site-footer">
+        <div className="wrap">
+          <span className="attribution">
+            <a href="https://www.themoviedb.org/" target="_blank"><i className="icon-tmdb"></i></a> This product uses the TMDb API but is not endorsed or certified by TMDb
+          </span>
+          <a className="icon-github" href="https://github.com/devfake/flox" target="_blank"></a>
+        </div>
+      </footer>
+
+    );
+  }
+}
+
+export default Footer;

client/app/partials/header.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import Router from 'react-router';
+import Modal from './modal';
+
+let Link = Router.Link;
+
+class Header extends React.Component {
+
+  state = {
+    showModal: false,
+    type: ''
+  }
+
+  render() {
+    return (
+
+      <div>
+        {this.state.showModal ? <Modal type={this.state.type} closeModal={this.changeModal.bind(this)} /> : ''}
+
+        <header className="site-header">
+          <div className="wrap">
+            <Link to={config.uri} className="logo"><img src={config.uri + 'assets/img/logo.png'} width="80" height="24" alt="Flox" /></Link>
+
+              <div className="add-wrap" title="Search in TMDB" onClick={this.changeModal.bind(this, 'tmdb')}>
+                <i className="icon-add"></i>
+              </div>
+
+              <nav className="site-nav">
+                <ul>
+                  <li><Link to={config.uri}>All</Link></li>
+                  <li><Link to={config.uri + 'movies'}>Movies</Link></li>
+                  <li><Link to={config.uri + 'series'}>Series</Link></li>
+                  <li><Link to={config.uri + 'animes'}>Animes</Link></li>
+                  <li className="icon-search-wrap" onClick={this.changeModal.bind(this, 'flox')} title="Search in Flox">
+                    <i className="icon-search"></i>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </header>
+      </div>
+
+    );
+  }
+
+  changeModal(type = '') {
+    this.setState({
+      showModal: ! this.state.showModal,
+      type: type
+    })
+  }
+}
+
+export default Header;