Add project files.
This commit is contained in:
109
YTManager/wwwroot/admin.html
Normal file
109
YTManager/wwwroot/admin.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>YT Manager Admin</title>
|
||||
|
||||
<!-- Compressed CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<hr />
|
||||
<h2>Subscribed Channels</h2>
|
||||
<table id="tbody-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>YT Channel ID</th>
|
||||
<th>Title</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-cloak v-for="entry in entries">
|
||||
<td class="tinytext12px">{{entry.ytChannelID}}</td>
|
||||
<td class="tinytext12px">{{entry.title}}</td>
|
||||
<td class="tinytext12px">{{entry.description}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="addchanel-0">
|
||||
<div class="grid-x">
|
||||
<div class="medium-11 cell"></div>
|
||||
<div class="medium-1 cell">
|
||||
<button type="button" class="button input-group" v-on:click='expanded = !expanded'>
|
||||
<i class="fa fa-plus" aria-hidden="true"></i> Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<form v-cloak v-if="expanded">
|
||||
<h2>Add new Channel</h2>
|
||||
<div class="grid-x">
|
||||
<div class="input-group medium-6 cell">
|
||||
<span class="input-group-label">Title</span>
|
||||
<input class="input-group-field" type="text" placeholder="Title of Entry" v-model="entry.title">
|
||||
</div>
|
||||
<div class="input-group medium-1 cell"></div>
|
||||
<div class="input-group medium-5 cell">
|
||||
<span class="input-group-label">Channel</span>
|
||||
<input class="input-group-field" v-bind:class="{ error: fail }" type="text"
|
||||
@blur="newurl" placeholder="URL of Entry" v-model="entry.yTChannelID">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-label">Description</span>
|
||||
<input class="input-group-field" type="text" placeholder="Description of Entry" v-model="entry.description">
|
||||
</div>
|
||||
<div class="grid-x">
|
||||
<img class="small-4 cell" :src="entry.thumbnailURL" />
|
||||
<div class="small-7"></div>
|
||||
<button type="button" style="max-height:50px" class="button input-group small-1 cell" @click="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<h2>Videos in DB</h2>
|
||||
<table id="videostb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Description</th>
|
||||
<th>Youtube Video ID</th>
|
||||
<th>ID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-cloak v-for="video in Videos">
|
||||
<td class="tinytext12px">{{video.title}}</td>
|
||||
<td class="tinytext12px">{{video.description}}</td>
|
||||
<td class="tinytext12px">{{video.ytVideoID}}</td>
|
||||
<td class="tinytext12px">{{video.videoId}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Compressed JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
|
||||
|
||||
<!-- For doing REST based API stuff. -->
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
|
||||
<!-- Some icons -->
|
||||
<script src="https://use.fontawesome.com/91af8ab4ba.js"></script>
|
||||
|
||||
<!-- Good ole Vue :D -->
|
||||
<script src="https://unpkg.com/vue"></script>
|
||||
|
||||
<!-- All of my custom JS. Put here so body loads before Vue based stuff loads/attempts to bind. -->
|
||||
<script src="admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
139
YTManager/wwwroot/admin.js
Normal file
139
YTManager/wwwroot/admin.js
Normal file
@ -0,0 +1,139 @@
|
||||
$(document).foundation();
|
||||
|
||||
// How many chars at most for the description.
|
||||
var maxcharstablefield = 200;
|
||||
|
||||
// Bind to the form for submitting a new channel
|
||||
var addchanel0 = new Vue({
|
||||
el: '#addchanel-0',
|
||||
data: {
|
||||
entry: {
|
||||
title: "",
|
||||
description: "",
|
||||
yTChannelID: "",
|
||||
thumbnailURL: "",
|
||||
},
|
||||
fail: false,
|
||||
expanded: false
|
||||
},
|
||||
methods: {
|
||||
submit: function (event) {
|
||||
// Send the channel to our API and request tables be updated.
|
||||
var d = this.entry;
|
||||
axios.post('/api/Channels', d)
|
||||
.then(function (response) {
|
||||
this.entry.title = "";
|
||||
this.entry.description = "";
|
||||
this.entry.yTChannelID = "";
|
||||
this.entry.thumbnailURL = "";
|
||||
this.expanded = false;
|
||||
tbody0.retrieve();
|
||||
|
||||
axios.post('/api/admin/refreshytvids');
|
||||
setTimeout(() => videostb.retrieve(), 1000);
|
||||
}.bind(this))
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
// Handle when user put in a new URL (verification and thumbnail fetch)
|
||||
newurl: function (event) {
|
||||
// Remove any potential youtube URL from the field.
|
||||
var ytchurl = "https://www.youtube.com/channel/";
|
||||
if (this.entry.yTChannelID.startsWith(ytchurl)) {
|
||||
this.entry.yTChannelID = this.entry.yTChannelID.replace(ytchurl, "");
|
||||
}
|
||||
|
||||
// Check if what remains looks like a youtube channel ID.
|
||||
if (this.entry.yTChannelID.length != "UCyS4xQE6DK4_p3qXQwJQAyA".length) {
|
||||
this.fail = true;
|
||||
return;
|
||||
}
|
||||
this.fail = false;
|
||||
|
||||
// Get the Channel URL
|
||||
var basestr = 'https://www.googleapis.com/youtube/v3/channels?part=snippet%2CcontentDetails%2Cstatistics';
|
||||
var apikey = '&key=AIzaSyCuIYkMc5SktlnXRXNaDf2ObX-fQvtWCnQ '
|
||||
var channel = '&id=' + addchanel0.entry.yTChannelID;
|
||||
axios.get(basestr + channel + apikey)
|
||||
.then(function (response) {
|
||||
// Only attempt to fill the UI text boxes if they are empty.
|
||||
if (this.entry.description.length == 0) {
|
||||
this.entry.description = response.data.items[0].snippet.description;
|
||||
}
|
||||
if (this.entry.title.length == 0) {
|
||||
this.entry.title = response.data.items[0].snippet.title;
|
||||
}
|
||||
|
||||
// Get client to load the thumbnail
|
||||
this.entry.thumbnailURL = response.data.items[0].snippet.thumbnails.medium.url;
|
||||
}.bind(this))
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Bind to our table of entries.
|
||||
var tbody0 = new Vue({
|
||||
el: '#tbody-0',
|
||||
data: {
|
||||
entries: [""]
|
||||
},
|
||||
methods: {
|
||||
retrieve: function (event) {
|
||||
axios.get('/api/Channels')
|
||||
.then(function (response) {
|
||||
// Wipe out all old entries.
|
||||
this.entries = [];
|
||||
|
||||
// And fill it with all the retrieved entries.
|
||||
response.data.forEach(function (x) {
|
||||
if (x.description.length > maxcharstablefield) {
|
||||
x.description = x.description.substring(0, maxcharstablefield) + " ...";
|
||||
}
|
||||
this.entries.push(x);
|
||||
}.bind(this));
|
||||
}.bind(this))
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Grid if images.
|
||||
var videostb = new Vue({
|
||||
el: '#videostb-0',
|
||||
data: {
|
||||
Videos: []
|
||||
},
|
||||
methods: {
|
||||
// Get new videos from the web api.
|
||||
retrieve: function (event) {
|
||||
axios.get('/api/Videos')
|
||||
.then(function (response) {
|
||||
// And fill it with all the retrieved entries.
|
||||
response.data.forEach(function (x) {
|
||||
// Trim description if needed.
|
||||
if (x.description.length > maxcharstablefield) {
|
||||
x.description = x.description.substring(0, maxcharstablefield) + " ...";
|
||||
}
|
||||
|
||||
// Add it to our array
|
||||
this.Videos.push(x);
|
||||
}.bind(this));
|
||||
}.bind(this))
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
tbody0.retrieve();
|
||||
videostb.retrieve();
|
||||
});
|
||||
39
YTManager/wwwroot/index.css
Normal file
39
YTManager/wwwroot/index.css
Normal file
@ -0,0 +1,39 @@
|
||||
body {
|
||||
max-width: 1280px;
|
||||
margin: auto;
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
color: #444;
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#addnewchannelform {
|
||||
width: inherit;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#vidholder-0 {
|
||||
|
||||
}
|
||||
|
||||
.tinytext10px{ font-size: 10px; }
|
||||
.tinytext12px{ font-size: 12px; }
|
||||
.tinytext14px{ font-size: 14px; }
|
||||
.tinytext16px{ font-size: 16px; }
|
||||
.tinytext18px{ font-size: 18px; }
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.75s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
47
YTManager/wwwroot/index.html
Normal file
47
YTManager/wwwroot/index.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>YT Manager</title>
|
||||
|
||||
<!-- Compressed CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<hr />
|
||||
<h2>Most Recent Videos</h2>
|
||||
<div v-cloak id="vidholder-0">
|
||||
<div class="grid-x grid-margin-x imgrow" v-for="row in Videos.Rows">
|
||||
<div class="card medium-2 large-1 cell" v-for="video in row.Columns">
|
||||
<div class="card-divider">
|
||||
<h6>{{video.title}}</h6>
|
||||
</div>
|
||||
<img :src="video.thumbnailURL">
|
||||
<div class="card-section">
|
||||
<p class="tinytext14px">{{video.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compressed JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
|
||||
|
||||
<!-- For doing REST based API stuff. -->
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
|
||||
<!-- Some icons -->
|
||||
<script src="https://use.fontawesome.com/91af8ab4ba.js"></script>
|
||||
|
||||
<!-- Good ole Vue :D -->
|
||||
<script src="https://unpkg.com/vue"></script>
|
||||
|
||||
<!-- All of my custom JS. Put here so body loads before Vue based stuff loads/attempts to bind. -->
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
73
YTManager/wwwroot/index.js
Normal file
73
YTManager/wwwroot/index.js
Normal file
@ -0,0 +1,73 @@
|
||||
$(document).foundation();
|
||||
|
||||
// How many chars at most for the description.
|
||||
var maxcharsdescriptionfield = 100;
|
||||
|
||||
// Grid if images.
|
||||
var vidholder = new Vue({
|
||||
el: '#vidholder-0',
|
||||
data: {
|
||||
Videos: {
|
||||
Rows: [
|
||||
/*{
|
||||
Columns: [
|
||||
{
|
||||
"title": "0",
|
||||
"description": "",
|
||||
"yTVideoID": "",
|
||||
"thumbnailURL": "",
|
||||
"uploaded": "",
|
||||
"yTChannelID": ""
|
||||
}
|
||||
]
|
||||
}*/
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// Get new videos from the web api.
|
||||
retrieve: function (event) {
|
||||
// Wipe out all old entries.
|
||||
this.Videos.Rows = [];
|
||||
|
||||
axios.get('/api/Videos')
|
||||
.then(function (response) {
|
||||
// Dimension counters and limits.
|
||||
var maxcols = 4;
|
||||
var colcounter = 0;
|
||||
var rowcounter = 0;
|
||||
|
||||
// And fill it with all the retrieved entries.
|
||||
response.data.forEach(function (x) {
|
||||
// Trim description if needed.
|
||||
if (x.description.length > maxcharsdescriptionfield) {
|
||||
x.description = x.description.substring(0, maxcharsdescriptionfield) + " ...";
|
||||
}
|
||||
|
||||
// Handle creation of a new row.
|
||||
if (colcounter == 0) {
|
||||
Vue.set(this.Videos.Rows, rowcounter, []);
|
||||
Vue.set(this.Videos.Rows[rowcounter], 'Columns', []);
|
||||
}
|
||||
|
||||
// Add it to our array
|
||||
this.Videos.Rows[rowcounter].Columns.push(x);
|
||||
|
||||
// So we get it all in groups of maxcols.
|
||||
colcounter = colcounter + 1;
|
||||
if (colcounter == maxcols) {
|
||||
colcounter = 0;
|
||||
rowcounter = rowcounter + 1;
|
||||
}
|
||||
}.bind(this));
|
||||
}.bind(this))
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
vidholder.retrieve();
|
||||
});
|
||||
Reference in New Issue
Block a user