Fetch videos from a YouTube Channel

meteor/app/private/Private.js

@@ -1,15 +1,27 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { RoutePaths } from '../general/RoutePaths';
 
 export const Private = () => {
   const navigate = useNavigate();
+  const [videos, setVideos] = useState([]);
 
   const goHome = () => {
     navigate(RoutePaths.HOME);
   };
 
+  const listVideosFromChannel = () => {
+    Meteor.call('youtube.listVideosFromChannel', { channelId: 'UCpEyIZJ6SAbsLwyfF9BTSiA' }, (err, res) => {
+      setVideos(res);
+      console.log(res)
+    });
+  }
+
+  useEffect(() => {
+    listVideosFromChannel();
+  }, []);
+
   return (
     <div className="flex flex-grow flex-col items-center">
       <h2 className="mt-48 text-3xl font-extrabold tracking-tight text-gray-900 md:text-4xl">
@@ -23,6 +35,22 @@ export const Private = () => {
           </a>
         </div>
       </h2>
+
+      {videos.map((video) => (
+        <div key={video.videoId} className="mt-5">
+          <a
+            href={video.link}
+            target="_blank"
+            rel="noreferrer"
+            className="text-base font-medium text-indigo-700 hover:text-indigo-600"
+          >
+            {video.title}
+          </a>
+          <p>{video.description}</p>
+          <img src={video.thumbnails.default.url} alt={video.title} />
+          <p>{video.likeStatus.isLiked ? 'Liked' : video.likeStatus.isUnliked ? 'Unliked' : '-'}</p>
+        </div>
+      ))}
     </div>
   );
 };

meteor/app/youtube/youtubeMethods.js

@@ -0,0 +1,77 @@
+import { Meteor } from 'meteor/meteor';
+
+const { google } = require('googleapis');
+const OAuth2 = google.auth.OAuth2;
+
+async function getGoogleAPI({ userId }) {
+  const user = await Meteor.users.findOneAsync(userId);
+
+  const oauth2Client = new OAuth2(
+    Meteor.settings.google.clientId,
+    Meteor.settings.google.secret,
+    Meteor.settings.public.appUrl
+  );
+  const accessToken = user.services.google.accessToken;
+  oauth2Client.setCredentials({
+    access_token: accessToken,
+  });
+  return google.youtube({
+    version: 'v3',
+    auth: oauth2Client,
+  });
+}
+const getLikeStatus = async ({ googleAPI, videoId }) => {
+  try {
+    const videoLikes = await googleAPI.videos.getRating({
+      id: videoId,
+      // onBehalfOfContentOwner: userId // Replace with user's ID
+    });
+    const rating = videoLikes.data.items[0].rating;
+
+    if (rating === 'none') {
+      return {};
+    }
+    return { isLiked: rating === 'like', isUnliked: rating === 'dislike' };
+  } catch (e) {
+    console.error(`getLikeStatus error`, e);
+    return null;
+  }
+};
+
+const listVideosFromChannel = async function ({ channelId }) {
+  const { userId } = this;
+  if (!userId) {
+    throw new Meteor.Error('not-authorized');
+  }
+  const googleAPI = await getGoogleAPI({ userId });
+  const { data } = await googleAPI.search.list({
+    part: 'snippet',
+    channelId,
+    maxResults: 10,
+  });
+
+  const videos = data.items
+    .filter((item) => !!item.id.videoId)
+    .map(
+      ({ id: { videoId }, snippet: { title, description, thumbnails } }) => ({
+        link: `https://www.youtube.com/watch?v=${videoId}`,
+        videoId,
+        title,
+        description,
+        thumbnails,
+      })
+    );
+  const videosToReturn = await Promise.allSettled(
+    videos.map(async (video) => {
+      video.likeStatus = await getLikeStatus({
+        googleAPI,
+        videoId: video.videoId,
+      });
+      return video;
+    })
+  );
+  return videosToReturn.map((video) => video.value);
+};
+Meteor.methods({
+  'youtube.listVideosFromChannel': listVideosFromChannel,
+});

meteor/private/env/dev/settings.json

@@ -1,5 +1,6 @@
 {
   "public": {
+    "appUrl": "http://localhost:3000",
     "appInfo": {
       "name": "Meteor Template by quave"
     }

meteor/server/main.js

@@ -3,6 +3,8 @@ import { Accounts } from 'meteor/accounts-base';
 
 import '../app/youtube/youtubeSetup';
 
+import '../app/youtube/youtubeMethods';
+
 import '../app/clicks/clicksMethods';
 import '../app/clicks/clicksPublishes';