Merge pull request #48 from NathanaelA/textureview

Revamped Android Video player to use TextureView rather than SurfaceView
nstudio · Dec 15, 2016 · 925d037 · 925d037
2 parents 6150118 + e07650e
commit 925d037
Show file tree

Hide file tree

Showing 4 changed files with 433 additions and 131 deletions.
diff --git a/demo/app/app.css b/demo/app/app.css
@@ -4,6 +4,7 @@
     margin: 20;
 }
 
+
 button {
     horizontal-align: center;
 }
@@ -12,6 +13,7 @@ button {
     font-size: 20;
     color: #284848;
     horizontal-align: center;
+    margin-right: 5;
 }
 
 ActionBar {

diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
@@ -4,17 +4,17 @@
   <ActionBar title="Native Video" />
   <ScrollView>
     <StackLayout>
-      <StackLayout orientation="horizontal" margin="10">
+        <GridLayout rows="auto" columns="auto,*,auto,auto" margin="10">
+
         <Label text="Current Time: " textWrap="true" />
-        <Label text="{{ currentTime }}" class="message" textWrap="true" />
-      </StackLayout>
-      <StackLayout orientation="horizontal" margin="10">
-        <Label text="Video Duration: " textWrap="true" />
-        <Label text="{{ videoDuration }}" class="message" textWrap="true" />
-      </StackLayout>
-      <GridLayout rows="*" columns="*, *">
-        <Label text="Label On Top of Video View" row="0" colSpan="2" color="#fff" horizontalAlignment="center" />
-        <Video:Video id="nativeVideoPlayer" controls="true" finished="{{ videoFinished }}" loop="true" autoplay="false" height="280" src="~/videos/big_buck_bunny.mp4" row="0" colSpan="2" />
+        <Label col="1" text="{{ currentTime }}" class="message" textWrap="true" />
+
+        <Label col="2" text="Video Duration: " textWrap="true" />
+        <Label col="3" text="{{ videoDuration }}" class="message" textWrap="true" />
+        </GridLayout>
+      <GridLayout rows="*" columns="*, *" backgroundColor="#000000">
+        <Video:Video id="nativeVideoPlayer" controls="true"  loadingComplete="{{ videoCompleted }}" finished="{{ videoFinished }}" loop="false" autoplay="false" height="280" src="~/videos/big_buck_bunny.mp4" row="0" colSpan="2"/>
+        <Label text="Label On Top of Video View" row="0" colSpan="2" color="#fff" horizontalAlignment="center"/>
       </GridLayout>
       <StackLayout orientation="horizontal">
         <Button text="Pause" width="33%" tap="{{ pauseVideo }}" />
@@ -28,6 +28,8 @@
         <Button text="UnMute" width="33%" tap="{{ unmuteVideo }}" />
         <Button text="Go to 30 seconds" width="33%" tap="{{ goToTime }}" />
       </StackLayout>
+
+      <Button text="Animate" width="33%" tap="{{ animate }}"/>
     </StackLayout>
   </ScrollView>
 </Page>

diff --git a/demo/app/main-view-model.ts b/demo/app/main-view-model.ts
@@ -11,25 +11,27 @@ export class HelloWorldModel extends Observable {
   public currentTime: any;
   public videoDuration: any;
   private _videoPlayer: Video;
+  private completed: boolean;
 
   constructor(mainpage: Page) {
     super();
 
+    this.completed = false;
     this._videoPlayer = <Video>mainpage.getViewById('nativeVideoPlayer');
     this.currentTime = '';
     this.videoDuration = '';
-    this.getVideoDuration();
     this.trackVideoCurrentPosition();
   }
 
   /**
    * Video Finished callback
    */
   public videoFinished(args) {
-    console.log('video finished event executed');
+    this.completed = true;    
   }
 
 
+
   /**
    * Pause the video
    */
@@ -43,7 +45,7 @@ export class HelloWorldModel extends Observable {
    */
   public playVideo() {
     this._videoPlayer.play();
-    this.set('videoDuration', this._videoPlayer.getDuration());
+    this.completed = false;
   }
 
 
@@ -79,6 +81,44 @@ export class HelloWorldModel extends Observable {
   }
 
 
+  public animate() {
+    console.log("Animation");
+
+    const enums = require("ui/enums");
+    this._videoPlayer.animate({
+      rotate: 360,
+      duration: 3000,
+      curve: enums.AnimationCurve.spring
+    }).then( () => {
+      return this._videoPlayer.animate({
+        rotate: 0,
+        duration: 3000,
+        curve: enums.AnimationCurve.spring
+      });
+    }).then( () => {
+        return this._videoPlayer.animate({
+           scale: {x: .5, y: .5},
+           duration: 1000,
+           curve: enums.AnimationCurve.spring
+         });
+
+    }).then( () => {
+          return this._videoPlayer.animate({
+            scale: {x: 1.5, y: 1.5},
+            duration: 3000,
+            curve: enums.AnimationCurve.spring
+          });
+    }).then( () => {
+      return this._videoPlayer.animate({
+        scale: {x: 1.0, y: 1.0},
+        duration: 3000,
+        curve: enums.AnimationCurve.spring
+      });
+
+    });
+
+  }
+
   public muteVideo() {
     this._videoPlayer.mute(true);
   }
@@ -118,13 +158,19 @@ export class HelloWorldModel extends Observable {
 
 
   private trackVideoCurrentPosition(): number {
-    // if (isAndroid) {
     let trackInterval = setInterval(() => {
-      var x = this._videoPlayer.getCurrentTime();
+      let x,y;
+      if (this.completed) {
+        x = "";
+        y = "";
+      } else {
+        x = this._videoPlayer.getCurrentTime();
+        y = this._videoPlayer.getDuration();
+      }
       this.set('currentTime', x);
+      this.set('videoDuration', y);
     }, 200);
     return trackInterval;
-    // }
 
   }