[clutter-gst] examples: add a couple of javascript examples

[Lionel Landwerlin <llandwerlin src gnome org>]

commit f8dfefa8f00a09311b6346518e22ed3ca35c2e33
Author: Lionel Landwerlin <llandwerlin gmail com>
Date:   Mon Mar 18 16:12:41 2013 +0000

    examples: add a couple of javascript examples

 examples/Makefile.am   |   12 ++-
 examples/video-flip.js |  241 ++++++++++++++++++++++++++++++++++++++++++++++++
 examples/video-wall.js |  181 ++++++++++++++++++++++++++++++++++++
 3 files changed, 430 insertions(+), 4 deletions(-)
---
diff --git a/examples/Makefile.am b/examples/Makefile.am
index 6d60512..c9b1130 100644
--- a/examples/Makefile.am
+++ b/examples/Makefile.am
@@ -34,7 +34,11 @@ video_sink_navigation_LDFLAGS = \
     $(GST_LIBS)   \
     $(top_builddir)/clutter-gst/libclutter-gst- CLUTTER_GST_MAJORMINOR@.la
 
-EXTRA_DIST = media-actions-pause.png  \
-             media-actions-start.png  \
-             vid-panel.png            \
-             README
+EXTRA_DIST = \
+       media-actions-pause.png \
+       media-actions-start.png \
+       vid-panel.png           \
+       video-wall.js           \
+       video-flip.js           \
+       README                  \
+       $(NULL)
diff --git a/examples/video-flip.js b/examples/video-flip.js
new file mode 100644
index 0000000..3f2e074
--- /dev/null
+++ b/examples/video-flip.js
@@ -0,0 +1,241 @@
+/*
+ * Copyright (C) 2013 Intel Corporation
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General
+ * Public License along with this library; if not, write to the
+ * Free Software Foundation, Inc., 59 Temple Place, Suite 330,
+ * Boston, MA 02111-1307, USA.
+ */
+
+(function() {
+    if ( typeof Object.prototype.uniqueId == "undefined" ) {
+        var id = 0;
+        Object.prototype.uniqueId = function() {
+            if ( typeof this.__uniqueid == "undefined" ) {
+                this.__uniqueid = ++id;
+            }
+            return this.__uniqueid;
+        };
+    }
+})();
+
+const Lang = imports.lang;
+const Mainloop = imports.mainloop;
+const Gettext = imports.gettext;
+const _ = imports.gettext.gettext;
+const Tweener = imports.tweener.tweener;
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Clutter = imports.gi.Clutter;
+const ClutterGst = imports.gi.ClutterGst;
+const Cairo = imports.cairo;
+const Mx = imports.gi.Mx;
+
+const COLUMNS = 3;
+const ROWS = 3;
+
+if (ARGV.length < 2)
+    throw "Need 2 argument : video-wall.js videofile1 videofile2";
+
+Clutter.init(null, null);
+ClutterGst.init(null, null);
+
+
+let stage = new Clutter.Stage();
+stage.set_background_color(new Clutter.Color({ red: 0,
+                                               green: 0,
+                                               blue: 0,
+                                               alpha: 0xff }));
+stage.connect('destroy',
+              Lang.bind(this, function() { Clutter.main_quit(); }));
+
+player1 = new ClutterGst.Playback();
+player1.set_filename(ARGV[0]);
+player1.set_audio_volume(0);
+player1.set_progress(0.20);
+
+player2 = new ClutterGst.Playback();
+player2.set_filename(ARGV[1]);
+player2.set_audio_volume(0);
+player2.set_progress(0.20);
+
+let animateActor = function(actor, params) {
+    let diffPropName = null;
+
+    actor.save_easing_state();
+    actor.set_easing_duration(params.duration);
+    actor.set_easing_mode(params.mode);
+
+    for (let p in params.properties) {
+        let t = actor.get_transition(p);
+        if (t != null && t.is_playing())
+            return true;
+
+        if (actor[p] != params.properties[p]) {
+            actor[p] = params.properties[p];
+            diffPropName = p;
+        }
+    }
+
+    actor.restore_easing_state();
+
+    if (diffPropName != null && params.onCompleted) {
+        let transition = actor.get_transition(diffPropName);
+        actor.connect('transition-stopped::' + diffPropName,
+                      Lang.bind(params.scope, function() {
+                          params.onCompleted(actor);
+                      }));
+    }
+
+    return (diffPropName != null);
+};
+
+let actors = [];
+
+let positionActor = function(actorId) {
+    let actor = actors[actorId % actors.length];
+
+    let stageWidth = stage.get_width();
+    let stageHeight = stage.get_height();
+
+    animateActor(actor,
+                 { duration: 500,
+                   mode: Clutter.AnimationMode.EASE_OUT_CUBIC,
+                   properties: {
+                       'x': actor._myXPos * actor.width + (stageWidth / 2) - (COLUMNS * actor.width) / 2,
+                       'y': actor._myYPos * actor.height + (stageHeight / 2) - (ROWS * actor.height) / 2,
+                   },
+                 });
+    animateActor(actor._backActor,
+                 { duration: 500,
+                   mode: Clutter.AnimationMode.EASE_OUT_CUBIC,
+                   properties: {
+                       'x': actor._myXPos * actor.width + (stageWidth / 2) - (COLUMNS * actor.width) / 2,
+                       'y': actor._myYPos * actor.height + (stageHeight / 2) - (ROWS * actor.height) / 2,
+                   },
+                 });
+};
+
+let positionActors = function() {
+    for (let i = 0; i < actors.length; i++)
+        positionActor(i);
+};
+
+for (let i = 0; i < ROWS; i++) {
+    for (let j = 0; j < COLUMNS; j++) {
+        let input = new Clutter.ActorBox({ x1: j / COLUMNS,
+                                           x2: (j + 1) / COLUMNS,
+                                           y1: i / ROWS,
+                                           y2: (i + 1) / ROWS,
+                                         })
+        let actor =
+            new ClutterGst.Crop({ reactive: true,
+                                  cull_backface: true,
+                                  pivot_point: new Clutter.Point({ x: 0.5,
+                                                                   y: 0.5 }),
+                                  width: 200,
+                                  height: 200,
+                                  x: -200,
+                                  y: -200,
+                                  input_region: input,
+                                  player: player1,
+                                });
+        actor._backActor =
+            new ClutterGst.Crop({ reactive: false,
+                                  cull_backface: true,
+                                  pivot_point: new Clutter.Point({ x: 0.5,
+                                                                   y: 0.5 }),
+                                  rotation_angle_y: 180,
+                                  width: 200,
+                                  height: 200,
+                                  x: -200,
+                                  y: -200,
+                                  input_region: input,
+                                  player: player2,
+                                });
+        stage.add_child(actor);
+        stage.add_child(actor._backActor);
+
+        actor._myXPos = j;
+        actor._myYPos = i;
+        actor._backActor._myXPos = j;
+        actor._backActor._myYPos = i;
+
+        actors.push(actor);
+
+        let animEnterParams = {
+            duration: 100,
+            mode: Clutter.AnimationMode.EASE_OUT_CUBIC,
+            properties: {
+                'rotation-angle-y': 180,
+            },
+            scope: this,
+            onCompleted: function(actor) {
+                if (actor._nextParams) {
+                    actor._inAnimation = animateActor(actor, actor._nextParams);
+                    actor._nextParams = null;
+                } else {
+                    actor._inAnimation = false;
+                }
+            },
+        };
+        let animLeaveParams = {
+            duration: 100,
+            mode: Clutter.AnimationMode.EASE_OUT_CUBIC,
+            properties: {
+                'rotation-angle-y': 0,
+            },
+            scope: this,
+            onCompleted: function(actor) {
+                if (actor._nextParams) {
+                    actor._inAnimation = animateActor(actor, actor._nextParams);
+                    actor._nextParams = null;
+                } else {
+                    actor._inAnimation = false;
+                }
+            },
+        };
+
+        actor.connect('enter-event', Lang.bind(this, function(actor, event) {
+            if (!actor._inAnimation) {
+                actor._inAnimation = animateActor(actor, animEnterParams);
+                actor._backActor._inAnimation = animateActor(actor._backActor, animLeaveParams);
+            } else {
+                actor._nextParams = animEnterParams;
+                actor._backActor._nextParams = animLeaveParams;
+            }
+        }));
+        actor.connect('leave-event', Lang.bind(this, function(actor, event) {
+            if (!actor._inAnimation) {
+                actor._inAnimation = animateActor(actor, animLeaveParams);
+                actor._backActor._inAnimation = animateActor(actor._backActor, animEnterParams);
+            } else {
+                actor._nextParams = animLeaveParams;
+                actor._backActor._nextParams = animEnterParams;
+            }
+        }));
+    }
+}
+
+stage.connect('allocation-changed', Lang.bind(this, function() {
+    positionActors();
+}));
+stage.set_user_resizable(true);
+
+player1.set_playing(true);
+player2.set_playing(true);
+
+stage.show();
+
+Clutter.main();
diff --git a/examples/video-wall.js b/examples/video-wall.js
new file mode 100644
index 0000000..66e5e82
--- /dev/null
+++ b/examples/video-wall.js
@@ -0,0 +1,181 @@
+/*
+ * Copyright (C) 2013 Intel Corporation
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General
+ * Public License along with this library; if not, write to the
+ * Free Software Foundation, Inc., 59 Temple Place, Suite 330,
+ * Boston, MA 02111-1307, USA.
+ */
+
+const Lang = imports.lang;
+const Mainloop = imports.mainloop;
+const Gettext = imports.gettext;
+const _ = imports.gettext.gettext;
+const Tweener = imports.tweener.tweener;
+
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Clutter = imports.gi.Clutter;
+const ClutterGst = imports.gi.ClutterGst;
+const Cairo = imports.cairo;
+const Mx = imports.gi.Mx;
+
+const COLUMNS = 3;
+const ROWS = 3;
+
+if (ARGV.length < 1)
+    throw "Need 1 argument : video-wall.js videofile";
+
+Clutter.init(null, null);
+ClutterGst.init(null, null);
+
+
+let stage = new Clutter.Stage();
+stage.set_background_color(new Clutter.Color({ red: 0,
+                                               green: 0,
+                                               blue: 0,
+                                               alpha: 0xff }));
+stage.connect('destroy',
+              Lang.bind(this, function() { Clutter.main_quit(); }));
+
+player = new ClutterGst.Playback();
+player.set_filename(ARGV[0]);
+player.set_audio_volume(0);
+player.set_progress(0.20);
+
+let actors = [];
+
+let repositionActor = function(actorId, duration) {
+    let actor = actors[actorId % actors.length];
+    let subActor = actor.get_child_at_index(0);
+
+    let stageWidth = stage.get_width();
+    let stageHeight = stage.get_height();
+
+    actor.x = stageWidth / 2 - actor.width / 2;
+    actor.y = stageHeight / 2 - actor.height / 2;
+
+    let initialYRotation = 45.0;
+    let initialXRotation = -45.0;
+
+    actor.get_parent().set_child_below_sibling(actor, null);
+
+    actor.save_easing_state();
+    actor.set_easing_duration(duration);
+    actor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_CUBIC);
+
+    subActor.save_easing_state();
+    subActor.set_easing_duration(duration);
+    subActor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_CUBIC);
+
+    actor.translation_x = 0;
+    actor.translation_y = 0;
+
+    actor.set_rotation_angle(Clutter.RotateAxis.Y_AXIS,
+                             initialYRotation - 90 * actor._myXPos / (COLUMNS - 1));
+    actor.set_rotation_angle(Clutter.RotateAxis.X_AXIS,
+                             initialXRotation + 90 * actor._myYPos / (ROWS - 1));
+    subActor.translation_z = -100 * (1 + COLUMNS);
+
+    subActor.restore_easing_state();
+    actor.restore_easing_state();
+};
+
+let pushActorToFront = function(actorId, duration) {
+    let actor = actors[actorId % actors.length];
+    let subActor = actor.get_child_at_index(0);
+
+    let stageWidth = stage.get_width();
+    let stageHeight = stage.get_height();
+
+    actor.save_easing_state();
+    actor.set_easing_duration(duration);
+    actor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_CUBIC);
+
+    subActor.save_easing_state();
+    subActor.set_easing_duration(duration);
+    subActor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_CUBIC);
+
+    actor.set_rotation_angle(Clutter.RotateAxis.Y_AXIS, 0);
+    actor.set_rotation_angle(Clutter.RotateAxis.X_AXIS, 0);
+
+    actor.translation_x = actor._myXPos * actor.width +
+        (stageWidth / 2) - (COLUMNS * actor.width) / 2 - actor.x;
+    actor.translation_y = actor._myYPos * actor.height +
+        (stageHeight / 2) - (ROWS * actor.height) / 2 - actor.y;
+    subActor.translation_z = -50;
+
+    subActor.restore_easing_state();
+    actor.restore_easing_state();
+};
+
+let repositionActors = function(duration) {
+    for (let i = 0; i < actors.length; i++) {
+        repositionActor(i, duration);
+    }
+};
+
+let pushActorsToFront = function(duration) {
+    for (let i = 0; i < actors.length; i++) {
+        pushActorToFront(i, duration);
+    }
+};
+
+
+for (let i = 0; i < ROWS; i++) {
+    for (let j = 0; j < COLUMNS; j++) {
+        let input = new Clutter.ActorBox({ x1: j / COLUMNS,
+                                           x2: (j + 1) / COLUMNS,
+                                           y1: i / ROWS,
+                                           y2: (i + 1) / ROWS,
+                                         })
+        let subActor = new ClutterGst.Crop({ width: 200,
+                                             height: 200,
+                                             player: player,
+                                             input_region: input,
+                                           });
+        let actor = new Clutter.Actor();
+        actor.add_child(subActor);
+
+        actor._myXPos = j;
+        actor._myYPos = i;
+
+        actor.set_pivot_point(actor._myXPos / (COLUMNS - 1),
+                              actor._myYPos / (ROWS - 1));
+
+        stage.add_child(actor);
+
+        actors.push(actor);
+    }
+}
+
+stage.connect('allocation-changed', Lang.bind(this, function() {
+    pushActorsToFront(0);
+}));
+stage.set_user_resizable(true);
+
+player.set_playing(true);
+
+const ANIM_TIMEOUT = 1000;
+
+let inv = false;
+Mainloop.timeout_add(ANIM_TIMEOUT + 500, Lang.bind(this, function() {
+    inv ? repositionActors(ANIM_TIMEOUT) : pushActorsToFront(ANIM_TIMEOUT);
+    inv = !inv;
+    return true;
+}));
+
+
+stage.show();
+
+Clutter.main();