Commits

Anonymous committed c706b62

Now click 'play' will show player just under the file name

  • Participants
  • Parent commits 9d33f93

Comments (0)

Files changed (6)

skypieamc/public/css/list.css

   padding-right: 3px;
 }
 
-#file-list div.download,
-#file-list div.play {
+#file-list div.btn_download,
+#file-list div.btn_play {
   font-size: 108%;
   font-weight: bold;
   text-align: right;
   padding-left: 0;
 }
 
-#file-list div.download span.label,
-#file-list div.play span.label {
+#file-list div.btn_download span.label,
+#file-list div.btn_play span.label {
   position: relative;
   top: -10px;
 }
 
+#file-list tr.player-container {
+  background-color: #000;
+  border-top: none;
+  border-bottom: none;
+}
+
+#file-list tr.player-container a {
+  display: block;
+  width: 520px;
+  height: 330px;
+  text-align: center;
+  margin: auto;
+}
+
+
 #pager {
   color: #7A2433;
   font-size: 108%;

skypieamc/public/js/list.js

+SMC.Y.use('node', function(Y) {
+  Y.all('#file-list tr.hidden').each(function(tr, tr_index, containers) {
+    var prev_tr = tr.previous();
+    prev_tr.get('children').each(function(td/*, i, l*/) {
+      var btn_play = td.one('div.btn_play');
+      if (btn_play) {
+        btn_play.removeClass('hidden');
+        btn_play.one('a').on('click', function(e) {
+          e.preventDefault();
+          for (var i = 0; i < containers.size(); i++) {
+            if (i !== tr_index) {
+              var c = containers.item(i);
+              if (!c.hasClass('hidden')) {
+                c.addClass('hidden');
+                break;
+              }
+            }
+          }
+          tr.toggleClass('hidden');
+          flowplayer('player-' + prev_tr.get('id'), '/flowplayer/flowplayer-3.1.5.swf', {
+            clip: {
+              autoPlay: false,
+              scaling: 'fit'
+            }
+          }).load();
+        });
+      }
+    });
+  });
+});

skypieamc/templates/base.mako

     )}
 </%def>
 
-<%def name="js()"></%def>
+<%def name="js()">
+  ${h.javascript_link(
+      h.url_for('/yui/3.0.0/yui/yui-min.js'),
+      h.url_for('/js/skypieamc.js'),
+    )}
+</%def>
 
 <%def name="header()">
   <div class="yui-gd container">

skypieamc/templates/derived/file/list.mako

   ${h.stylesheet_link(h.url_for('/css/list.css'))}
 </%def>
 
+<%def name="js()">
+  ${parent.js()}
+  ${h.javascript_link(h.url_for('/flowplayer/flowplayer-3.1.4-min.js'),
+                      h.url_for('/js/list.js'))}
+</%def>
+
 %if len(c.paginator):
   <table id="file-list">
     <% count = 0 %>
     %for f in c.paginator:
       <tr id="${f.id}" class="${'odd' if count % 2 else 'even'}">
         <td class="file-info">${self.file_info(f)}</td>
-        <td>${self.play(f)}</td>
-        <td>${self.download(f)}</td>
+        <td>${self.btn_play(f)}</td>
+        <td>${self.btn_download(f)}</td>
       </tr>
+      %if f.playable is not None:
+        <tr id="player_container-${f.id}" class="player-container hidden">
+          <td colspan="3">
+            ${h.link_to(
+                f.name.encode('utf-8'), 
+                h.url_for(controller='file',
+                          action='download',
+                          id=f.id,
+                          playable='true'),
+                id='player-{0}'.format(f.id))}
+          </td>
+        </tr>
+      %endif
       <% count += 1 %>
     %endfor
   </table>
-  <div id="pager">${c.paginator.pager('$link_previous ~3~ $link_next')}</div>
+  <div id="pager">
+    ${c.paginator.pager('$link_previous ~3~ $link_next')}
+  </div>
 %else:
-  <p>No files have been uploaded yet, ${h.link_to('add one', h.url_for(controller='file', action='upload'))}?</p>
+  <p>No files have been uploaded yet,
+     ${h.link_to('add one',
+                 h.url_for(controller='file', action='upload'))}?</p>
 %endif
 
 <%def name="file_info(mfile)">
   ${h.image(h.url_for('/images/icon_{0}.png'.format(h.file_type(fname))), None)}
 </%def>
 
-<%def name="play(mfile)">
+<%def name="btn_play(mfile)">
   %if mfile.playable is not None:
     ${self._create_button(
         h.url_for(controller='file', action='play', id=mfile.id),
-        class_='play', 
+        h.url_for('/images/icon_play.png'),
+        class_='btn_play hidden', 
         label='Play'
       )}
   %endif
 </%def>
 
-<%def name="download(mfile)">
+<%def name="btn_download(mfile)">
   ${self._create_button(
       h.url_for(controller='file', action='download', id=mfile.id),
-      class_='download', 
+      h.url_for('/images/icon_download.png'),
+      class_='btn_download', 
       label='Download'
     )}
 </%def>
 
-<%def name="_create_button(url, class_, label)">
+<%def name="_create_button(url, img_url, class_, label)">
   <div class="${class_}">
     <a href="${url}">
-      ${h.image('/images/icon_{0}.png'.format(class_), None)}
+      ${h.image(img_url, None)}
       <span class="label">${label}</span>
     </a>
   </div>

skypieamc/templates/derived/file/play.mako

 <script type="text/javascript">
   flowplayer('flowplayer', '/flowplayer/flowplayer-3.1.5.swf', {
     clip: {
+      autoPlay: false,
       scaling: 'fit'
     }
   });

skypieamc/templates/derived/file/upload.mako

   ${h.stylesheet_link(h.url_for('/css/upload.css'))}
 </%def>
 
+<%def name="js()">
+  ${parent.js()}
+  ${h.javascript_link(h.url_for('/js/upload.js'))}
+</%def>
+
 ${h.form(
     h.url_for(controller='file', action='save'),
     method='post', multipart=True, id='file-uploader'
   ${h.image(h.url_for('/images/icon_info.png'), alt="")}
   <span id="text">Please select a file to upload!</span>
 </div>
-
-<%def name="js()">
-  ${h.javascript_link(h.url_for('/yui/3.0.0/yui/yui-min.js'),
-                      h.url_for('/js/skypieamc.js'),
-                      h.url_for('/js/upload.js'))}
-</%def>