├── .nowignore
├── public
    ├── robots.txt
    ├── favicons
    │   ├── favicon.ico
    │   ├── favicon-16.png
    │   ├── favicon-32.png
    │   ├── favicon-57.png
    │   ├── favicon-60.png
    │   ├── favicon-64.png
    │   ├── favicon-70.png
    │   ├── favicon-72.png
    │   ├── favicon-76.png
    │   ├── favicon-96.png
    │   ├── favicon-114.png
    │   ├── favicon-120.png
    │   ├── favicon-144.png
    │   ├── favicon-150.png
    │   ├── favicon-152.png
    │   ├── favicon-160.png
    │   ├── favicon-180.png
    │   ├── favicon-192.png
    │   ├── favicon-310.png
    │   └── browserconfig.xml
    └── index.html
├── ytplcalc.png
├── src
    ├── assets
    │   ├── logo.png
    │   └── not-found.png
    ├── plugins
    │   └── bootstrap-vue.js
    ├── main.js
    ├── App.vue
    ├── api
    │   └── index.js
    └── components
    │   └── Home.vue
├── babel.config.js
├── vercel.svg
├── .gitignore
├── vue.svg
├── README.md
└── package.json


/.nowignore:
--------------------------------------------------------------------------------
1 | README.md
2 | yarn.lock


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: * Disallow: 


--------------------------------------------------------------------------------
/ytplcalc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/ytplcalc.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/not-found.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/src/assets/not-found.png


--------------------------------------------------------------------------------
/public/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon.ico


--------------------------------------------------------------------------------
/public/favicons/favicon-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-16.png


--------------------------------------------------------------------------------
/public/favicons/favicon-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-32.png


--------------------------------------------------------------------------------
/public/favicons/favicon-57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-57.png


--------------------------------------------------------------------------------
/public/favicons/favicon-60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-60.png


--------------------------------------------------------------------------------
/public/favicons/favicon-64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-64.png


--------------------------------------------------------------------------------
/public/favicons/favicon-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-70.png


--------------------------------------------------------------------------------
/public/favicons/favicon-72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-72.png


--------------------------------------------------------------------------------
/public/favicons/favicon-76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-76.png


--------------------------------------------------------------------------------
/public/favicons/favicon-96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-96.png


--------------------------------------------------------------------------------
/public/favicons/favicon-114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-114.png


--------------------------------------------------------------------------------
/public/favicons/favicon-120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-120.png


--------------------------------------------------------------------------------
/public/favicons/favicon-144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-144.png


--------------------------------------------------------------------------------
/public/favicons/favicon-150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-150.png


--------------------------------------------------------------------------------
/public/favicons/favicon-152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-152.png


--------------------------------------------------------------------------------
/public/favicons/favicon-160.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-160.png


--------------------------------------------------------------------------------
/public/favicons/favicon-180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-180.png


--------------------------------------------------------------------------------
/public/favicons/favicon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-192.png


--------------------------------------------------------------------------------
/public/favicons/favicon-310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srijans38/youtube-playlist-calculator/HEAD/public/favicons/favicon-310.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "presets": [
 3 |     [
 4 |       "@vue/app",
 5 |       {
 6 |         "useBuiltIns": "entry"
 7 |       }
 8 |     ]
 9 |   ]
10 | }


--------------------------------------------------------------------------------
/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="48" height="48" viewBox="0 0 116 100" fill="#000" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M57.5 0L115 100H0L57.5 0z"/></svg>


--------------------------------------------------------------------------------
/src/plugins/bootstrap-vue.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | import BootstrapVue from 'bootstrap-vue'
4 | import 'bootstrap/dist/css/bootstrap.min.css'
5 | import 'bootstrap-vue/dist/bootstrap-vue.css'
6 | 
7 | Vue.use(BootstrapVue)
8 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import '@babel/polyfill'
 2 | import 'mutationobserver-shim'
 3 | import Vue from 'vue'
 4 | import './plugins/bootstrap-vue'
 5 | import App from './App.vue'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   render: h => h(App),
11 | }).$mount('#app')
12 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Home />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Home from "./components/Home.vue";
 9 | 
10 | export default {
11 |   name: "app",
12 |   components: {
13 |     Home
14 |   }
15 | };
16 | </script>
17 | 
18 | <style>
19 | </style>
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | .env
 9 | .env.build
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/vue.svg:
--------------------------------------------------------------------------------
1 | <svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M29.54 3L24 12.7 18.456 3H-.001l24 42L47.998 3H29.54z" fill="#41B883"/><path d="M29.54 3L24 12.7 18.456 3H9.599l14.4 25.2L38.398 3H29.54z" fill="#34495E"/></g><defs><clipPath id="clip0"><path fill="#fff" transform="translate(0 3)" d="M0 0H48V42H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/public/favicons/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |   <msapplication>
 4 |     <tile>
 5 |       <square70x70logo src="/favicon-70.png"/>
 6 |       <square150x150logo src="/favicon-150.png"/>
 7 |       <square310x310logo src="/favicon-310.png"/>
 8 |       <TileColor>#FFFFFF</TileColor>
 9 |     </tile>
10 |   </msapplication>
11 | </browserconfig>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Logo](ytplcalc.png)
 2 | 
 3 | ## Usage
 4 | 
 5 | Calculates the total duration of a given YouTube playlist.
 6 | Just paste a URL with the `list` query parameter and hit Go.
 7 | 
 8 | _Live at: https://youtube-playlist-calculator.now.sh_
 9 | 
10 | ## Created with 
11 | 
12 | ![Vue.js](vue.svg) ![Vercel](vercel.svg)
13 | 
14 | [Vue.js](https://vuejs.org/) and [Vercel](https://vercel.com/)


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "dev": "vue-cli-service serve --port $PORT"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^0.19.2",
13 |     "bootstrap-vue": "^2.1.0",
14 |     "core-js": "^2.6.5",
15 |     "humanize-duration": "^3.22.0",
16 |     "iso8601-duration": "^1.2.0",
17 |     "moment": "^2.25.0",
18 |     "vue": "^2.6.10"
19 |   },
20 |   "devDependencies": {
21 |     "@babel/polyfill": "^7.7.0",
22 |     "@vue/cli-plugin-babel": "^3.9.0",
23 |     "@vue/cli-plugin-eslint": "^3.9.0",
24 |     "@vue/cli-service": "^3.9.0",
25 |     "babel-eslint": "^10.0.1",
26 |     "bootstrap": "^4.3.1",
27 |     "eslint": "^5.16.0",
28 |     "eslint-plugin-vue": "^5.0.0",
29 |     "mutationobserver-shim": "^0.3.3",
30 |     "popper.js": "^1.16.0",
31 |     "portal-vue": "^2.1.6",
32 |     "sass": "^1.19.0",
33 |     "sass-loader": "^8.0.0",
34 |     "vue-cli-plugin-bootstrap-vue": "~0.6.0",
35 |     "vue-template-compiler": "^2.6.10"
36 |   },
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/essential",
44 |       "eslint:recommended"
45 |     ],
46 |     "rules": {
47 |       "no-console": "off"
48 |     },
49 |     "parserOptions": {
50 |       "parser": "babel-eslint"
51 |     }
52 |   },
53 |   "postcss": {
54 |     "plugins": {
55 |       "autoprefixer": {}
56 |     }
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions"
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import moment from 'moment';
 3 | 
 4 | var key = process.env.VUE_APP_GOOGLE;
 5 | 
 6 | export const getPlaylistDataAPI = async (listId, nextPageToken) => {
 7 |     try {
 8 |         var url = `https://www.googleapis.com/youtube/v3/playlistItems?playlistId=${listId}&part=snippet&key=${key}&fields=nextPageToken,items(snippet(publishedAt,title,description,thumbnails(medium),position,resourceId(videoId)))&maxResults=50&pageToken=${nextPageToken}`
 9 |         const response = await axios.get(url);
10 |         return response;
11 |     } catch (error) {
12 |         console.error(error);
13 |     }
14 | }
15 | 
16 | export const getPlaylistInfoAPI = async (listId) => {
17 |     try {
18 |         var url = `https://www.googleapis.com/youtube/v3/playlists?id=${listId}&part=snippet&key=${key}&fields=items(snippet(title,description))`
19 |         const response = await axios.get(url);
20 |         const { data : { items : [ { snippet } ] }   } = response;
21 |         return snippet;
22 |     } catch (error) {
23 |         console.log(error);
24 |     }
25 | }
26 | 
27 | export const getVideoDurationAPI = async (videosIds) => {
28 |     let durations = {};
29 |     try {
30 |         for(var chunk of videosIds) {
31 |             var url = `https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=${chunk.join()}&maxResults=50&fields=items(id,contentDetails(duration))&key=${key}`        
32 |             const response = await axios.get(url);
33 |             var { items } = response.data;
34 |             items.map((item) => {
35 |                 var { id, contentDetails: { duration }} = item;
36 |                 durations[id] = moment.duration(duration).asSeconds();
37 |             });
38 |         }
39 |         return durations;
40 |     } catch (error) {
41 |         console.error(error)       
42 |     }
43 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  7 |     <meta
  8 |       name="google-site-verification"
  9 |       content="6x6rywXdo17Lu7nw_I14_bJbHuW7BgXLQjP47cmBY-E"
 10 |     />
 11 |     <meta name="google-site-verification" content="hdm_7zqKvDfYhdditpqfnfZJfGqOq2DbOwI8YrCV41w" />
 12 |     <link rel="shortcut icon" href="<%= BASE_URL %>favicons/favicon.ico" />
 13 |     <link
 14 |       rel="icon"
 15 |       sizes="16x16 32x32 64x64"
 16 |       href="<%= BASE_URL %>favicons/favicon.ico"
 17 |     />
 18 |     <link
 19 |       rel="icon"
 20 |       type="image/png"
 21 |       sizes="196x196"
 22 |       href="<%= BASE_URL %>favicons/favicon-192.png"
 23 |     />
 24 |     <link
 25 |       rel="icon"
 26 |       type="image/png"
 27 |       sizes="160x160"
 28 |       href="<%= BASE_URL %>favicons/favicon-160.png"
 29 |     />
 30 |     <link
 31 |       rel="icon"
 32 |       type="image/png"
 33 |       sizes="96x96"
 34 |       href="<%= BASE_URL %>favicons/favicon-96.png"
 35 |     />
 36 |     <link
 37 |       rel="icon"
 38 |       type="image/png"
 39 |       sizes="64x64"
 40 |       href="<%= BASE_URL %>favicons/favicon-64.png"
 41 |     />
 42 |     <link
 43 |       rel="icon"
 44 |       type="image/png"
 45 |       sizes="32x32"
 46 |       href="<%= BASE_URL %>favicons/favicon-32.png"
 47 |     />
 48 |     <link
 49 |       rel="icon"
 50 |       type="image/png"
 51 |       sizes="16x16"
 52 |       href="<%= BASE_URL %>favicons/favicon-16.png"
 53 |     />
 54 |     <link
 55 |       rel="apple-touch-icon"
 56 |       href="<%= BASE_URL %>favicons/favicon-57.png"
 57 |     />
 58 |     <link
 59 |       rel="apple-touch-icon"
 60 |       sizes="114x114"
 61 |       href="<%= BASE_URL %>favicons/favicon-114.png"
 62 |     />
 63 |     <link
 64 |       rel="apple-touch-icon"
 65 |       sizes="72x72"
 66 |       href="<%= BASE_URL %>favicons/favicon-72.png"
 67 |     />
 68 |     <link
 69 |       rel="apple-touch-icon"
 70 |       sizes="144x144"
 71 |       href="<%= BASE_URL %>favicons/favicon-144.png"
 72 |     />
 73 |     <link
 74 |       rel="apple-touch-icon"
 75 |       sizes="60x60"
 76 |       href="<%= BASE_URL %>favicons/favicon-60.png"
 77 |     />
 78 |     <link
 79 |       rel="apple-touch-icon"
 80 |       sizes="120x120"
 81 |       href="<%= BASE_URL %>favicons/favicon-120.png"
 82 |     />
 83 |     <link
 84 |       rel="apple-touch-icon"
 85 |       sizes="76x76"
 86 |       href="<%= BASE_URL %>favicons/favicon-76.png"
 87 |     />
 88 |     <link
 89 |       rel="apple-touch-icon"
 90 |       sizes="152x152"
 91 |       href="<%= BASE_URL %>favicons/favicon-152.png"
 92 |     />
 93 |     <link
 94 |       rel="apple-touch-icon"
 95 |       sizes="180x180"
 96 |       href="<%= BASE_URL %>favicons/favicon-180.png"
 97 |     />
 98 |     <meta name="msapplication-TileColor" content="#FFFFFF" />
 99 |     <meta
100 |       name="msapplication-TileImage"
101 |       content="<%= BASE_URL %>favicons/favicon-144.png"
102 |     />
103 |     <meta
104 |       name="msapplication-config"
105 |       content="<%= BASE_URL %>favicons/browserconfig.xml"
106 |     />
107 |     <meta name="theme-color" content="#c4302b" />
108 |     <meta
109 |       name="description"
110 |       content="Calculate the total duration of a YouTube Playlist."
111 |     />
112 |     <meta property="og:title" content="Youtube Playlist Calculator" />
113 |     <meta property="og:type" content="website" />
114 |     <meta property="og:site_name" content="Youtube Playlist Calculator" />
115 |     <meta
116 |       property="og:url"
117 |       content="https://youtube-playlist-calculator.now.sh"
118 |     />
119 |     <meta
120 |       property="og:description"
121 |       content="Calculate the total duration of a YouTube Playlist."
122 |     />
123 |     <meta
124 |       property="og:image:secure_url"
125 |       itemprop="image"
126 |       content="https://youtube-playlist-calculator.now.sh/favicons/favicon-310.png"
127 |     />
128 |     <meta
129 |       property="og:image"
130 |       itemprop="image"
131 |       content="http://youtube-playlist-calculator.now.sh/favicons/favicon-310.png"
132 |     />
133 |     <link rel="canonical" href="https://ypc.now.sh" />
134 |     <title>Youtube Playlist Calculator</title>
135 |     <script
136 |       async
137 |       src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2239556357055867"
138 |       crossorigin="anonymous"
139 |     ></script>
140 |   </head>
141 |   <body>
142 |     <noscript>
143 |       <strong
144 |         >We're sorry but vue doesn't work properly without JavaScript enabled.
145 |         Please enable it to continue.</strong
146 |       >
147 |     </noscript>
148 |     <div id="app"></div>
149 |     <!-- built files will be auto injected -->
150 |   </body>
151 | </html>
152 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <b-container>
  3 |     <b-row align-h="center" align-content="center">
  4 |       <b-col>
  5 |         <b-row align-v="center">
  6 |           <b-col sm="2" lg="1" class="d-none d-sm-block">
  7 |             <b-img src="@/assets/logo.png" alt="logo" fluid></b-img>
  8 |           </b-col>
  9 |           <b-col>
 10 |             <h3 class="my-5 text-center">Youtube Playlist Calculator</h3>
 11 |           </b-col>
 12 |         </b-row>
 13 |         <hr />
 14 |         <b-input-group prepend="URL" class="my-5">
 15 |           <b-form-input
 16 |             aria-label="Playlist URL"
 17 |             id="playlist-url"
 18 |             v-model="playlistUrl"
 19 |             placeholder="https://www.youtube.com/playlist?list=PL6rBC_87VKs76V9Vc0s44Gg_Q6qObZrFY"
 20 |           ></b-form-input>
 21 | 
 22 |           <b-input-group-append>
 23 |             <b-button
 24 |               :disabled="playlistId === undefined"
 25 |               @click="goCalc"
 26 |               variant="outline-danger"
 27 |             >Go</b-button>
 28 |           </b-input-group-append>
 29 |         </b-input-group>
 30 |       </b-col>
 31 |     </b-row>
 32 |     <hr />
 33 |     <transition-group name="fade" appear mode="in-out" @before-leave="beforeLeave">
 34 |       <b-row v-if="totalDuration.seconds != 0" key="duration">
 35 |         <b-col>
 36 |           <b-card header="Total Playlist Duration" class="text-center mb-3">
 37 |             <b-card-text>{{ totalDuration.string }}</b-card-text>
 38 |           </b-card>
 39 |           <hr />
 40 |         </b-col>
 41 |       </b-row>
 42 |       <b-row v-else-if="loading" class="text-center" key="loading">
 43 |         <b-col>
 44 |           <b-spinner variant="danger" type="grow" label="Loading"></b-spinner>
 45 |           <hr />
 46 |         </b-col>
 47 |       </b-row>
 48 |       <b-row v-else class="text-center" key="info">
 49 |         <b-col>
 50 |           <div class="alert alert-success" role="alert">
 51 |             <h4 class="alert-heading mb-4">Hey!</h4>
 52 |             <p>This app helps you to calculate the total duration of a YouTube playlist.</p>
 53 |             <p>Just paste the URL above and hit Go.</p>
 54 |             <hr />
 55 |             <b-row align-v="center">
 56 |               <b-col cols="1">
 57 |                 <a href="http://github.com/srijans38/youtube-playlist-calculator" class="text-dark">
 58 |                   Source
 59 |                 </a>
 60 |               </b-col>
 61 |               <b-col>
 62 |                 <p class="mb-0 mr-3 text-right">
 63 |                   Made by
 64 |                   <a href="http://github.com/srijans38" class="text-dark">Srijan Sharma</a>.
 65 |                 </p>
 66 |               </b-col>
 67 |             </b-row>
 68 |           </div>
 69 |           <hr />
 70 |         </b-col>
 71 |       </b-row>
 72 |     </transition-group>
 73 |     <transition name="list">
 74 |       <b-row v-if="playlistTitle.length > 0" class="text-center">
 75 |         <b-col class="text-center" sm="12">
 76 |           <h3 class="my-4">{{ playlistTitle }}</h3>
 77 |           <p class="text-truncate mx-5">{{ playlistDesc }}</p>
 78 |         </b-col>
 79 |       </b-row>
 80 |     </transition>
 81 |     <transition-group name="list" tag="div" class="row mb-5">
 82 |       <b-col
 83 |         class="text-center"
 84 |         sm="12"
 85 |         md="6"
 86 |         lg="4"
 87 |         v-for="item in playlistItems"
 88 |         :key="item.position"
 89 |       >
 90 |         <b-card
 91 |           :img-src="item.thumbUrl"
 92 |           img-alt="Image"
 93 |           img-top
 94 |           tag="article"
 95 |           style
 96 |           class="mt-5 mx-2"
 97 |         >
 98 |           <b-card-title class="text-truncate">{{item.position+1 + '. ' + item.title }}</b-card-title>
 99 |           <b-card-sub-title>{{ humanizeDuration(durations[item.videoId]) }}</b-card-sub-title>
100 |           <b-card-text class="text-truncate">{{ item.description }}</b-card-text>
101 | 
102 |           <b-button
103 |             :href="'https://youtube.com/watch?v='+ item.videoId"
104 |             variant="primary"
105 |           >Watch Video</b-button>
106 |         </b-card>
107 |       </b-col>
108 |     </transition-group>
109 |   </b-container>
110 | </template>
111 | 
112 | <script>
113 | import {
114 |   getPlaylistDataAPI,
115 |   getVideoDurationAPI,
116 |   getPlaylistInfoAPI
117 | } from "@/api";
118 | import humanizeDuration from "humanize-duration";
119 | 
120 | export default {
121 |   name: "Home",
122 |   data() {
123 |     return {
124 |       playlistTitle: "",
125 |       playlistDesc: "",
126 |       playlistItems: [],
127 |       videoIds: [],
128 |       chunkedVideoIds: [],
129 |       durations: {},
130 |       playlistUrl: "",
131 |       nextPageToken: "",
132 |       loading: false
133 |     };
134 |   },
135 |   computed: {
136 |     playlistId() {
137 |       var { list } = this.parseURL(this.playlistUrl);
138 |       return list;
139 |     },
140 |     notFoundImg() {
141 |       return require("@/assets/not-found.png");
142 |     },
143 |     totalDuration() {
144 |       var seconds = Object.values(this.durations).reduce((a, b) => a + b, 0);
145 |       var string = "";
146 |       if (seconds) {
147 |         var date = new Date(0);
148 |         date.setSeconds(seconds);
149 |         string = humanizeDuration(seconds * 1000);
150 |       }
151 |       return {
152 |         seconds,
153 |         string
154 |       };
155 |     }
156 |   },
157 |   methods: {
158 |     humanizeDuration(duration) {
159 |       return humanizeDuration(duration * 1000);
160 |     },
161 |     async getVideoDuration() {
162 |       //Get video resource from the API
163 | 
164 |       //Chunking the videoIds array; TODO : could be done in one step
165 |       this.getChunkedVideoIds();
166 | 
167 |       var results = await getVideoDurationAPI(this.chunkedVideoIds);
168 | 
169 |       //Setting durations and hiding loading anim
170 |       this.durations = Object.assign({}, this.durations, results);
171 |       this.loading = false;
172 |     },
173 |     async getPlaylistData() {
174 |       //Get playlistItems resource from the API
175 | 
176 |       //Destructuring needed resources from the response
177 |       const {
178 |         data: { nextPageToken, items }
179 |       } = await getPlaylistDataAPI(this.playlistId, this.nextPageToken);
180 |       items.map(item => {
181 |         const {
182 |           snippet: {
183 |             description,
184 |             position,
185 |             publishedAt,
186 |             resourceId: { videoId },
187 |             thumbnails,
188 |             title
189 |           }
190 |         } = item;
191 | 
192 |         //handling if a thumbnail is not returned in case of a private video
193 |         var url;
194 |         if (!thumbnails.medium) {
195 |           url = this.notFoundImg;
196 |         } else {
197 |           url = thumbnails.medium.url;
198 |         }
199 | 
200 |         //setting state for playlists and videoIds
201 |         this.playlistItems.push({
202 |           description,
203 |           position,
204 |           publishedAt,
205 |           videoId,
206 |           thumbUrl: url,
207 |           title
208 |         });
209 |         this.videoIds.push(videoId);
210 |       });
211 | 
212 |       //setting nextPageToken for pagination
213 |       this.nextPageToken = nextPageToken;
214 |     },
215 |     getChunkedVideoIds() {
216 |       //Dividing the videoIds array into chunks of 50 each for API limit
217 |       var results = [];
218 |       var arr = this.videoIds;
219 |       while (arr.length) {
220 |         results.push(arr.splice(0, 50));
221 |       }
222 |       this.chunkedVideoIds = results;
223 |     },
224 |     parseURL(url) {
225 |       //Method to parse the PlaylistId attrib from the URL
226 |       var parser = document.createElement("a"),
227 |         searchObject = {},
228 |         queries,
229 |         split,
230 |         i;
231 |       parser.href = url;
232 |       queries = parser.search.replace(/^\?/, "").split("&");
233 |       for (i = 0; i < queries.length; i++) {
234 |         split = queries[i].split("=");
235 |         searchObject[split[0]] = split[1];
236 |       }
237 |       return searchObject;
238 |     },
239 |     async goCalc() {
240 |       //Onclick handler for Go button; resets vars and calls funcs
241 |       this.loading = true;
242 |       this.playlistItems = [];
243 |       this.nextPageToken = "";
244 |       this.durations = Object.assign({}, {});
245 |       const { title, description } = await getPlaylistInfoAPI(this.playlistId);
246 |       this.playlistTitle = title;
247 |       this.playlistDesc = description;
248 |       while (this.nextPageToken || this.nextPageToken == "") {
249 |         //Handling API Pagination
250 |         await this.getPlaylistData();
251 |       }
252 |       await this.getVideoDuration();
253 |     },
254 |     beforeLeave(el) {
255 |       const { marginLeft, marginTop, width, height } = window.getComputedStyle(
256 |         el
257 |       );
258 |       el.style.left = `${el.offsetLeft - parseFloat(marginLeft, 10)}px`;
259 |       el.style.top = `${el.offsetTop - parseFloat(marginTop, 10)}px`;
260 |       el.style.width = width;
261 |       el.style.height = height;
262 |     }
263 |   }
264 | };
265 | </script>
266 | 
267 | <!-- Add "scoped" attribute to limit CSS to this component only -->
268 | <style scoped>
269 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
270 | 
271 | h3 {
272 |   font-family: "Montserrat";
273 | }
274 | .list-enter-active,
275 | .list-leave-active {
276 |   transition: all 1s;
277 | }
278 | .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
279 |   opacity: 0;
280 |   transform: translateY(30px);
281 | }
282 | 
283 | .fade-enter-active,
284 | .fade-leave-active {
285 |   transition: all 2s;
286 | }
287 | 
288 | .fade-leave-active {
289 |   position: absolute;
290 | }
291 | 
292 | .fade-enter, .fade-leave-to /* .list-leave-active below version 2.1.8 */ {
293 |   opacity: 0;
294 | }
295 | </style>
296 | 


--------------------------------------------------------------------------------