add trending

README.md

@@ -22,7 +22,7 @@ composer install
 php artisan flox:init # Enter here your database credentials
 php artisan flox:db # Running migrations and enter your admin credentials for the site
 ```
-* Enter your TMDB API-Key in `backend/.env`
+* Enter your TMDb API-Key in `backend/.env`
 * Set your `CLIENT_URI` in `backend/.env`. If you use something like XAMPP or MAMP, the CLIENT_URI should be `/flox/public`. If you use something like Homestead, the CLIENT_URI should be `/`.
 ```bash
 # CLIENT_URI=/flox/public
@@ -35,9 +35,13 @@ http://mydomain.com/subfolder/for/flox/public
 http://mydomain.com
 ```
 
-### User Data
+### Suggestions
 
-You can edit your admin account (username and password) in the settings page (link is in footer).
+If you hover over an movie, you can click on `Suggestions` to search for recommendations and similar movies.
+
+### Popular Movies
+
+`Trending` will display a list of the current popular movies on TMDb. This list updates daily.
 
 ### Export / Import
 
@@ -51,13 +55,9 @@ Export and import can also be used for the update of flox itself. Export your mo
 
 ### Alternative Language
 
-All movie titles are in english by default. You can check if TMDB has an alternative title by setting `ALTERNATIVE_LANGUAGE` in `backend/.env`.
+All movie titles are in english by default. You can check if TMDb has an alternative title by setting `ALTERNATIVE_LANGUAGE` in `backend/.env`.
 The most commons are `DE`, `IT`, `FR`, `ES` and `RU`.
 
-### Suggestions
-
-If you hover over an movie, you can click on `Suggestions` to search for recommendations and similar movies.
-
 ### Better Search
 
 You can use [Laravel Scout](https://laravel.com/docs/master/scout) for better search results with typos. Something like `findg nemo`.
@@ -69,6 +69,10 @@ To sync your own movie list with your Laravel Scout driver, run `php artisan flo
 
 Note: Laravel Scout is on the demo site not active.
 
+### User Data
+
+You can edit your admin account (username and password) in the settings page (link is in footer).
+
 ### Development
 
 * Run `npm install` in your `/client` folder.

backend/app/Http/Controllers/TMDBController.php

@@ -23,4 +23,9 @@
     {
       return $this->tmdb->suggestions($tmdbID);
     }
+
+    public function trending()
+    {
+      return $this->tmdb->trending();
+    }
   }

backend/app/Services/TMDB.php

@@ -57,6 +57,32 @@
       return trim(str_replace('3D', '', $title->first()->title));
     }
 
+    /**
+     * Search TMDB for current popular movies.
+     *
+     * @return \Illuminate\Support\Collection
+     */
+    public function trending()
+    {
+      $response = $this->client->get('/3/movie/popular', ['query' => ['api_key' => $this->apiKey]]);
+
+      $items = collect($this->createItems($response));
+      $allID = $items->pluck('tmdb_id');
+
+      // Get all movies from trendig which already in database.
+      $inDB = Item::whereIn('tmdb_id', $allID)->get()->toArray();
+
+      // Remove all inDB movies from trending.
+      $filtered = $items->filter(function($item) use ($inDB) {
+        return ! in_array($item['tmdb_id'], array_column($inDB, 'tmdb_id'));
+      });
+
+      $merged = $filtered->merge($inDB);
+
+      // Reset array keys to dispxlay inDB items first.
+      return array_values($merged->reverse()->toArray());
+    }
+
     /**
      * Search TMDB for recommendations and similar movies.
      *

backend/routes/web.php

@@ -8,6 +8,7 @@
     Route::get('/search-items', 'ItemController@search');
 
     Route::get('/suggestions/{tmdbID}', 'TMDBController@suggestions');
+    Route::get('/trending', 'TMDBController@trending');
 
     Route::group(['middleware' => 'auth'], function() {
       Route::get('/export', 'ItemController@export');

client/app/components/Content/Trending.vue

@@ -0,0 +1,60 @@
+<template>
+  <main>
+    <div class="wrap-content" v-if=" ! loading">
+      <Item v-for="(item, index) in trendingItems" :item="item" :key="index"></Item>
+    </div>
+
+    <span class="loader fullsize-loader" v-if="loading"><i></i></span>
+  </main>
+</template>
+
+<script>
+  import Item from './Item.vue';
+  import Helper from '../../helper';
+
+  import { mapState, mapMutations } from 'vuex'
+
+  export default {
+    mixins: [Helper],
+
+    created() {
+      this.initTrending();
+    },
+
+    data() {
+      return {
+        trendingItems: []
+      }
+    },
+
+    computed: {
+      ...mapState({
+        loading: state => state.loading
+      })
+    },
+
+    methods: {
+      ...mapMutations([ 'SET_LOADING' ]),
+
+      initTrending() {
+        this.SET_LOADING(true);
+
+        this.$http.get(`${config.api}/trending`).then(value => {
+          this.trendingItems = value.body;
+          this.SET_LOADING(false);
+        })
+      }
+    },
+
+    components: {
+      Item
+    },
+
+    watch: {
+      $route() {
+        this.scrollToTop();
+        this.initTrending();
+      }
+    }
+  }
+</script>

client/app/components/Header.vue

@@ -11,6 +11,12 @@
         <span title="Toggle Color" class="icon-constrast"  @click="toggleColorScheme()"><i></i></span>
       </span>
 
+      <nav class="site-nav">
+        <ul>
+          <li><router-link to="/trending">Trending</router-link></li>
+        </ul>
+      </nav>
+
     </div>
   </header>
 </template>

client/app/routes.js

@@ -7,6 +7,7 @@ import Content from './components/Content/Content.vue';
 import SearchContent from './components/Content/SearchContent.vue';
 import Settings from './components/Content/Settings.vue';
 import Suggestions from './components/Content/Suggestions.vue';
+import Trending from './components/Content/Trending.vue';
 
 Vue.use(Router);
 
@@ -18,6 +19,7 @@ export default new Router({
     { path: '/search', component: SearchContent },
     { path: '/settings', component: Settings },
     { path: '/suggestions', component: Suggestions },
+    { path: '/trending', component: Trending },
     { path: '*', component: Content }
   ]
 });

client/resources/sass/components/_header.scss

@@ -89,4 +89,50 @@ header {
       background: #fff;
     }
   }
+}
+
+.site-nav {
+  float: right;
+  margin: 7px 60px 0 0;
+
+  @include media(5) {
+    margin: 7px 20px 0 0;
+  }
+
+  @include media(6) {
+    float: left;
+    width: 100%;
+    margin: 20px 0 0 0;
+  }
+
+  ul {
+    float: left;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    float: left;
+    margin: 0 20px 0 0;
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+
+  a {
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase;
+    border-bottom: 2px solid transparent;
+
+    &.router-link-active {
+      border-bottom: 2px solid #fff;
+    }
+
+    &:active {
+      opacity: .6;
+    }
+  }
 }