youtube api

src/app/app.component.html

@@ -2,14 +2,14 @@
   <ion-menu side="start" contentId="content">
     <ion-header>
       <ion-toolbar>
-        <ion-title class="menu-title">Menu</ion-title>
+        <ion-title class="menu-title">Active Radio</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <ion-list>
         <ion-menu-toggle auto-hide="true">
           <ion-item routerLink="/tabs/tab1" routerDirection="forward">
-            <ion-label>Tab 1</ion-label>
+            <ion-label>Tab 111</ion-label>
           </ion-item>
           <ion-item routerLink="/tabs/tab2" routerDirection="forward">
             <ion-label>Tab 2</ion-label>

src/app/home/home.page.html

@@ -1,7 +1,9 @@
 <ion-header>
   <ion-toolbar class="toolbar-bg-color">
     <ion-buttons slot="end">
-      <ion-menu-button></ion-menu-button>
+      <ion-menu-button>
+        <ion-icon src="../assets/icon/menu-svgrepo-com.svg"></ion-icon>
+      </ion-menu-button>
     </ion-buttons>
     <img src="../../../assets/icon/logo-fm99.png" class="head-img">
   </ion-toolbar>
@@ -27,11 +29,11 @@
       </ion-col>
     </ion-row>
     <ion-row *ngFor="let news of newsdata | slice:0:4">
-      <ion-col size="5">        
-        <img [src]="news.better_featured_image.source_url" [style.width]="'100%'" /> 
+      <ion-col size="5">
+        <img [src]="news.better_featured_image.source_url" [style.width]="'100%'" />
       </ion-col>
       <ion-col class="ion-align-self-center"><a [routerLink]="['../news-detail' , news.id]"><span
-[innerHTML]="news.title.rendered"></span>
+            [innerHTML]="news.title.rendered"></span>
         </a>
       </ion-col>
     </ion-row>
@@ -67,7 +69,11 @@
       <ion-col class="ion-align-self-center">เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
     </ion-row>
   </ion-grid>
-
+  <div *ngIf="ytalldata">
+    <div *ngFor="let ytdata of ytalldata['items']">
+      <span>{{ytdata.snippet.title}}</span>
+    </div>
+  </div>
   <ion-grid>
     <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
   </ion-grid>

src/app/home/home.page.ts

@@ -1,8 +1,8 @@
 import { AfterContentChecked, Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import {SwiperComponent} from 'swiper/angular';
+import { SwiperComponent } from 'swiper/angular';
 import { SwiperOptions } from 'swiper';
-import SwiperCore, { Pagination,Autoplay,Navigation,Keyboard } from 'swiper';
-import { WpdataService} from '../services/wpdata.service';
+import SwiperCore, { Pagination, Autoplay, Navigation, Keyboard } from 'swiper';
+import { WpdataService } from '../services/wpdata.service';
 
 SwiperCore.use([Pagination, Autoplay, Navigation, Keyboard]);
 @Component({
@@ -14,11 +14,12 @@ SwiperCore.use([Pagination, Autoplay, Navigation, Keyboard]);
 export class HomePage implements AfterContentChecked {
 
   newsdata: any = [];
-  
+  ytalldata: any;
+
   @ViewChild('swiper') swiper: SwiperComponent;
 
   config: SwiperOptions = {
-    slidesPerView: 1,  
+    slidesPerView: 1,
     pagination: { clickable: true },
     autoplay: {
       delay: 200,
@@ -28,20 +29,26 @@ export class HomePage implements AfterContentChecked {
     navigation: true,
   }
 
-  constructor( private wpgetdataService : WpdataService) {}
+  constructor(private wpgetdataService: WpdataService) { }
 
   ngAfterContentChecked() {
     if (this.swiper) {
       this.swiper.updateSwiper({});
-    }    
+    }
   }
 
   ionViewWillEnter() {
     this.wpgetdataService.getAllNews().subscribe((data) => {
       this.newsdata = data;
-      console.log('load Lineup Data');
+      console.log('load News Data');
       console.log(this.newsdata);
-      });
+    });
+
+    this.wpgetdataService.getAllYoutube().subscribe((data) => {
+      this.ytalldata = data;
+      console.log('load YouTube');
+      console.log(this.ytalldata);
+    });
   }
 
 }

src/app/services/wpdata.service.ts

@@ -9,7 +9,7 @@ import { Storage } from '@ionic/storage-angular';
 })
 export class WpdataService {
 
-  constructor(private http:HttpClient) { }
+  constructor(private http: HttpClient) { }
 
   // getAllNews() {
   //   return this.http.get(
@@ -18,13 +18,20 @@ export class WpdataService {
   // }
   getAllNews() {
     return this.http.get(
-      "https://dev-web-fm99.mcot.net/wp-json/wp/v2/news?_embed"
+      "https://fm99activeradio.mcot.net/wp-json/wp/v2/news?_embed"
     );
   }
 
   getNewsDetail(id) {
-    let url = 'https://dev-web-fm99.mcot.net/'
+    let url = 'https://fm99activeradio.mcot.net/'
     const route = url + 'wp-json/wp/v2/' + 'news/' + id + '?_embed';
     return this.http.get(route);
   }
+
+  getAllYoutube() {
+    return this.http.get(
+      "../assets/api/youtube-data.json"
+      // https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCfZdHbI3pIN4uselPFzzbOg&maxResults=5&order=date&key=AIzaSyDsRrS_dUxT_3PFaMZIBBdrbl37p_fqrNY
+    );
+  }
 }

src/assets/api/youtube-data.json

@@ -0,0 +1,182 @@
+{
+  "kind": "youtube#searchListResponse",
+  "etag": "Epvia07TkaHlHcZzjhjK3NZbv-4",
+  "nextPageToken": "CAUQAA",
+  "regionCode": "TH",
+  "pageInfo": {
+    "totalResults": 13399,
+    "resultsPerPage": 5
+  },
+  "items": [
+    {
+      "kind": "youtube#searchResult",
+      "etag": "0Y_VBBo_UMU0M0-e1KA-qJCopgg",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "JXM0627moMU"
+      },
+      "snippet": {
+        "publishedAt": "2022-11-01T07:06:50Z",
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
+        "title": "Color Of Life [01-11-2022 I 14:00 - 15:00 น. ]",
+        "description": "Color Of Life [01-11-2022 I 14:00 - 15:00 น. ] ดำเนินรายการโดย สมเกียรติ คุณานิธิพงศ์ และแม่ช้อยนางรำ สันติ เศวตวิมล ฟังออนไลน์ได้ที่ ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/JXM0627moMU/default_live.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/JXM0627moMU/mqdefault_live.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/JXM0627moMU/hqdefault_live.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "FM99 ActiveRadio",
+        "liveBroadcastContent": "live",
+        "publishTime": "2022-11-01T07:06:50Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "SGCS0buUo10TEELuyTbUOKVY7Xk",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "poDF-Bo9vZM"
+      },
+      "snippet": {
+        "publishedAt": "2022-11-01T07:03:56Z",
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
+        "title": "Motor Intrend  [01-11-2022 l 13:00 - 14:00 น. ]",
+        "description": "Motor Intrend [01-11-2022 l 13:00 - 14:00 น. ] ดำเนินรายการโดย เฮียก่ำ สมบูรณ์ และเฮียณัฐ เสตะจันทร์ www.fm99activeradio.com ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/poDF-Bo9vZM/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/poDF-Bo9vZM/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/poDF-Bo9vZM/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "FM99 ActiveRadio",
+        "liveBroadcastContent": "none",
+        "publishTime": "2022-11-01T07:03:56Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "nN6VLHMJhxlIBQuBEIcR6Ct9wxs",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "Znw4acOwB9E"
+      },
+      "snippet": {
+        "publishedAt": "2022-11-01T06:02:47Z",
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
+        "title": "เกาะกระแสกีฬาไทย  [01-11-2022 l 12:30 - 13:00 น.]",
+        "description": "เกาะกระแสกีฬาไทย [01-11-2022 l 12:30 - 13:00 น.] ดำเนินรายการโดย เจ๋ง ทรงศักดิ์ www.fm99activeradio.com ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/Znw4acOwB9E/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/Znw4acOwB9E/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/Znw4acOwB9E/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "FM99 ActiveRadio",
+        "liveBroadcastContent": "none",
+        "publishTime": "2022-11-01T06:02:47Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "yOpIXnqHzU92tD1PpDzKDgL8D0s",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "Yo7xp1OEbHU"
+      },
+      "snippet": {
+        "publishedAt": "2022-11-01T05:05:30Z",
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
+        "title": "MSM Action [01-11-2022 I 11:00 - 12:00 น.]",
+        "description": "MSM Action [01-11-2022 I 11:00 - 12:00 น.] ดำเนินรายการโดย เปอ นพฤทธิ์ เก่ง มนต์ชัยและจีน viewfinder ฟังออนไลน์ได้ที่ ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/Yo7xp1OEbHU/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/Yo7xp1OEbHU/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/Yo7xp1OEbHU/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "FM99 ActiveRadio",
+        "liveBroadcastContent": "none",
+        "publishTime": "2022-11-01T05:05:30Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "rg3juQB2wGg76UkOvxrG078ueN4",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "7vCjUyqoI2Q"
+      },
+      "snippet": {
+        "publishedAt": "2022-11-01T04:03:58Z",
+        "channelId": "UCfZdHbI3pIN4uselPFzzbOg",
+        "title": "Active Entertain   [01-11-2022 l 09:00 - 10:00 น.]",
+        "description": "Active Entertain [01-11-2022 l 09:00 - 10:00 น.] ดำเนินรายการโดย พัตโตะและกีรติ ฟังออนไลน์ได้ที่ www.fm99activeradio.com ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/7vCjUyqoI2Q/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/7vCjUyqoI2Q/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/7vCjUyqoI2Q/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "FM99 ActiveRadio",
+        "liveBroadcastContent": "none",
+        "publishTime": "2022-11-01T04:03:58Z"
+      }
+    }
+  ]
+}

src/assets/icon/menu-alt-left-svgrepo-com.svg

@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 11h12v2H4zm0-5h16v2H4zm0 12h7.235v-2H4z"/></svg>

src/assets/icon/menu-svgrepo-com.svg

@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="-5 -7 24 24" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin" class="jam jam-menu"><path d='M1 0h5a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zm7 8h5a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2zM1 4h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z' /></svg>

src/global.scss

@@ -79,6 +79,11 @@
 }
 
 
+// ion-menu-button {
+//   --background: rgb(221, 221, 222);
+//   --color: darkorange;
+// }
+
 ion-content {
   // --ion-background-color: #111D12;
   --background: url('./assets/img-static/bg-content-min.jpg') no-repeat 
@@ -110,7 +115,7 @@ h3 {
 }
 
 .head-img {
-  width: 15%;
+  width: 18%;
   display: flex;
   margin-left: 10px;
   margin-top: 5px;