Connect youtube account

assets/js/youtube.js

@@ -0,0 +1,123 @@
+import axios from "axios";
+
+const fetchPlayLists = async (access_token, params) => {
+  return await axios
+    .get(`https://www.googleapis.com/youtube/v3/playlists`, {
+      headers: { Authorization: access_token },
+      params,
+    })
+    .then((data) => data.data.items);
+};
+
+export const fetchPlayListItems = async (access_token, params) => {
+  return await axios
+    .get(`https://www.googleapis.com/youtube/v3/playlistItems`, {
+      headers: { Authorization: access_token },
+      params,
+    })
+    .then((data) => data.data.items);
+};
+
+export const fetchMyLists = async (access_token) => {
+  if (!access_token) return null;
+  const myPlaylists = await fetchPlayLists(access_token, {
+    part: "id,snippet,status",
+    mine: true,
+    maxResults: 50,
+  });
+
+  let playlists = [];
+  for (let mylist of myPlaylists) {
+    const list = await fetchPlayListItems(access_token, {
+      part: "id,snippet,contentDetails,status",
+      playlistId: mylist.id,
+      maxResults: 20,
+    });
+
+    if (list.some((item) => item.snippet.videoOwnerChannelTitle === "TogoTV")) {
+      let items = [];
+      for (let item of list) {
+        const res = await fetch(
+          `https://togotv-api.dbcls.jp/api/date/${item.contentDetails.videoId}`
+        );
+        const { uploadDate } = await res.json();
+        await items.push({
+          id: item.id,
+          youtubeVideoId: item?.contentDetails?.videoId,
+          thumbnail: item?.snippet?.thumbnails?.high?.url,
+          title: item?.snippet?.title,
+          description: item?.snippet?.description,
+          duration: 0,
+          courseId: item?.id,
+          uploadDate,
+          has_aside: false,
+        });
+      }
+      await playlists.push({ info: mylist, items });
+    }
+  }
+  return await playlists;
+};
+
+export const fetchMyList = async (access_token, playlist_id) => {
+  return await fetchPlayLists(access_token, {
+    part: "id,snippet",
+    id: playlist_id,
+    maxResults: 50,
+  });
+};
+
+export const addVideoToPlaylist = async (
+  access_token,
+  playlist_id,
+  resource_id
+) => {
+  await axios({
+    method: "post",
+    url:
+      "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&alt=json",
+    headers: { Authorization: access_token },
+    data: {
+      snippet: {
+        playlistId: playlist_id,
+        resourceId: {
+          videoId: resource_id,
+          kind: "youtube#video",
+        },
+      },
+    },
+  });
+};
+
+export const removeVideoFromPlaylist = async (access_token, video_id) => {
+  await axios.delete(`https://www.googleapis.com/youtube/v3/playlistItems`, {
+    headers: { Authorization: access_token },
+    params: {
+      id: video_id,
+    },
+  });
+};
+
+export const createPlaylist = async (
+  access_token,
+  title,
+  description,
+  privacy_status,
+  video_id
+) => {
+  const new_list = await axios({
+    method: "post",
+    url: `https://www.googleapis.com/youtube/v3/playlists?part=snippet&part=status&alt=json`,
+    headers: { Authorization: access_token },
+    data: {
+      snippet: {
+        title,
+        description,
+      },
+      status: {
+        privacyStatus: privacy_status,
+      },
+    },
+  });
+  await addVideoToPlaylist(access_token, new_list.data.id, video_id);
+};

assets/sass/mixin.sass

@@ -13,7 +13,7 @@ $LAYER_4: 4
 $LAYER_MODAL_BACK: 15
 $LAYER_MODAL: 16
 $LAYER_UNDER_HEADER: 10
-$LAYER_HEADER: 20
+$LAYER_HEADER: 25
 
 /* RESPONSIVE */
 $VIEW_PADDING: 80px
@@ -345,4 +345,16 @@ $VIEW_PADDING_SP: 20px
   font-weight: 600
   padding: 0 4px
   box-sizing: border-box
-  font-family: montserrat, sans-serif
+  font-family: montserrat, sans-serif
+
+@mixin public-status
+  font-size: 14px
+  &.public
+    &:before
+      +icon('public')
+  &.unlisted
+    &:before
+      +icon('unlisted')
+  &.private
+    &:before
+      +icon('private')