Home page details API connection

src/app/home-details/home-details.page.html

@@ -1,5 +1,4 @@
-<!-- <ion-content>
-    
+<ion-content *ngIf="newsDetails">
     <header class="topbar">
         <button (click)="back()" class="close-article-button active"> 
             <ion-icon name="close"></ion-icon> 
@@ -7,71 +6,38 @@
     </header>
 
     <div class="image-holder">
-        <figure>
-            <img [src]="newsDetails.image">
+        <figure *ngIf="!newsDetails.images">
+            <img [src]="image_url + newsDetails.image_path + newsDetails.image_file_name">
+        </figure>
+
+        <figure *ngIf="newsDetails.images">
+            <img [src]="image_url + newsDetails.images[0].data.imagePath + newsDetails.images[0].data.imageName">
         </figure>
         
-        <a [href]="newsDetails.videoLink" target="_blank" *ngIf="newsDetails.videoLink">
+        <a *ngIf="newsDetails.hls_url" [href]="newsDetails.hls_url" target="_blank">
             <button>
                 <ion-icon name="play"></ion-icon>
             </button>
         </a>
         
-        <h4> {{ newsDetails.heading }} </h4>
+        <h4> {{ newsDetails.title }} </h4>
     </div>
 
     <section class="content">
-        <div class="details" [innerHtml]="newsDetails.description">
+        <div class="details" *ngIf="newsDetails.full_text || newsDetails.desc" [innerHtml]="transformYourHtml(newsDetails.full_text ? newsDetails.full_text : newsDetails.desc)">
         </div>
-    </section>
-
 
-    <section class="comments">
-        <header> Comments </header>
-        <ul>
-            <li *ngFor="let comment of newsDetails.comments">                    
-                <p> {{ comment.comment }} <label> - {{ comment.user }} </label> </p>
+        <ng-container *ngIf="newsDetails.images">
+            <figure *ngFor="let image of newsDetails.images">
+                <img [src]="image_url + getLowRestImagePath(image.data.imagePath) + image.data.imageName">
+            </figure>
+        </ng-container>        
 
-                <button (click)="comment.isLiked = !comment.isLiked"
-                [ngClass]="{'active' : comment.isLiked}">
-                    <ion-icon *ngIf="!comment.isLiked" name="heart-outline"></ion-icon>
-                    <ion-icon *ngIf="comment.isLiked" name="heart"></ion-icon>
-                    <span> {{ comment.isLiked ? comment.likes + 1 : comment.likes }} </span>
-                </button>
-            </li>
-            <div class="input-holder" id="comment-input">
-                <input type="text" placeholder="Type your comment" [(ngModel)]="myComment">
-                <button (click)="postComment()"> <ion-icon name="send"></ion-icon> </button>
-            </div>         
-        </ul>
     </section>
 
-    <section class="action-buttons">
-        <section class="shortcuts">
-            <button class="wide-button" (click)="newsDetails.isLiked = !newsDetails.isLiked"
-            [ngClass]="{'active' : newsDetails.isLiked}">
-                <ion-icon *ngIf="!newsDetails.isLiked" name="heart-outline"></ion-icon>
-                <ion-icon *ngIf="newsDetails.isLiked" name="heart"></ion-icon>
-                <span> {{ newsDetails.isLiked ? newsDetails.likes + 1 : newsDetails.likes }} </span>
-            </button>
-
-            <button>
-                <ion-icon name="share-social-outline"></ion-icon>
-            </button>
-        </section>
-
-        <section class="shortcuts">
-            <button (click)="newsDetails.isBookmarked = !newsDetails.isBookmarked"
-            [ngClass]="{'active' : newsDetails.isBookmarked}">
-                <ion-icon *ngIf="!newsDetails.isBookmarked" name="bookmark-outline"></ion-icon>
-                <ion-icon *ngIf="newsDetails.isBookmarked" name="bookmark"></ion-icon>
-            </button>
-
-            <button class="wide-button" (click)="scrollToAddComment()">
-                <ion-icon name="chatbubble-outline"></ion-icon>
-                <span> {{ newsDetails.comments.length }} </span>
-            </button>
-        </section>
-
-    </section>
-</ion-content> -->
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button class="share-button">
+            <ion-icon name="share-social-outline"></ion-icon>
+        </ion-fab-button>
+    </ion-fab>
+</ion-content>

src/app/home-details/home-details.page.scss

@@ -1,3 +1,5 @@
+@import '../colors';
+
 .topbar {
     position: fixed;
     top: 0;
@@ -139,6 +141,20 @@
     border-width: 0px;
     box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.3);
     animation: showUpContent 0.5s forwards;
+
+    figure {
+        border-radius: 10px;
+        overflow: hidden;
+        margin-bottom: 20px;
+        display: block;
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
 }
 
 @keyframes showUpContent {
@@ -158,173 +174,15 @@
     color: var(--light-grey);
     overflow: hidden;
     transition: opacity 0.1s;
-}
-
-
-.action-buttons {
-    display: flex;
-    padding: 0 3%;
-    z-index: 1;
-    margin: 0 auto 20px;
-    width: 90%;
-    background-color: white;
-    border-radius: 10px;
-    position: sticky;
-    position: -webkit-sticky;
-    bottom: 10px;
-    z-index: 2;
-    box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.3);
-    justify-content: center;
-    height: 60px;
-
-    .shortcuts {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        width: 50%;
-
-        button {
-            margin-right: 5px;
-            border-radius: 50%;
-            background-color: rgba(var(--light-grey-rgb), 0.1);
-            margin: 0 auto;
-            width: 40px;
-            height: 40px;
-
-            &.wide-button {
-                width: auto;
-                border-radius: 5px;
-                padding: 0 10px;
-            }
-
-            &.active {
-                ion-icon, span {
-                    color: var(--brand-red);
-                }
-            }            
-
-            span {
-                vertical-align: middle;
-                color: var(--light-grey);
-            }
-            
-            ion-icon {
-                vertical-align: middle;
-                color: var(--brand-black);
-                font-size: 1.2rem;
-            }
-        }
-    }
-}
-
-.comments {
-    background-color: white;
-    width: 90%; 
-    position: relative;
-    box-shadow: 0px 0px 0px var(--light-grey);
-    z-index: 1;
-    margin: -20px auto 20px;
-    border-radius: 10px;        
-    box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.3);
-    border-radius: 10px;
-    overflow: hidden;
-    opacity: 0;
-    animation: fadeInFromBottom 0.5s forwards;
     
-    header {
-        font-size: 1.1rem;
-        margin: 0px;
-        line-height: 1.5;
-        font-weight: 500;
-        color: var(--brand-black);
-        transition: opacity 0.1s;
-        background-color: white;
-        padding: 10px 5%;
+    p {
+        margin-bottom: 20px;
     }
+}
 
-    ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-
-        li {
-            padding: 5px 5% 10px;
-            border-top: 1px solid rgba(var(--light-grey-rgb), 0.3);
-            line-height: 1.5;
-        }
-
-        label {
-            font-size: 1rem;
-            font-weight: 500;
-            letter-spacing: 1px;               
-            color: rgba(var(--brand-red-rgb), 0.8);
-        }
-
-        p {
-            margin: 3px 0;
-            font-size: 1rem;
-            font-weight: 400;
-            color: var(--light-grey);
-        }
-
-        button {
-            background-color: #f3f3f3;
-            margin-right: 5px;
-            height: 30px;
-            width: auto;
-            border-radius: 5px;
-            padding: 0 5px;
-
-            span {
-                vertical-align: middle;
-                color: var(--light-grey);
-            }
-            
-            ion-icon {
-                vertical-align: middle;
-                color: var(--brand-black);
-                font-size: 1rem;
-            }
-            
-
-            &.active {
-                ion-icon, span {
-                    color: var(--brand-red);
-                }
-            }
-        }
-
-        .input-holder {
-            display: flex;
-            width: 100%;
-            height: 70px;
-            align-items: center;
-
-            input {
-                width: calc(100% - 80px);
-                margin: 0 auto;
-                border: 1px solid rgba(var(--light-grey-rgb), 0.3);
-                border-radius: 30px;
-                font-size: 14px;
-                color: var(--brand-black);
-                font-weight: 500;
-                height: 40px;
-                padding: 0 15px;
-                background-color: white;
-            }
-
-            button {
-                width: 40px;
-                height: 40px;
-                background-color: var(--brand-red);
-                margin: 0 auto;
-                border-radius: 50%;
-
-                ion-icon {
-                    color: white;
-                    font-size: 16px;
-                }
-            }
-        }
-    }
+.share-button {
+    --background: transparent;
+    border-radius: 50%;
+    background: linear-gradient(to left, darken($brand-red, 20%), $brand-gold);
+    transform: translate(-10px, -10px);
 }

src/app/home-details/home-details.page.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
-import { NewsService } from '../services/news.service';
+import { NewsService, IMAGE_BASE_URL } from '../services/news.service';
 import { ToastService } from '../services/toast.service';
 
 @Component({
@@ -12,6 +12,8 @@ import { ToastService } from '../services/toast.service';
 })
 export class HomeDetailsPage implements OnInit {
     myComment: string = '';
+    image_url = IMAGE_BASE_URL;
+    newsDetails: any = {};
 
     constructor(
         private route: ActivatedRoute,
@@ -25,6 +27,10 @@ export class HomeDetailsPage implements OnInit {
         return this.dom.bypassSecurityTrustResourceUrl(url);
     }
 
+    transformYourHtml(htmlTextWithStyle) {
+        return this.dom.bypassSecurityTrustHtml(htmlTextWithStyle += '<style type="text/css">p{ margin: 0px 0px 10px 0px; }</style>');
+    }
+
     ngOnInit() {
         let alias_title = this.route.snapshot.paramMap.get('alias_title');
         let type = this.route.snapshot.paramMap.get('type');
@@ -33,6 +39,55 @@ export class HomeDetailsPage implements OnInit {
 
         console.log(alias_title);
         console.log(type);
+
+        if (type === 'news') {
+            this.newsService.getArticleDetails(alias_title).then((data: any) => {
+
+                if (data && data.content && data.content.data) {
+                    this.newsDetails = data.content.data;
+                } else {
+                    this.toastService.presentToastWithOptions("No News available");
+                }
+
+            }, (err) => {
+                console.log(err);
+                this.toastService.presentToastWithOptions("Failed to fetch details", "danger");
+            });
+        }
+
+        if (type === 'videos') {
+            this.newsService.getVideoDetails(alias_title).then((data: any) => {
+
+                if (data && data.content && data.content.data) {
+                    this.newsDetails = data.content.data;
+                } else {
+                    this.toastService.presentToastWithOptions("No Video available");
+                }
+
+            }, (err) => {
+                console.log(err);
+                this.toastService.presentToastWithOptions("Failed to fetch details", "danger");
+            });
+        }
+
+        if (type === 'gallery') {
+            this.newsService.getGalleryDetails(alias_title).then((data: any) => {
+
+                if (data && data.content && data.content.data) {
+                    this.newsDetails = data.content.data;
+                } else {
+                    this.toastService.presentToastWithOptions("No Photos available");
+                }
+
+            }, (err) => {
+                console.log(err);
+                this.toastService.presentToastWithOptions("Failed to fetch details", "danger");
+            });
+        }
+    }
+
+    getLowRestImagePath(path: string) {
+        return path.replace("/0/", "/4-3/388-218/");
     }
 
     back() {

src/app/home/home.page.html

@@ -29,7 +29,7 @@
                 <section class="content">
                     <h4> {{ news.short_title }} </h4>
     
-                    <div class="details" [innerHtml]="news.short_desc">
+                    <div class="details" [innerHtml]="transformYourHtml(news.short_desc)">
                     </div>
                 </section>           
     
@@ -63,7 +63,7 @@
                 <section class="content">
                     <h4> {{ news.short_title ? news.short_title : news.asset_title }} </h4>
     
-                    <div class="details" [innerHtml]="news.short_desc">
+                    <div class="details" [innerHtml]="transformYourHtml(news.short_desc)">
                     </div>
                 </section>           
     
@@ -94,7 +94,7 @@
                 <section class="content">
                     <h4> {{ news.short_title ? news.short_title : news.asset_title }} </h4>
     
-                    <div class="details" [innerHtml]="news.short_desc">
+                    <div class="details" [innerHtml]="transformYourHtml(news.short_desc)">
                     </div>
                 </section>           
     

src/app/home/home.page.scss

@@ -145,15 +145,11 @@ ion-slides {
         line-height: 1.5;
         font-weight: 400;
         display: -webkit-box;
-        -webkit-line-clamp: 4;
+        -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         color: var(--light-grey);
         overflow: hidden;
         transition: opacity 0.1s;
-
-        p {
-            margin: 0;
-        }
     }
 
     .action-buttons {

src/app/home/home.page.ts

@@ -3,6 +3,7 @@ import { IonSlides } from '@ionic/angular';
 import { Router } from '@angular/router';
 import { NewsService, IMAGE_BASE_URL } from '../services/news.service';
 import { ToastService } from '../services/toast.service';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
     selector: 'app-home',
@@ -35,9 +36,14 @@ export class HomePage implements OnInit {
     constructor(
         private router: Router,
         private newsService: NewsService,
-        private toastService: ToastService
+        private toastService: ToastService,
+        private dom: DomSanitizer,
     ) { }
 
+    transformYourHtml(htmlTextWithStyle) {
+        return this.dom.bypassSecurityTrustHtml(htmlTextWithStyle += '<style type="text/css">p{ margin: 0px; }</style>');
+    }
+
     ngOnInit() {
         this.newsService.getArticles().then((data: any) => {
             if (data && data.content && data.content.items) {

src/app/services/news.service.ts

@@ -24,7 +24,7 @@ export class NewsService {
     }
 
     getVideoDetails(title_alias_from_listing_api: string) {
-        return this.http.get('https://www.punjabkingsipl.in/api/video/' + title_alias_from_listing_api);
+        return this.http.get('https://www.punjabkingsipl.in/api/video/' + title_alias_from_listing_api).toPromise();
     }
 
     getGalleries() {
@@ -32,6 +32,6 @@ export class NewsService {
     }
 
     getGalleryDetails(title_alias_from_listing_api: string) {
-        return this.http.get('https://www.punjabkingsipl.in/api/photo/' + title_alias_from_listing_api);
+        return this.http.get('https://www.punjabkingsipl.in/api/photo/' + title_alias_from_listing_api).toPromise();
     }
 }

src/global.scss

@@ -36,10 +36,6 @@
     letter-spacing: 0.5px;
 }
 
-p, header, h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-}
-
 ion-content {
     --background: transparent;
     background: linear-gradient(to bottom, darken($brand-blue, 20%), $brand-blue 80%);