Added video scroll in grid expansion; Added yt eh for playerstatus;

src/RadioWatch/ClientApp/app/actions/phalanxgrid.actions.ts

@@ -110,7 +110,6 @@ export class PhxGridActions {
  atIndexInsert: rowInfo.index + 1,
  }
  });
- console.log(rowInfo);
  }
 
  collapseRow(rowInfo: any) {
@@ -120,7 +119,6 @@ export class PhxGridActions {
  key: rowInfo.row.key,
  }
  });
- console.log(rowInfo);
  }
 
  private phxGridUpdatePagination() {

src/RadioWatch/ClientApp/app/actions/youtube-window-actions.ts

@@ -3,16 +3,20 @@ import { IAppState } from '../store';
 import { NgRedux } from 'ng2-redux';
 import { List } from 'immutable';
 import { ApiService } from '../services'
-import { Observable } from 'rxjs';
+import { Observable, Subscription, Subject } from 'rxjs';
 import { YoutubeService } from '../services';
+import { YOUTUBE_PLAYER_STATES, PlayerStateModel } from '../services/youtube-service'
 
 export const YOUTUBE_WINDOW_ACTIONS = {
  SEARCHING_IN_PROG: "SEARCHING_IN_PROG",
  SEARCHING_SUCCESS: "SEARCHING_SUCCESS",
  SEARCHING_FAILED: "SEARCHING_FAILED",
  VIDEO_STARTED: "VIDEO_STARTED",
  VIDEO_STOPED: "VIDEO_STOPED",
- PLAYER_LOADED: "PLAYER_LOADED"
+ PLAYER_LOADED: "PLAYER_LOADED",
+ PLAYER_STATE_CHANGE: "PLAYER_STATE_CHANGE",
+ VIDEO_CHANGED: "VIDEO_CHANGED",
+ VIDEO_CHANGED_ERROR: "VIDEO_CHANGED_ERROR"
 }
 
 export const YOUTUBE_WINDOWS_ACTIONS = {
@@ -89,7 +93,83 @@ export class YoutubeWindowActions {
  player: newPlayer,
  ready: true
  }
- })
+ });
+ }
+
+ setupPlayerStateChangedEventListener(playerId: string, playerStateChanged$: Subject<PlayerStateModel>) {
+ let window = this.windowById(playerId);
+ this.ytService.setupPlayerStateChangedEventListener(playerId, window.player, playerStateChanged$);
+ return playerStateChanged$.subscribe((next) => {
+ this.playerStateChanged(next);
+ });
+ }
+
+ playerStateChanged(playerState: PlayerStateModel) {
+ let statusText: string;
+ for (let i in YOUTUBE_PLAYER_STATES) {
+ if (YOUTUBE_PLAYER_STATES[i] === playerState.statusId) {
+ statusText = i;
+ }
+ }
+ this.ngRedux.dispatch({
+ type: YOUTUBE_WINDOW_ACTIONS.PLAYER_STATE_CHANGE,
+ payload: {
+ playerId: playerState.playerId,
+ status: statusText
+ }
+ });
+ if (statusText === "ENDED" || statusText === "PAUSED") {
+ this.ngRedux.dispatch({
+ type: YOUTUBE_WINDOW_ACTIONS.VIDEO_STOPED,
+ payload: {
+ playerId: playerState.playerId,
+ playing: false
+ }
+ });
+ }
+ }
+
+ pauseVideo(playerId: string): void {
+ const playerWindow = this.windowById(playerId);
+ if (playerWindow.playing){
+ this.ytService.pauseVideo(playerWindow.player);
+ }
+ }
+
+ changeVideo(playerId: string, videoId: string, dataExtractor: Observable<any>) {
+ const playerWindow = this.windowById(playerId);
+ let videoData: any;
+ var videoFound = playerWindow.videos.find((val, key, number) => {
+ const sub = dataExtractor.subscribe((next) => {
+ videoData = next(val);
+ }, (err) => {
+ console.log(err);
+ }, () => { });
+ sub.unsubscribe();
+ if (videoData.videoId === videoId)
+ return true;
+ return false;
+ });
+
+ if (typeof videoData !== undefined && videoData) {
+ this.ngRedux.dispatch({
+ type: YOUTUBE_WINDOW_ACTIONS.VIDEO_CHANGED,
+ payload: {
+ playerId: playerId,
+ videoId: videoData.videoId,
+ videoTitle: videoData.title,
+ imgUrl: videoData.imgUrl,
+ playing: false
+ }
+ });
+ } else {
+ this.ngRedux.dispatch({
+ type: YOUTUBE_WINDOW_ACTIONS.VIDEO_CHANGED_ERROR,
+ payload: {
+ playerId: playerId,
+ }
+ });
+ }
  }
 
  startVideo(playerId: string) {
@@ -115,16 +195,6 @@ export class YoutubeWindowActions {
  });
  }
 
- stopVideo(playerId: string) {
- const window = this.windowById(playerId);
- this.ngRedux.dispatch({
- type: YOUTUBE_WINDOW_ACTIONS.VIDEO_STOPED,
- payload: {
- playerId: playerId,
- playing: false
- }
- });
- }
 
  private windowById(playerId: string) {
  const state = this.ngRedux.getState();
@@ -135,7 +205,6 @@ export class YoutubeWindowActions {
  return playerWindow;
  }
  }
-
 }
 
 export interface IYoutubeSearch {

src/RadioWatch/ClientApp/app/containers/display/test-display.css

@@ -0,0 +1,32 @@
+.row-centered {
+ text-align:center;
+}
+.col-centered {
+ display:inline-block;
+ float:none;
+ /* reset the text-align */
+ text-align:left;
+ /* inline-block space fix */
+ margin-right:-4px;
+}
+
+.flex-column {
+ display: flex;
+ flex-flow: column;
+}
+
+.flex-row {
+ display: flex;
+ flex-flow: row;
+}
+
+.flex-center {
+ display: flex;
+ justify-content: center;
+}
+
+.flex-container {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+}

src/RadioWatch/ClientApp/app/containers/display/test-display.html

@@ -0,0 +1,9 @@
+ <h1>Video</h1>
+<div class="flex-container">
+ <div class="flex-column">
+ <div class="flex-center">
+ <youtube-adapter>
+ </youtube-adapter>
+ </div>
+ </div>
+</div>

src/RadioWatch/ClientApp/app/containers/display/test-display.ts

@@ -2,11 +2,8 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
  selector: 'test-display',
- template: `
- <h1>Video</h1>
- <youtube-adapter>
- </youtube-adapter> 
- `
+ template: require('./test-display.html'),
+ styles: [require('./test-display.css')]
 })
 export class TestDisplayComponent implements OnInit {
  constructor() { }

src/RadioWatch/ClientApp/app/containers/grid-remote/phalanx-remote-grid-expansion.css

@@ -0,0 +1,11 @@
+.row-centered {
+ text-align:center;
+}
+.col-centered {
+ display:inline-block;
+ float:none;
+ /* reset the text-align */
+ text-align:left;
+ /* inline-block space fix */
+ margin-right:-4px;
+}

src/RadioWatch/ClientApp/app/containers/grid-remote/phalanx-remote-grid-expansion.html

@@ -1 +1,8 @@
-<youtube-adapter></youtube-adapter>
+<div class="container-fluid">
+ <div class="row row-centered">
+ <div class="col-centered">
+ <youtube-adapter [searchTerm]="searchTerm">
+ </youtube-adapter>
+ </div>
+ </div>
+</div>

src/RadioWatch/ClientApp/app/containers/grid-remote/phalanx-remote-grid-expansion.ts

@@ -2,12 +2,14 @@ import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
  selector: 'phx-rmt-grid-expansion',
- template: require('./phalanx-remote-grid-expansion.html')
+ template: require('./phalanx-remote-grid-expansion.html'),
+ styles: [require('./phalanx-remote-grid-expansion.css')]
 })
 export class PhalanxRemoteGridExpansionComponent implements OnInit {
  constructor() { }
-
- //@Input() expanded: boolean;
-
- ngOnInit() { }
+ @Input() rowData: any;
+ searchTerm: string;
+ ngOnInit() { 
+ this.searchTerm = this.rowData.data.artistName + " " + this.rowData.data.trackName; 
+ }
 }

src/RadioWatch/ClientApp/app/containers/grid-remote/phalanx-remote-grid-ui.html

@@ -23,7 +23,7 @@
 
 <table *ngFor="let c of displayData; let i = index;" class="table">
  <tr *ngIf="c.data.isExpansionRowPhxRmtGrid">
- <phx-rmt-grid-expansion></phx-rmt-grid-expansion>
+ <phx-rmt-grid-expansion [rowData]="displayData.get(i-1)" ></phx-rmt-grid-expansion>
  </tr>
  <td *ngIf="!c.data.isExpansionRowPhxRmtGrid">
  <a (click)="expandOrCollapseRow(c,i)"> <i class="glyphicon glyphicon-resize-vertical"></i></a>

src/RadioWatch/ClientApp/app/containers/grid/phalanx-grid-expansion.html

@@ -1 +1,2 @@
-<youtube-adapter></youtube-adapter>
+<youtube-adapter-scroll>
+</youtube-adapter-scroll>

src/RadioWatch/ClientApp/app/containers/grid/phalanx-grid-expansion.ts

@@ -2,12 +2,10 @@ import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
  selector: 'phx-grid-expansion',
- template: require('./phalanx-grid-expansion.html')
+ template: require('./phalanx-grid-expansion.html'),
 })
 export class PhalanxGridExpansionComponent implements OnInit {
  constructor() { }
 
- //@Input() expanded: boolean;
-
  ngOnInit() { }
 }

src/RadioWatch/ClientApp/app/containers/index.ts

@@ -20,7 +20,8 @@ export {
 export {
  YoutubeEmbedComponent,
  YoutubeWindowComponent,
- YoutubeAdapterComponent
+ YoutubeAdapterComponent,
+ YoutubeAdapterScrollComponent
 } from './youtube'
 export {
  TestDisplayComponent

src/RadioWatch/ClientApp/app/containers/youtube/index.ts

@@ -1,3 +1,4 @@
 export { YoutubeWindowComponent } from './youtube-window';
 export { YoutubeEmbedComponent } from './youtube-embed';
-export { YoutubeAdapterComponent } from './youtube-adapter';
+export { YoutubeAdapterComponent } from './youtube-adapter';
+export { YoutubeAdapterScrollComponent } from './youtube-adapter-scroll';

src/RadioWatch/ClientApp/app/containers/youtube/youtube-adapter-scroll.css

@@ -0,0 +1,71 @@
+.flex-column {
+ display: flex;
+ flex-flow: column;
+}
+
+.flex-row {
+ display: flex;
+ flex-flow: row;
+}
+
+.flex-center {
+ display: flex;
+ justify-content: center;
+}
+
+.flex-container {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+}
+
+.image-wrap {
+ position: relative;
+ display: inline-block;
+}
+
+.empty-block {
+ position: relative;
+ display: inline-block;
+ height: 200px; 
+ width: 356px;
+}
+
+
+.clear-gif {
+ background-image: url("../../img/clear.gif");
+ background-size: 200px 356px;
+}
+
+
+.perspective-right {
+ -webkit-perspective: 400px;
+ -moz-perspective: 400px; 
+ width:356px;
+ height:200px;
+ float:left;
+}
+.transform-right{
+
+ width:100%;
+ height:100%;
+ /*overflow:scroll;*/
+ -webkit-transform: rotateX(0deg) rotateY(-20deg) translateZ(-20px) translateX(-10px); 
+ -moz-transform: rotateX(0deg) rotateY(-20deg) translateZ(-20px) translateX(-10px); 
+}
+
+.perspective-left {
+ -webkit-perspective: 400px;
+ -moz-perspective: 400px; 
+ width:356px;
+ height:200px;
+ float:left;
+}
+.transform-left{
+
+ width:100%;
+ height:100%;
+ /*overflow:scroll;*/
+ -webkit-transform: rotateX(0deg) rotateY(20deg) translateZ(-20px) translateX(10px); 
+ -moz-transform: rotateX(0deg) rotateY(20deg) translateZ(-20px) translateX(10px);
+}