feat: allow to customize logo on logged area

Closes #282
meumobi · Mar 12, 2019 · ae4da81 · ae4da81
1 parent bb7d368
commit ae4da81
Show file tree

Hide file tree

Showing 12 changed files with 2,743 additions and 2,736 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "firebase": "^4.8.2",
     "hls.js": "^0.12.2",
     "ionic-angular": "3.9.2",
+    "ionic-image-loader": "^6.3.2",
     "ionic-img-viewer": "^2.9.0",
     "ionic2-super-tabs": "^5.0.2",
     "ionicons": "3.0.0",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -21,7 +21,8 @@
       "SUCCESS": "Settings successfully saved!",
       "ERROR": "An error occurred, please try again later or contact your admin."
     },
-    "TV_URL": "TV url"
+    "TV_URL": "TV Stream Url",
+    "LOGO_URL": "Custom Logo Url"
   },
   "TV" : {
     "NO_SUPPORT_DISCLAIMER": "The video can't be played."

diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
@@ -16,13 +16,14 @@
   "SETTINGS": {
     "LINK": "Configurações",
     "TITLE": "Configurações da conta",
-    "YOUTUBE_CHANNEL_ID": "Id do Canal do Youtube",
+    "YOUTUBE_CHANNEL_ID": "Canal Youtube (Id)",
     "SUBMIT": {
       "LABEL": "Salvar",
       "SUCCESS": "Configurações salvas",
       "ERROR": "Ocorreu um erro, por favor tente novamente ou entre em contato connosco."
     },
-    "TV_URL": "Url da TV"
+    "TV_URL": "TV Streaming (Url)",
+    "LOGO_URL": "Logo personalizado (Url)"
   },
   "TV" : {
     "NO_SUPPORT_DISCLAIMER": "O vídeo não pode ser reproduzido."

diff --git a/src/assets/images/header-clean_stihl.png b/src/assets/images/header-clean_stihl.png
diff --git a/src/models/settings.ts b/src/models/settings.ts
@@ -2,5 +2,6 @@ export class Settings {
   youtubeChannelId: string;
   domain: string;
   tvUrl: string;
+  logoUrl: string;
   _id?: string;
 }
diff --git a/src/ngsw-config.json b/src/ngsw-config.json
@@ -22,5 +22,14 @@
         "/assets/**"
       ]
     }
+  }, {
+    "name": "uploads",
+    "installMode": "lazy",
+    "updateMode": "lazy",
+    "resources": {
+      "urls": [
+        "/uploads/**"
+      ]
+    }
   }]
 }
diff --git a/src/pages/home/home.html b/src/pages/home/home.html
@@ -4,16 +4,16 @@
         <ion-icon name="menu"></ion-icon>
       </button>
       <ion-title>
-        <img src="./assets/images/header-clean.png" class="logo" alt="infomobi">
+        <img-loader [src]="(settings | async)?.logoUrl" fallbackUrl="./assets/images/header-clean.png" fallbackAsPlaceholder="true" [imgAttributes]="imageAttributes" useImg></img-loader>
       </ion-title>
       <ion-buttons end>
-        <button ion-button block (click)="openPage('VideosPage',{channelId: settings.youtubeChannelId})" *ngIf="settings && settings.youtubeChannelId">
+        <button ion-button block (click)="openPage('VideosPage',{channelId: settings.youtubeChannelId})" *ngIf="(settings | async) as settings">
           <div>
             <ion-icon name="logo-youtube"></ion-icon>
             <label>{{'Videos' | translate}}</label>
           </div>
         </button>
-        <button ion-button block (click)="openPage('StreamingPage',{url: settings.tvUrl})" *ngIf="settings && settings.tvUrl">
+        <button ion-button block (click)="openPage('StreamingPage',{url: settings.tvUrl})" *ngIf="(settings | async) as settings">
             <div>
               <ion-icon name="desktop"></ion-icon>
               <label>TV</label>

diff --git a/src/pages/home/home.module.ts b/src/pages/home/home.module.ts
@@ -4,16 +4,18 @@ import { HomePage } from './home';
 import { SharedModule } from '@shared/shared.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { SuperTabsModule } from 'ionic2-super-tabs';
+import { IonicImageLoader } from 'ionic-image-loader';
 
 @NgModule({
   declarations: [
     HomePage,
   ],
   imports: [
     IonicPageModule.forChild(HomePage),
+    IonicImageLoader.forRoot(),
     SharedModule,
     TranslateModule,
     SuperTabsModule,
   ],
 })
-export class HomePageModule {}
+export class HomePageModule {}
diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
@@ -1,27 +1,24 @@
 import { SettingsService } from '@providers/settings';
 import { Observable } from 'rxjs/Observable';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { IonicPage, NavController } from 'ionic-angular';
 import { AuthDataPersistenceService } from '@providers/auth-data-persistence';
-import { AuthUser } from '@models/auth.interface';
 import { Settings } from '@models/settings';
-import { Subscription } from 'rxjs';
+import { ImageAttribute } from 'ionic-image-loader';
 
 @IonicPage()
 @Component({
   selector: 'page-home',
   templateUrl: 'home.html'
 })
-export class HomePage implements OnInit, OnDestroy {
+export class HomePage implements OnInit {
 
   live: any = 'LivePage';
   contacts: any = 'ContactsPage';
   items: any = 'ItemsPage';
   authData$: Observable<any>;
-  authUser: AuthUser = null;
-  settings: Settings;
-  settingsSubscription: Subscription;
-  authDataSubscription: Subscription;
+  settings: Observable<Settings>;
+  imageAttributes: ImageAttribute[] = [];
 
   constructor(
     private authDataPersistenceService: AuthDataPersistenceService,
@@ -30,26 +27,13 @@ export class HomePage implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    console.log('HomePage ngOnInit');
-    this.authData$ = this.authDataPersistenceService.getAuthDataObserver();
-    this.authDataSubscription = this.authData$.subscribe(
-      data => {
-        if (data) {
-          this.authUser = data.visitor;
-        } else {
-          this.authUser = null;
-        }
-      }
-    );
-
-    this.settingsSubscription = this.settingsService.getSettingsObserver().subscribe( data => {
-      this.settings = data;
+    this.imageAttributes.push({
+      element: 'class',
+      value: 'logo'
     });
-  }
 
-  ngOnDestroy() {
-    this.settingsSubscription.unsubscribe();
-    this.authDataSubscription.unsubscribe();
+    this.authData$ = this.authDataPersistenceService.getAuthDataObserver();
+    this.settings = this.settingsService.getSettingsObserver();
   }
 
   ionViewCanEnter(): boolean {

diff --git a/src/pages/settings/settings.html b/src/pages/settings/settings.html
@@ -13,12 +13,14 @@
         <ion-label color="primary" stacked>{{'SETTINGS.YOUTUBE_CHANNEL_ID' | translate}}</ion-label>
         <ion-input type="text" name="youtubeChannelId" [(ngModel)]="settings.youtubeChannelId"></ion-input>
       </ion-item>
-    </ion-list>
-    <ion-list>
       <ion-item>
         <ion-label color="primary" stacked>{{'SETTINGS.TV_URL' | translate}}</ion-label>
         <ion-input type="text" name="tvUrl" [(ngModel)]="settings.tvUrl"></ion-input>
       </ion-item>
+      <ion-item>
+        <ion-label color="primary" stacked>{{'SETTINGS.LOGO_URL' | translate}}</ion-label>
+        <ion-input type="text" name="logoUrl" [(ngModel)]="settings.logoUrl"></ion-input>
+      </ion-item>
     </ion-list>
     <ion-row>
       <ion-col>

diff --git a/src/providers/settings/settings.service-mock.ts b/src/providers/settings/settings.service-mock.ts
@@ -9,7 +9,8 @@ export class SettingsService {
   settings = Observable.of({
     domain: 'meumobibox.meumobi.com',
     youtubeChannelId: 'UCRGoQtYFZCkbBegdlv8xWew',
-    tvUrl: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
+    tvUrl: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
+    logoUrl: 'https://meumobi.com/uploads/site_logos/200x200_6943664.png'
   });