Renamed segments + hide fixtures by default

src/app/home/home.page.html

@@ -6,8 +6,8 @@
             <section class="segments">
                 <button [ngClass]="{'active' : selectedTab === 'news'}"
                 (click)="selectedTab = 'news'"> News </button>
-                <button [ngClass]="{'active' : selectedTab === 'videos'}"
-                (click)="selectedTab = 'videos'"> Videos </button>
+                <button [ngClass]="{'active' : selectedTab === 'popular'}"
+                (click)="selectedTab = 'popular'"> Popular </button>
             </section>
         </div>
     
@@ -56,7 +56,52 @@
                     </button>
                 </section>
             </ion-slide>
+        </ion-slides>
+
+        <ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'popular'">
+            <ion-slide *ngFor="let news of popularData; let i = index">
+                <div class="image-holder">
+                    <figure>
+                        <img [src]="news.image">
+                    </figure>
+    
+                    <button *ngIf="news.type === 'VIDEO'">
+                        <ion-icon name="play"></ion-icon>
+                    </button>
+    
+                    <button *ngIf="news.type === 'ARTICLE'">
+                        <ion-icon name="newspaper"></ion-icon>
+                    </button>
+                </div>
     
+                <section class="content">
+                    <h4> {{ news.heading }} </h4>
+    
+                    <div class="details">
+                        {{ news.description }}
+                    </div>
+                </section>           
+    
+                <section class="action-buttons">
+                    <section class="shortcuts">
+                        <button class="wide-button" (click)="news.isLiked = !news.isLiked"
+                        [ngClass]="{'active' : news.isLiked}">
+                            <ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
+                            <ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
+                            <span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
+                        </button>
+    
+                        <button>
+                            <ion-icon name="share-social-outline"></ion-icon>
+                        </button>
+                    </section>                
+    
+                    <button class="read-more" (click)="showNewsDetails(news);"> 
+                        <span> More </span>            
+                        <ion-icon name="chevron-forward-outline"></ion-icon> 
+                    </button>
+                </section>
+            </ion-slide>
         </ion-slides>
     </div>
 

src/app/home/home.page.ts

@@ -35,12 +35,14 @@ export class HomePage implements OnInit {
         spaceBetween: 15,
         initialSlide: 0,
         centeredSlides: true,
-        simulateTouch: false,
-        followFinger: false,
+        // simulateTouch: false,
+        // followFinger: false,
     };
 
     newsData: Array<INews> = [];
 
+    popularData: Array<INews> = [];
+
     constructor(
         private router: Router
     ) { }
@@ -48,16 +50,6 @@ export class HomePage implements OnInit {
     ngOnInit() {
 
         this.newsData = [{
-            id: 0,
-            image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
-            heading: 'KL Rahul scores fastest 100',
-            description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
-            type: 'ARTICLE',
-            isLiked: false,
-            isBookmarked: false,
-            likes: 308,
-            comments: []
-        }, {
             id: 1,
             image: 'https://s3.india.com/wp-content/uploads/2020/10/Mayank-Agarwal-celebrates-Kings-XI-Punjabs-win-over-Mumbai-Indians-in-match-37-of-Dream11-IPL-2020-in-Dubai%C2%A9KXIP-Twitter.jpg',
             heading: 'KXIP beat MI by 3 Wickets',
@@ -94,17 +86,34 @@ export class HomePage implements OnInit {
             isBookmarked: false,
             likes: 308,
             comments: []
-        }, {
-            id: 3,
-            image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
-            heading: 'KL Rahul scores fastest 100',
+        }];
+
+        this.popularData = [{
+            id: 1,
+            image: 'https://d1u4oo4rb13yy8.cloudfront.net/book/87643-hsirtkldjx-1524204429.jpg',
+            heading: 'Secret Behind C.Gayle\'s fitness',
             description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
-            type: 'ARTICLE',
+            type: 'VIDEO',
             isLiked: false,
             isBookmarked: false,
-            likes: 308,
+            likes: 1108,
             comments: []
-        }];                
+        }, {
+            id: 2,
+            image: 'https://www.insidesport.co/wp-content/uploads/2020/08/WhatsApp-Image-2020-08-15-at-10.14.55-AM.jpeg',
+            heading: 'KXIP in UAE',
+            description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
+            type: 'VIDEO',
+            isLiked: true,
+            isBookmarked: false,
+            likes: 2101,
+            comments: [{
+                user: 'kxipFan',
+                comment: 'Cant wait till IPL starts!, Vamos KXIP!',
+                likes: 2,
+                isLiked: true,
+            }]
+        }];        
     }
 
     getIndex(e: any) {

src/app/live/live.page.ts

@@ -39,7 +39,7 @@ export class LivePage implements OnInit {
     @ViewChild('slides') slides: IonSlides;
     
     showScoreCard: boolean = true;
-    showFixtures: boolean = true;
+    showFixtures: boolean = false;
 
     selectedIndex: number = 0;