Skip to content

Commit ee2e1b7

Browse files
nishchay7pixelsnishchay7pixels
committed
Added
1 parent 4c682ae commit ee2e1b7

38 files changed

+1046
-32
lines changed

‎.angular-cli.json

+8-2
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,15 @@
1919
"testTsconfig": "tsconfig.spec.json",
2020
"prefix": "app",
2121
"styles": [
22-
"styles.css"
22+
"styles.css",
23+
"../node_modules/clarity-icons/clarity-icons.min.css",
24+
"../node_modules/clarity-ui/clarity-ui.min.css"
25+
],
26+
"scripts": [
27+
"../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
28+
"../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
29+
"../node_modules/clarity-icons/clarity-icons.min.js"
2330
],
24-
"scripts": [],
2531
"environmentSource": "environments/environment.ts",
2632
"environments": {
2733
"dev": "environments/environment.ts",

‎README.md

+34-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,40 @@
1-
# YoutubePlayer
1+
# TubePlayer
2+
This is an angular4 component based on YouTube’s iframe API and Youtube's data API. This is an alternative player for watching and listening to media from YouTube.
23

34
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.1.1.
45

6+
7+
# Built With
8+
Angular4 (typescript) (https://angular.io)
9+
vmware Project Clarity (https://vmware.github.io/clarity/)
10+
Font-awesome – font and css toolkit (http://fontawesome.io/)
11+
YouTube data api v3 (https://developers.google.com/YouTube/v3/)
12+
YouTube iframe api (https://developers.google.com/YouTube/iframe_api_reference)
13+
14+
# Features
15+
searching videos and playlists WHILE playing a video
16+
17+
Different Player dimensions- minimized, small, medium, fullscreen
18+
19+
watching videos with player functionality and media center user interface in mind
20+
21+
queue your favorite videos to a now playlist feature
22+
23+
# Features to be included in Future
24+
allow to add/remove a video to your playlist
25+
26+
save now playing as a playlist
27+
28+
creating playlists
29+
30+
searching for playlists
31+
32+
syncs the current state to your machine - your playlist is not lost.
33+
34+
login with your YouTube user and view/queue your playlists to now playing
35+
36+
37+
538
## Development server
639

740
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

‎TubePlayer.iml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<module type="WEB_MODULE" version="4">
3+
<component name="NewModuleRootManager" inherit-compiler-output="true">
4+
<exclude-output />
5+
<content url="file://$MODULE_DIR$" />
6+
<orderEntry type="inheritedJdk" />
7+
<orderEntry type="sourceFolder" forTests="false" />
8+
</component>
9+
</module>

‎package.json

+11-2
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,24 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15-
"@angular/animations": "^4.0.0",
15+
"@angular/animations": "^4.3.1",
16+
"@angular/cdk": "^2.0.0-beta.8",
1617
"@angular/common": "^4.0.0",
1718
"@angular/compiler": "^4.0.0",
1819
"@angular/core": "^4.0.0",
1920
"@angular/forms": "^4.0.0",
2021
"@angular/http": "^4.0.0",
22+
"@angular/material": "^2.0.0-beta.8",
2123
"@angular/platform-browser": "^4.0.0",
2224
"@angular/platform-browser-dynamic": "^4.0.0",
2325
"@angular/router": "^4.0.0",
26+
"@webcomponents/custom-elements": "^1.0.0-alpha.3",
27+
"angular2-infinite-scroll": "^0.3.5",
28+
"clarity-angular": "^0.9.13",
29+
"clarity-icons": "^0.9.13",
30+
"clarity-ui": "^0.9.13",
2431
"core-js": "^2.4.1",
32+
"mutationobserver-shim": "^0.3.2",
2533
"rxjs": "^5.1.0",
2634
"zone.js": "^0.8.4"
2735
},
@@ -37,9 +45,10 @@
3745
"karma": "~1.7.0",
3846
"karma-chrome-launcher": "~2.1.1",
3947
"karma-cli": "~1.0.1",
48+
"karma-coverage-istanbul-reporter": "^1.2.1",
4049
"karma-jasmine": "~1.1.0",
4150
"karma-jasmine-html-reporter": "^0.2.2",
42-
"karma-coverage-istanbul-reporter": "^1.2.1",
51+
"ng2-youtube-player": "0.0.3",
4352
"protractor": "~5.1.2",
4453
"ts-node": "~3.0.4",
4554
"tslint": "~5.3.2",

‎src/app/app.component.html

+1-20
Original file line numberDiff line numberDiff line change
@@ -1,20 +1 @@
1-
<!--The whole content below can be removed with the new code.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{title}}!!
5-
</h1>
6-
<img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" />
7-
</div>
8-
<h2>Here are some links to help you start: </h2>
9-
<ul>
10-
<li>
11-
<h2><a target="_blank" href="https://angular.io/docs/ts/latest/tutorial/">Tour of Heroes</a></h2>
12-
</li>
13-
<li>
14-
<h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
15-
</li>
16-
<li>
17-
<h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
18-
</li>
19-
</ul>
20-
1+
<app-dashboard></app-dashboard>

‎src/app/app.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@ import { Component } from '@angular/core';
66
styleUrls: ['./app.component.css']
77
})
88
export class AppComponent {
9-
title = 'app';
9+
title = 'app'
10+
1011
}

‎src/app/app.module.ts

+40-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,52 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
3-
3+
import { ClarityModule } from "clarity-angular";
44
import { AppComponent } from './app.component';
5+
import { DashboardComponent } from './dashboard/dashboard.component';
6+
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
7+
import { HttpModule } from '@angular/http';
8+
import { YoutubeApiService } from './services/youtube-api.service';
9+
import {PlaylistNameFilterModule } from './pipes/playlist-item-name.pipe';
10+
import {YoutubeSearchbarComponent } from './dashboard/youtube-searchbar/youtube-searchbar.component';
11+
import { YoutubePlayerComponent } from './dashboard/youtube-player/youtube-player.component';
512

13+
import { YoutubePlayerModule } from 'ng2-youtube-player';
14+
import {YoutubePlayerService} from "./services/youtube-player.service";
15+
import { UserPlaylistComponent } from './dashboard/youtube-searchbar/user-playlist/user-playlist.component';
16+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
17+
import {MdCardModule, MdButtonModule, MdSidenavModule} from '@angular/material';
18+
import {InfiniteScrollModule} from "angular2-infinite-scroll";
19+
import { YoutubePlayerVideoDescriptionComponent } from './dashboard/youtube-player/youtube-player-video-description/youtube-player-video-description.component';
20+
import {MdDialogModule} from '@angular/material';
21+
import { YoutubeCategoryComponent } from './dashboard/youtube-searchbar/youtube-category/youtube-category.component';
622
@NgModule({
723
declarations: [
8-
AppComponent
24+
AppComponent,
25+
DashboardComponent,
26+
YoutubeSearchbarComponent,
27+
YoutubePlayerComponent,
28+
UserPlaylistComponent,
29+
YoutubePlayerVideoDescriptionComponent,
30+
YoutubeCategoryComponent,
31+
932
],
1033
imports: [
11-
BrowserModule
34+
BrowserModule,
35+
ClarityModule,
36+
FormsModule,
37+
ReactiveFormsModule,
38+
HttpModule,
39+
PlaylistNameFilterModule,
40+
YoutubePlayerModule,
41+
BrowserAnimationsModule,
42+
MdCardModule,
43+
MdButtonModule,
44+
MdSidenavModule,
45+
InfiniteScrollModule,
46+
MdDialogModule
47+
1248
],
13-
providers: [],
49+
providers: [YoutubeApiService, YoutubePlayerService],
1450
bootstrap: [AppComponent]
1551
})
1652
export class AppModule { }

‎src/app/app.module.ts___jb_tmp______jb_tmp___

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
const blocking_proxy_1 = require("blocking-proxy");
4+
const selenium_webdriver_1 = require("selenium-webdriver");
5+
const url = require("url");
6+
const webdriver_js_extender_1 = require("webdriver-js-extender");
7+
const debugger_1 = require("./debugger");
8+
const element_1 = require("./element");
9+
const expectedConditions_1 = require("./expectedConditions");
10+
const locators_1 = require("./locators");
11+
const logger_1 = require("./logger");
12+
const clientSideScripts = require('./clientsidescripts');
13+
// TODO: fix the typings for selenium-webdriver/lib/command
14+
const Command = require('selenium-webdriver/lib/command').Command;
15+
const CommandName = require('selenium-webdriver/lib/command').Name;
16+
// jshint browser: true
17+
const DEFER_LABEL = 'NG_DEFER_BOOTSTRAP!';
18+
const

‎src/app/dashboard/dashboard.component.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.player{
2+
z-index: 999;
3+
}

‎src/app/dashboard/dashboard.component.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<app-searchbar ></app-searchbar>
2+
<app-youtube-player class="player"></app-youtube-player>

‎src/app/dashboard/dashboard.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { DashboardComponent } from './dashboard.component';
4+
5+
describe('DashboardComponent', () => {
6+
let component: DashboardComponent;
7+
let fixture: ComponentFixture<DashboardComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ DashboardComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(DashboardComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should be created', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/dashboard/dashboard.component.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {Component, OnInit, ViewChild} from '@angular/core';
2+
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3+
import {validate} from "codelyzer/walkerFactory/walkerFn";
4+
import {Http} from "@angular/http";
5+
import 'rxjs/add/operator/map';
6+
7+
const YOUTUBE_API_KEY = "AIzaSyDVgNbO40smsbGwLv-mtYnMJ-VNsEogLbI";
8+
9+
10+
@Component({
11+
selector: 'app-dashboard',
12+
templateUrl: './dashboard.component.html',
13+
14+
})
15+
export class DashboardComponent{
16+
17+
currentVideo: string = 'CNLVZjBE08g';
18+
19+
20+
}

‎src/app/dashboard/youtube-player/youtube-player-video-description/youtube-player-video-description.component.css

Whitespace-only changes.

‎src/app/dashboard/youtube-player/youtube-player-video-description/youtube-player-video-description.component.html

Whitespace-only changes.

‎src/app/dashboard/youtube-player/youtube-player-video-description/youtube-player-video-description.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { YoutubePlayerVideoDescriptionComponent } from './youtube-player-video-description.component';
4+
5+
describe('YoutubePlayerVideoDescriptionComponent', () => {
6+
let component: YoutubePlayerVideoDescriptionComponent;
7+
let fixture: ComponentFixture<YoutubePlayerVideoDescriptionComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ YoutubePlayerVideoDescriptionComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(YoutubePlayerVideoDescriptionComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should be created', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/dashboard/youtube-player/youtube-player-video-description/youtube-player-video-description.component.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-youtube-player-video-description',
5+
templateUrl: './youtube-player-video-description.component.html',
6+
styleUrls: ['./youtube-player-video-description.component.css']
7+
})
8+
export class YoutubePlayerVideoDescriptionComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit() {
13+
}
14+
15+
}

‎src/app/dashboard/youtube-player/youtube-player.component.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.player{
2+
z-index: 100;
3+
bottom: 0px;
4+
position: fixed;
5+
width: 100%;
6+
display: inline-block;
7+
}
8+
.container{
9+
padding-left: 0px;
10+
margin-left: inherit;
11+
}
12+
.smallbutton{
13+
width: 25px;
14+
height: 25px;
15+
background-color: black;
16+
17+
}
18+
19+
.hidden{
20+
visibility: hidden;
21+
}
22+
23+
.player-window{
24+
display: inline-block;
25+
position: inherit;
26+
bottom: 65px;
27+
}

‎src/app/dashboard/youtube-player/youtube-player.component.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div class="player">
2+
<div class="player-window">
3+
<div class="smallbutton" (click)="closePlayer()" [ngClass]="{'smallbutton': enabled, 'hidden': !enabled}">
4+
<a class="nav-link nav-icon">
5+
<clr-icon shape="window-close"></clr-icon>
6+
</a></div>
7+
<div>
8+
<youtube-player
9+
[videoId]="id"
10+
(ready)="savePlayer($event)"
11+
(change)="onStateChange($event)"
12+
></youtube-player></div>
13+
</div>
14+
<header class="header-6">
15+
<div class="header-nav">
16+
<a (click)="expanded?minimizePlayer():expandPlayer()" class="nav-link nav-icon">
17+
<clr-icon shape="resize"></clr-icon>
18+
</a>
19+
<!--<a href="{{ytps.player.getVideoUrl()}}" class="nav-link nav-icon" target="_blank">-->
20+
<!--<clr-icon shape="pop-out"></clr-icon>-->
21+
<!--</a>-->
22+
</div>
23+
<div class="header-actions">
24+
<a (click)="sound?muteVideo():unmuteVideo()" class="nav-link nav-icon">
25+
<clr-icon *ngIf="sound" shape="volume-up"></clr-icon>
26+
<clr-icon *ngIf="!sound" shape="volume-mute"></clr-icon>
27+
</a>
28+
29+
<a (click)="playing?stopVideo():playVideo()" class="nav-link nav-icon">
30+
<clr-icon *ngIf="playing" shape="stop"></clr-icon>
31+
<clr-icon *ngIf="!playing" shape="play"></clr-icon>
32+
</a>
33+
34+
<a (click)="nextVideo()" class="nav-link nav-icon">
35+
<clr-icon shape="step-forward"></clr-icon>
36+
</a>
37+
</div>
38+
</header>
39+
</div>

0 commit comments

Comments
 (0)