From 502e45c5f2cc515b310ee4c494c5dfb07282c064 Mon Sep 17 00:00:00 2001
From: Nikolai Kristiansen <nikolaik@gmail.com>
Date: Thu, 19 May 2011 02:32:00 +0200
Subject: [PATCH] started with video

---
 oliver_screen/static/yt.html                  | 48 +++++++++++++++++++
 oliver_screen/static/yt.js                    | 45 +++++++++++++++++
 .../templates/public/now_playing.html         |  8 +++-
 oliver_screen/tracks/views.py                 |  9 +++-
 4 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 oliver_screen/static/yt.html
 create mode 100644 oliver_screen/static/yt.js

diff --git a/oliver_screen/static/yt.html b/oliver_screen/static/yt.html
new file mode 100644
index 0000000..d01a901
--- /dev/null
+++ b/oliver_screen/static/yt.html
@@ -0,0 +1,48 @@
+<html>
+  <body>
+    <!-- 1. The <div> tag will contain the <iframe> (and video player) -->
+    <div id="player"></div>
+
+    <script>
+      // 2. This code loads the IFrame Player API code asynchronously.
+      var tag = document.createElement('script');
+      tag.src = "http://www.youtube.com/player_api";
+      var firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+      // 3. This function creates an <iframe> (and YouTube player)
+      //    after the API code downloads.
+      var player;
+      function onYouTubePlayerAPIReady() {
+        player = new YT.Player('player', {
+          height: '390',
+          width: '640',
+          videoId: 'u1zgFlCw8Aw',
+          controls: 0,
+          border: 0,
+          events: {
+            'onReady': onPlayerReady,
+            'onStateChange': onPlayerStateChange
+          }
+        });
+      }
+
+      // 4. The API will call this function when the video player is ready.
+      function onPlayerReady(event) {
+        event.target.playVideo();
+      }
+
+      // 5. The API calls this function when the player's state changes.
+      //    The function indicates that when playing a video (state=1),
+      //    the player should play for six seconds and then stop.
+      function onPlayerStateChange(event) {
+        if (event.data == YT.PlayerState.ENDED) {
+            // restart timer
+        }
+      }
+      function stopVideo() {
+        player.stopVideo();
+      }
+    </script>
+  </body>
+</html>
diff --git a/oliver_screen/static/yt.js b/oliver_screen/static/yt.js
new file mode 100644
index 0000000..f9db167
--- /dev/null
+++ b/oliver_screen/static/yt.js
@@ -0,0 +1,45 @@
+/* pasted from youtube API docs: http://code.google.com/apis/youtube/iframe_api_reference.html#Loading_a_Video_Player */
+
+function insertYouTubeIFrame() {
+    // 2. This code loads the IFrame Player API code asynchronously.
+    var tag = document.createElement('script');
+    tag.src = "http://www.youtube.com/player_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+}
+// 3. This function creates an <iframe> (and YouTube player)
+//    after the API code downloads.
+var player;
+function onYouTubePlayerAPIReady() {
+    player = new YT.Player('player', {
+        height: '390',
+        width: '640',
+        videoId: 'u1zgFlCw8Aw',
+        events: {
+            'onReady': onPlayerReady,
+            'onStateChange': onPlayerStateChange
+        }
+    });
+}
+
+// 4. The API will call this function when the video player is ready.
+function onPlayerReady(event) {
+    event.target.playVideo();
+}
+
+// 5. The API calls this function when the player's state changes.
+//    The function indicates that when playing a video (state=1),
+//    the player should play for six seconds and then stop.
+var done = false;
+
+function onPlayerStateChange(event) {
+    if (event.data == YT.PlayerState.PLAYING && !done) {
+        setTimeout(stopVideo, 6000);
+        done = true;
+    }
+}
+
+function stopVideo() {
+    player.stopVideo();
+}
diff --git a/oliver_screen/templates/public/now_playing.html b/oliver_screen/templates/public/now_playing.html
index cf0a098..c988d3f 100644
--- a/oliver_screen/templates/public/now_playing.html
+++ b/oliver_screen/templates/public/now_playing.html
@@ -1,6 +1,10 @@
 {% if now_playing %}
-    {% if now_playing.image %}
-        <img src="{{ now_playing.image}}" class="now_playing" /><br />
+    {% if now_playing.video %}
+        <iframe src="{{ now_playing.video }}" width="100%" height="100%" /> 
+    {% else %}
+        {% if now_playing.image %}
+            <img src="{{ now_playing.image}}" class="now_playing" /><br />
+        {% endif %}
     {% endif %}
     <img src="{{ MEDIA_URL}}eq.gif" /> {{ now_playing.artist}} - {{ now_playing.title }} ♪♫<br />
 {% else %}
diff --git a/oliver_screen/tracks/views.py b/oliver_screen/tracks/views.py
index d5f3a03..270167c 100644
--- a/oliver_screen/tracks/views.py
+++ b/oliver_screen/tracks/views.py
@@ -35,12 +35,19 @@ def get_now_playing(request):
     user = get_lastfmuser()
     track = user.get_now_playing()
     now_playing = []
+    video = ""
     if not track is None:
         artist = track.get_artist()
         image = artist.get_images(limit=1)
         if len(image) > 0:
             image = image[0].sizes.original
-        now_playing = { 'artist': artist.get_name(), 'title': track.get_title(), 'image': image}
+
+        now_playing = {
+            'artist': artist.get_name(),
+            'title': track.get_title(),
+            'image': image,
+            'video': video
+        }
     return render_to_response("public/now_playing.html", {'now_playing':now_playing}, context_instance=RequestContext(request));
 
 # Mock views