DumbYT/FrontEnd
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: DumbYT:7fa1d0edb392a1ef9c7d258da5c076f53a1d4b2f
Branches Tags
DumbYT:master DumbYT:development
..
compare: DumbYT:master
Branches Tags
DumbYT:development DumbYT:master

6 Commits
7fa1d0edb3 ... master

Author SHA1 Message Date
hak8or
2feb4e3d81 Fixed typo in homepage and changed what this is paragraph a bit 2018-04-06 07:36:07 +00:00
hak8or
7f1447e57c Load a few videos when page opens 2018-03-31 01:09:12 -04:00
hak8or
b9c4858460 Updated readme.md 2018-03-31 00:59:53 -04:00
hak8or
0a53136f1a Added readme 2018-03-31 00:53:16 -04:00
hak8or
bc8a603d4e Added proxy to backend API and typescript errors to browser overview 2018-03-25 04:51:49 -04:00
hak8or
494b9dae2b Added ability to also put in youtube channel name 2018-03-25 04:49:36 -04:00
5 changed files with 49 additions and 23 deletions
Expand all files Collapse all files

2
index.html
View File

@ -10,7 +10,7 @@
<body> <body>
<div class="pageheader"> <div class="pageheader">
<h1>Dumb YT Manager</h1> <h1>Dumb YT Manager</h1>
<p>Youtube banned my account and refuses to say why, taking all my subscribed channels with it. This is a simple scrubscribed channel manager, showing recent releases from each channel and finally proper sub-catagory functionality!</p> <p>Youtube banned my account and refuses to say why, taking all my channel subscriptions with it. So here is a simple channel subscription manager of my own, showing recent releases from each channel.</p>
</div> </div>
<div id="app"></div> <div id="app"></div>

15
readme.md
View File

@ -1,10 +1,19 @@
# Frontend # Frontend
## Description ## Description
Oh god, front end web development, specifically javascript.
Oh god, front end web development, specifically javascript. This is the front end for the API based backend of DumbYT, a simple Youtube manager that keeps track of various channels or videos a user wants to be "subscribed" to.
This project makes use of the following: This project makes use of the following:
- Vuejs - **Vuejs** Reasonable javascript framework that's well documented and actively developed.
Seemingly resonable javascript framework that's well documented and actively developed. - **Axios** Nice HTTP post/delete/etc helper library
- **TypeScript** Making javascript more bearable, adds types to the language and other niceties.
- **WebPack** Handles running the Typescript compiler and minifying and running a server for development.
## Getting Started
1. Clone the repository
2. Run ```npm update``` to download all the project dependencies.
3. Run ```npm start``` which will automatically start a server and recompile the typescript based backend when there are file changes. Also, ```/api``` is proxied back to the production server, though this can be edited in ```webpack.config.js```.
4. Run ```npm run-script build``` which generates the frontend files for production.

37
src/components/Channel_Add.vue
View File

@ -197,31 +197,32 @@ export default Vue.extend({
GetChannelFromYT(Channel: string) : void { GetChannelFromYT(Channel: string) : void {
// Say it failed first so if we exit early then correctly marked fail. // Say it failed first so if we exit early then correctly marked fail.
this.Title = "";
this.Description = "";
this.ID = "";
this.Thumbnail = "";
this.Valid = false; this.Valid = false;
// Copy over to internal ID box. // Remove possible channel inputs.
this.ID = Channel; // https://www.youtube.com/channel/UC2DjFE7Xf11URZqWBigcVOQ
// UC2DjFE7Xf11URZqWBigcVOQ
// https://www.youtube.com/user/EEVblog <-- Take first channel found
// EEVblog <-- Take first channel found
// Remove any potential youtube URL from the field. // Remove any potential youtube URL from the field.
const ytchurl = "https://www.youtube.com/channel/"; Channel = Channel.replace("https://www.youtube.com", "");
if (this.ID.startsWith(ytchurl)) Channel = Channel.replace("/channel/", "");
this.ID = this.ID.replace(ytchurl, ""); Channel = Channel.replace("/user/", "");
// Check if what remains looks like a youtube channel ID.
if (this.ID.length != "UCyS4xQE6DK4_p3qXQwJQAyA".length){
this.Title = "";
this.Description = "";
this.ID = "";
this.Thumbnail = "";
this.Valid = false;
}
// Get channel metadata. // Get channel metadata.
const API = 'https://www.googleapis.com/youtube/v3/channels?'; const API = 'https://www.googleapis.com/youtube/v3/channels/?';
const API_Parts = 'part=snippet%2CcontentDetails%2Cstatistics'; const API_Parts = 'part=snippet';
const API_Key = '&key=AIzaSyCuIYkMc5SktlnXRXNaDf2ObX-fQvtWCnQ' const API_Key = '&key=AIzaSyCuIYkMc5SktlnXRXNaDf2ObX-fQvtWCnQ'
const API_Search_ID = '&id=' + this.ID; const API_Search_Query =
Axios.get(API + API_Parts + API_Search_ID + API_Key).then((resp) => { ((Channel.length == "UCyS4xQE6DK4_p3qXQwJQAyA".length) ? "&id=" : "&forUsername=")
+ Channel;
Axios.get(API + API_Parts + API_Search_Query + API_Key).then((resp) => {
this.ID = resp.data.items[0].id;
this.Description = _.truncate(resp.data.items[0].snippet.description, {length: 70}); this.Description = _.truncate(resp.data.items[0].snippet.description, {length: 70});
this.Title = resp.data.items[0].snippet.title; this.Title = resp.data.items[0].snippet.title;
this.Thumbnail = resp.data.items[0].snippet.thumbnails.high.url; this.Thumbnail = resp.data.items[0].snippet.thumbnails.high.url;

7
src/index.ts
View File

@ -29,6 +29,13 @@ let MainApp = new Vue({
search_completed(videos : Array<DumbYT.Video>) : void { search_completed(videos : Array<DumbYT.Video>) : void {
this.Videos = videos; this.Videos = videos;
} }
},
mounted(){
// Populate some Videos immediatly on start up.
DumbYT.API.search_videos("").then(videos => {
// Copy the videos over.
this.Videos = videos;
});
} }
}); });

11
webpack.config.js
View File

@ -55,8 +55,17 @@ module.exports = {
} }
}, },
devServer: { devServer: {
overlay: {
warnings: true,
errors: true
},
historyApiFallback: true, historyApiFallback: true,
noInfo: true proxy: {
"/api": {
target: "https://dumbyt.hak8or.com",
changeOrigin: true
}
}
}, },
performance: { performance: {
hints: false hints: false