Compare commits
6 Commits
7fa1d0edb3
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 2feb4e3d81 | |||
| 7f1447e57c | |||
| b9c4858460 | |||
| 0a53136f1a | |||
| bc8a603d4e | |||
| 494b9dae2b |
@ -10,7 +10,7 @@
|
||||
<body>
|
||||
<div class="pageheader">
|
||||
<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 id="app"></div>
|
||||
|
||||
15
readme.md
15
readme.md
@ -1,10 +1,19 @@
|
||||
# Frontend
|
||||
|
||||
## 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:
|
||||
|
||||
- Vuejs
|
||||
Seemingly resonable javascript framework that's well documented and actively developed.
|
||||
- **Vuejs** Reasonable 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.
|
||||
|
||||
@ -197,31 +197,32 @@ export default Vue.extend({
|
||||
|
||||
GetChannelFromYT(Channel: string) : void {
|
||||
// Say it failed first so if we exit early then correctly marked fail.
|
||||
this.Valid = false;
|
||||
|
||||
// Copy over to internal ID box.
|
||||
this.ID = Channel;
|
||||
|
||||
// Remove any potential youtube URL from the field.
|
||||
const ytchurl = "https://www.youtube.com/channel/";
|
||||
if (this.ID.startsWith(ytchurl))
|
||||
this.ID = this.ID.replace(ytchurl, "");
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Remove possible channel inputs.
|
||||
// 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.
|
||||
Channel = Channel.replace("https://www.youtube.com", "");
|
||||
Channel = Channel.replace("/channel/", "");
|
||||
Channel = Channel.replace("/user/", "");
|
||||
|
||||
// Get channel metadata.
|
||||
const API = 'https://www.googleapis.com/youtube/v3/channels?';
|
||||
const API_Parts = 'part=snippet%2CcontentDetails%2Cstatistics';
|
||||
const API = 'https://www.googleapis.com/youtube/v3/channels/?';
|
||||
const API_Parts = 'part=snippet';
|
||||
const API_Key = '&key=AIzaSyCuIYkMc5SktlnXRXNaDf2ObX-fQvtWCnQ'
|
||||
const API_Search_ID = '&id=' + this.ID;
|
||||
Axios.get(API + API_Parts + API_Search_ID + API_Key).then((resp) => {
|
||||
const API_Search_Query =
|
||||
((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.Title = resp.data.items[0].snippet.title;
|
||||
this.Thumbnail = resp.data.items[0].snippet.thumbnails.high.url;
|
||||
|
||||
@ -29,6 +29,13 @@ let MainApp = new Vue({
|
||||
search_completed(videos : Array<DumbYT.Video>) : void {
|
||||
this.Videos = videos;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// Populate some Videos immediatly on start up.
|
||||
DumbYT.API.search_videos("").then(videos => {
|
||||
// Copy the videos over.
|
||||
this.Videos = videos;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -55,8 +55,17 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
overlay: {
|
||||
warnings: true,
|
||||
errors: true
|
||||
},
|
||||
historyApiFallback: true,
|
||||
noInfo: true
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "https://dumbyt.hak8or.com",
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
|
||||
Reference in New Issue
Block a user