Client: switch to @nglibs/meta

client/package.json

@@ -29,6 +29,7 @@
     "@angular/router": "~3.4.1",
     "@angularclass/hmr": "^1.2.0",
     "@angularclass/hmr-loader": "^3.0.2",
+    "@nglibs/meta": "^0.2.0-rc.3",
     "@types/core-js": "^0.9.28",
     "@types/node": "^6.0.38",
     "@types/source-map": "^0.1.26",
@@ -56,7 +57,6 @@
     "ng-router-loader": "^1.0.2",
     "ng2-bootstrap": "1.1.16-10",
     "ng2-file-upload": "^1.1.4-2",
-    "ng2-meta": "https://github.com/chocobozzz/ng2-meta#build",
     "ng2-smart-table": "0.5.2-1",
     "ngc-webpack": "1.1.0",
     "node-sass": "^4.1.1",

client/src/app/app.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit, ViewContainerRef } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { MetaService } from 'ng2-meta';
-
 import { AuthService } from './core';
 import { UserService } from './shared';
 
@@ -27,7 +25,6 @@ export class AppComponent implements OnInit {
 
   constructor(
     private router: Router,
-    private metaService: MetaService,
     private authService: AuthService,
     private userService: UserService,
     viewContainerRef: ViewContainerRef

client/src/app/app.module.ts

@@ -2,7 +2,7 @@ import { ApplicationRef, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
 
-import { MetaModule, MetaConfig } from 'ng2-meta';
+import { MetaModule, MetaLoader, MetaStaticLoader, PageTitlePositioning } from '@nglibs/meta';
 import 'bootstrap-loader';
 
 import { ENV_PROVIDERS } from './environment';
@@ -16,14 +16,17 @@ import { LoginModule } from './login';
 import { SharedModule } from './shared';
 import { VideosModule } from './videos';
 
-const metaConfig: MetaConfig = {
-  //Append a title suffix such as a site name to all titles
-  //Defaults to false
-  useTitleSuffix: true,
-  defaults: {
-    title: 'PeerTube'
-  }
-};
+export function metaFactory(): MetaLoader {
+  return new MetaStaticLoader({
+    pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
+    pageTitleSeparator: ' - ',
+    applicationName: 'PeerTube',
+    defaults: {
+      title: 'PeerTube',
+      description: 'PeerTube, a decentralized video streaming platform using P2P (BitTorrent) directly in the web browser'
+    }
+  });
+}
 
 // Application wide providers
 const APP_PROVIDERS = [
@@ -43,7 +46,10 @@ const APP_PROVIDERS = [
 
     AppRoutingModule,
 
-    MetaModule.forRoot(metaConfig),
+    MetaModule.forRoot({
+      provide: MetaLoader,
+      useFactory: (metaFactory)
+    }),
 
     AccountModule,
     CoreModule,

client/src/app/videos/video-watch/video-watch.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 
 import * as videojs from 'video.js';
-import { MetaService } from 'ng2-meta';
+import { MetaService } from '@nglibs/meta';
 import { NotificationsService } from 'angular2-notifications';
 
 import { AuthService } from '../../core';
@@ -228,6 +228,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   private setOpenGraphTags() {
+    this.metaService.setTitle(this.video.name);
+
     this.metaService.setTag('og:type', 'video');
 
     this.metaService.setTag('og:title', this.video.name);

client/src/index.html

@@ -5,6 +5,7 @@
 
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="PeerTube, a decentralized video streaming platform using P2P (BitTorrent) directly in the web browser" />
 
     <!-- The following comment is used by the server to prerender OpenGraph tags -->
     <!-- opengraph tags -->