<link href='public/styles/video_widget.css' rel='stylesheet' />
<div class='Screen'></div>
<div class="Navigation">
<img onClick="channel.getVidContent(channel.yt_prevPageToken)" src="public/images/left.png" />
<img onClick="channel.getVidContent()" src='public/images/home.png' />
<img onClick="channel.getVidContent(channel.yt_nextPageToken)" src="public/images/right.png" />
</div>
<script src='public/scripts/channel.js'></script>
<script>
const script = document.createElement("script")
script.src = "https://apis.google.com/js/client.js"
script.onload = () => {
window.gapi.load('client', () => {
channel.getVidContent()
})
}
document.body.appendChild(script)
</script>
class Channel{
constructor(){
this.pageTokens = [];
this.apiKey = 'AIzaSyCDMr6toQGyDRFPChRsbQ2sheSQfTQLVqg';
this.kplaylistId = 'UUQfwfsi5VrQ8yKZ-UWmAEFg';
this.yt_nextPageToken = false;
this.yt_prevPageToken = false;
this.kclicked = false;
this.kPlaylistt = [];
this.kPlaylist = [];
this.created = false;
this.videoIds = [];
}
getVidContent(pageToken) {
$('#navigation img').eq(1).attr('src', '/images/loading.gif')
channel.option = {
"part": ["snippet,contentDetails"],
"playlistId": channel.kplaylistId,
"maxResults": 5
}
if(pageToken)
channel.option.pageToken = pageToken;
window.gapi.client.init({
'apiKey': channel.apiKey,
'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
}).then(function() {
return window.gapi.client.youtube.playlistItems.list(channel.option);
}).then(function(response) {
channel.yt_nextPageToken = response.result.nextPageToken;
channel.yt_prevPageToken = response.result.prevPageToken;
channel.getVidData(response.result.items);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
}
getVidData(items){
this.videoIds = [];
for(var v in items){
this.videoIds.push(items[v].snippet.resourceId.videoId);
}
this.createPlayer();
}
createPlayer(){
var html = ``;
for(var v in this.videoIds){
html += `<div>`;
html += `<iframe allowfullscreen src="https://www.youtube.com/embed/${this.videoIds[v]}"></iframe>`;
html += `</div>`;
}
$('.Screen').html(html);
//$('#navigation img').eq(1).attr('src', '/images/home.png')
}
}//end class
const channel = new Channel();
.Screen{
background: var(--background);
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-gap: 15px;
padding: 15px;
}
.Screen div{
position:relative;
padding-top:56.25%;
}
.Screen div iframe{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
border-width:0;
}
.Screen div:nth-child(1){
grid-column: 1 / span 3;
}
.Screen div:nth-child(2){
grid-column: 4 / span 3;
}
.Screen div:nth-child(3){
grid-column: 1 / span 2;
}
.Screen div:nth-child(4){
grid-column: 3 / span 2;
}
.Screen div:nth-child(5){
grid-column: 5 / span 2;
}
.Navigation {
background: var(--background);
text-align: center;
margin-top: 0;
padding: 10px 0 5px;
border-top: 1px solid lightgrey;
}
.Navigation img{
height: 30px;
}
.Navigation img:hover{
cursor: pointer;
opacity: .7;
}
@media only screen and (max-width: 600px){
.Screen{
grid-template-columns: 100%;
}
.Screen div:nth-child(1){
grid-column: 1 / span 1;
}
.Screen div:nth-child(2){
grid-column: 1 / span 1;
}
.Screen div:nth-child(3){
grid-column: 1 / span 1;
}
.Screen div:nth-child(4){
grid-column: 1 / span 1;
}
.Screen div:nth-child(5){
grid-column: 1 / span 1;
}
}