☰

Dailymotion: BETA Included By Feature

...

当前为 2014-07-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @id             www.dailymotion.com-42e0c072-f078-4276-8f84-952524d36896@http://foobar.com/baz
  3. // @name           Dailymotion: BETA Included By Feature
  4. // @version        0.9.5
  5. // @namespace      http://foobar.com/baz
  6. // @author         David Toso
  7. // @description    ...
  8. // @include        http://www.dailymotion.com/video/*
  9. // @require        http://code.jquery.com/jquery-1.9.1.min.js
  10. // @run-at         document-end
  11. // ==/UserScript==
  12.  
  13. // TODO: 
  14. //  1. reverse order of lookup+render of playlist review. Instead do render (placeholder), lookup, re-place (preview & details)
  15.  
  16. (function($){
  17.   var doc = unsafeWindow.document;
  18.  
  19.   // Wait for element given by selector to become available
  20.   var waitFor = function(selector, cb) {
  21.     if ($(selector, doc).get(0)) return cb();
  22.     else setTimeout(function(){ waitFor(selector, cb); }, 200);
  23.   };
  24.  
  25.   // interate pair-wise through the given list
  26.   var iter_pairwise = function(list, pair_cb) {
  27.     var pair = [], i=0;
  28.     while (i<list.length) {
  29.       pair.push(list[i++]);
  30.       if (i < list.length) pair.push(list[i++]);
  31.       pair_cb(pair[0], pair[1]); pair = [];
  32.     }
  33.   };
  34.  
  35.   // Get useful details about the playlist
  36.   var getPlaylistDetails = function(playlist_id, playlist_title, playlist_owner, cb) {
  37.     GM_xmlhttpRequest({ 
  38.       method: 'GET',
  39.       url:    'http://www.dailymotion.com/playlist/'+playlist_id,
  40.       onload:  function (res) {
  41.  
  42.         // build DOM object for playlist page 
  43.         var listPage = $(res.responseText);
  44.  
  45.         // extract relevant info from DOM
  46. 				var listOwner   = $('div.mrg-btm-md.foreground2 a.link-on-hvr', listPage).html();
  47.         var listVideos;   res.responseText.replace(/(\d+) videos?/, function(_m, _nv) { listVideos = _nv; });
  48.         var listItem    = $('div.sd_video_listitem',listPage).eq(0);
  49. 				var gridItem    = $('div.sd_video_griditem',listPage).eq(0);
  50. 					
  51. 				var video_image = listItem.find('div.media-img a.preview_link img.preview').eq(0).attr('data-src') ||
  52.                           gridItem.find('div.media-img a.preview_link img.preview').eq(0).attr('data-src');
  53. 				var video_title = listItem.find('div.media-block a.link').eq(0).attr('title') ||
  54.                           gridItem.find('div.media-block a.link').eq(0).attr('title');
  55.  
  56.         // emit playlist information
  57.         cb({ playlist_id: playlist_id, title: playlist_title, owner: listOwner, size: listVideos }, /* returns: playlist:     { playlist_id, title, owner, size   } */
  58.            { preview: video_image, title: video_title });                       										/*          previewVideo: { title, previewImageURL            } */
  59.       }
  60.     });
  61.   }; 
  62.  
  63.   // Get N'th page of playlists (10 per page).
  64.   var getPlaylists = function(video_id, page_no, cb) {
  65.     GM_xmlhttpRequest({
  66.       method: "GET",
  67.       url: "https://api.dailymotion.com/video/"+video_id+"/playlists?page="+page_no+"&limit=10",
  68.       onload: function(res) {
  69.         var obj = JSON.parse(res.responseText);
  70.         cb(obj.list, (page_no > 1), obj.has_more); // returns: list, priorPages?, subsequentPages?
  71.       }
  72.     });
  73.   };
  74.  
  75.   // determine your username if logged in
  76.   var myUser; $('div.dm_login_info a.media-block',doc).each(function(){ $(this).attr('href').replace(/^\/(.*)/, function(_m, _usr) { myUser = _usr; }); });
  77.  
  78.   // fix tab styles (Dailymotion just plain broke this for all users)
  79.   $('head',doc).append('<style type="text/css"> ul.mo_tabs > li > a { position: relative; z-index: 9999; } </style>');
  80.  
  81.   // Render a single playlist preview inside the given elem
  82.   var display_playlist_preview = function(elem, playlist, preview) {
  83.     var ownerStyle = (myUser === playlist.owner) ? 'color: white; background-color: #0079B8; ' : 'color: #42AEDC';
  84.     elem.append(
  85.       '<table style="width: 293px; height: 85px; border-collapse: collapse; border: 0px; margin: 0px; margin-left: 6px; display:none"><tr>'+
  86.           '<td style="width:136px;"><a href="http://www.dailymotion.com/playlist/'+playlist.playlist_id+'" style="width: 136px;">'+
  87.                '<img style="width: 136px; height: 80px;" src="'+preview.preview+'" alt="'+preview.title+'"></a></td>'+
  88.           '<td align="left" valign="top" style="padding-left: 5px; width: 157px;">'+
  89.               '<a style="font-size: 12px; font-weight: bold; color: #0079B8" href="http://www.dailymotion.com/playlist/'+playlist.playlist_id+'">'+playlist.title+'</a><br>'+
  90.               '<span style="font-size: 11px; color: black;">by <a href="http://www.dailymotion.com/'+playlist.owner+'" style="'+ownerStyle+'">'+playlist.owner+'</a></span><br>'+
  91.               (playlist.size ? playlist.size+' video'+(playlist.size > 1 ? 's' : '') : '')+'</td>'+
  92.       '</tr></table>').children('table').fadeIn(1000);
  93.   };
  94.  
  95.   // Add playlist preview to container
  96.   var add_playlist_preview = function(container, pl_entry) {
  97.     if (pl_entry == undefined) return;
  98.     container.append('<div id="myPlaylists_pl_'+pl_entry.id+'" style="display: inline-block; width: 293px; margin: 0px; padding: 0px; "></div>');
  99.     getPlaylistDetails(pl_entry.id, pl_entry.name, pl_entry.owner, function(playlist, preview){  
  100.       display_playlist_preview($('#myPlaylists_pl_'+playlist.playlist_id, doc), playlist, preview); 
  101.     }); 
  102.   };
  103.  
  104.   // Add prev/next page navigation link
  105.   var add_navigation = function(container, elem, video_id, label, pageNo, loadingElem, prevElem, nextElem) {
  106.     elem.html('<a style="font-family: arial; font-size: 13px;" href="javascript:void(0)">'+label+'</a>').children('a').click(function(){
  107.       render_playlists_page(container, video_id, parseInt(pageNo) + 1, loadingElem, prevElem, nextElem);
  108.     });
  109.   };
  110.  
  111.   // Render a page of playlists previews
  112.   var render_playlists_page = function(container, video_id, pageNo, loadingElem) {
  113.     
  114.     // display loading indicator
  115.     loadingElem.html('<p>Loading<span style="text-decoration: blink">...</span></p>');                
  116.  
  117.     // get pageNo of full lists of playlists which include this video
  118.     getPlaylists(video_id, pageNo, function(list, canGoPrev, canGoNext){                              
  119.  
  120.       // panel layout
  121.       container.find('.myPlaylists_loading').remove();
  122.       container.find('.myPlaylists_listing').remove();
  123.       container.append('<ul class="myPlaylists_listing" style="margin-top: 10px"></ul>');
  124.       var listing = $('.myPlaylists_listing', doc); 
  125.   
  126.       // navigation interface
  127.       $('.myPlaylists_navigation').remove();
  128.       var navStyle = 'width: 595px; height: 15px; position: relative; top: 5px;';
  129.       listing.before('<table class="myPlaylists_navigation" style="'+navStyle+'"><tr><td align="left" style="padding-left: 5px;" class="myPlaylists_goBack"></td><td align="right" class="myPlaylists_goForward"></td></tr></table>');
  130.       listing.after('<table class="myPlaylists_navigation" style="'+navStyle+'"><tr><td align="left" style="padding-left: 5px;" class="myPlaylists_goBack"></td><td align="right" class="myPlaylists_goForward"></td></tr></table>');
  131.       var prevElem = container.find('.myPlaylists_goBack'), nextElem = container.find('.myPlaylists_goForward');
  132.       if (canGoPrev) add_navigation(container, prevElem, video_id, '<span class="pagination_arrow">◄</span> previous',   parseInt(pageNo) - 1, loadingElem, prevElem, nextElem);
  133.       if (canGoNext) add_navigation(container, nextElem, video_id, 'next <span class="pagination_arrow">►</span>', parseInt(pageNo) + 1, loadingElem, prevElem, nextElem);
  134.  
  135.       // add playlist previews in two columns of 5 videos each
  136.       iter_pairwise(list, function(left, right) { 
  137.         var li = $('<li style="margin-left: 10px; padding: 5px;"></li>', doc); 
  138.         listing.append(li); add_playlist_preview(li, left); add_playlist_preview(li, right);
  139.       });
  140.     });
  141.   };
  142.  
  143.   // when the video tabs are availale...
  144.   waitFor('.pl_video_tabs ul.mo_tabs', function(){
  145.  
  146.     // find tabs & corresponding panels
  147.     var tabs = $('.pl_video_tabs ul.mo_tabs', doc);
  148.     var panels = $('.pl_video_tabs', doc);
  149.  
  150.     // add new 'Included By' tab, and corresponding panel (myPanel)
  151. 		tabs.append('<li id="tab_myplaylists" class="pull-start mrg-end-lg"><a class="alt-link link-border-color-on-hvr" href="">Included By</li>');
  152.     panels.append('<div id="tab_myplaylists_content" class="pl_video_tabmyplaylists tab_content clearfix" style="display: none"></div>');
  153.     var myPanel = $('#tab_myplaylists_content', doc);
  154.  
  155.     // add title to new panel & loading message
  156.     myPanel.append('<h3 class="tab_title clearfix" style="clear:both; margin-left: 18px; font-weight: normal; font-size: 13px; color: #0079B8; font-family: arial;">All playlists which include this video</h3>');
  157.     myPanel.append('<p class="myPlaylists_loading"></p>');
  158.  
  159.     // get the video id for the current page!
  160.     var video_id; $('link[rel="canonical"]', doc).eq(0).attr('href').replace(/\/video\/([^_]+)/, function (_m, _vid) { video_id = _vid; });
  161.  
  162.     // render the first page of playlist previews
  163.     render_playlists_page(myPanel, video_id, 1, $('.myPlaylists_loading'));
  164.  
  165.  
  166.   }); // waitfor
  167. })(jQuery);
  168.  
  169.  
  170.