From 013fc1e8467d4b5a6bee829609ba4985ed12de1b Mon Sep 17 00:00:00 2001 From: lukeIam Date: Fri, 25 Oct 2013 20:16:34 +0200 Subject: [PATCH] Webserver: Add youtube and spotify links to the song details page --- Vocaluxe/Vocaluxe.csproj | 6 ++ Vocaluxe/Website/img/spotify.png | Bin 0 -> 4099 bytes Vocaluxe/Website/img/youtube.png | Bin 0 -> 3916 bytes Vocaluxe/Website/index.html | 12 ++++ Vocaluxe/Website/js/main.js | 118 +++++++++++++++++++++++++++++-- 5 files changed, 132 insertions(+), 4 deletions(-) create mode 100644 Vocaluxe/Website/img/spotify.png create mode 100644 Vocaluxe/Website/img/youtube.png diff --git a/Vocaluxe/Vocaluxe.csproj b/Vocaluxe/Vocaluxe.csproj index 6ac3e6c1..c008aef3 100644 --- a/Vocaluxe/Vocaluxe.csproj +++ b/Vocaluxe/Vocaluxe.csproj @@ -355,6 +355,12 @@ PreserveNewest + + PreserveNewest + + + PreserveNewest + PreserveNewest diff --git a/Vocaluxe/Website/img/spotify.png b/Vocaluxe/Website/img/spotify.png new file mode 100644 index 0000000000000000000000000000000000000000..0be1cd79298cf055cf6e9f98b58c873ffc4e085c GIT binary patch literal 4099 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 literal 0 HcmV?d00001 diff --git a/Vocaluxe/Website/img/youtube.png b/Vocaluxe/Website/img/youtube.png new file mode 100644 index 0000000000000000000000000000000000000000..0241b05ffcce737bdfae138135d619fd82df3653 GIT binary patch literal 3916 zcmV-S53}%zP)KLZ*U+IBfRsybQWXdwQbLP>6pAqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uhf59&ghTmgWD0l;*T zI709Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-rV&neh&#Q1i z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_IfqH8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4 zfg=2N-7=cNnjjOr{yriy6mMFgG#l znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U zt5vFIcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya? z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0 z?2xS?_ve_-kiKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$ z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4 z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i& z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01 z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3| zawq-H%e&ckC+@AhPrP6BKT#_XdT7&;F71j}Joy zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F} z000DcNkl8iPcX2LzFiH^oGQ1fq#C zCTQZ5kMO_)B1$y)5rJs*0gQrtg$Qc24C5vY3(x`AmlJoo!gD z6aY>-jgCZc(rJ`sRbdYF^pfxCW%9G@=|6mg$*We-^7%t!xz+^HQ z%OdLg7}v$u3NZ!|8NOE~fE^f&>kO(xYy7vKPS=jM7h*0diNaO0q ziM6&;{Iw4|nWW*#Cy1mQVGM&votfJ)X0!Q;1p1)|u?`&Knr+d%b`5`>>moS*HO|t- zIJSdVDxr=Xy>XCG9RRU;b8)6NqY`mSN)t`hgFs=hfNj}?qfv^v0gUGn6b1?TKK|w3 zDExS8^kF;N2^u%N$iy{I-`3cxyFR3U>$b|RfIVp4Evf zefsw7rLMi53A69MWxV)4T}zi!x_YfLNvs^;Bv~De_>CSL2vWQAl5WseZn}IQue4l*Rd5WjcQ2gaA#jXn&5mN2#IK91G`L2^o z?|s0`C6Dm?&RrPKLpkBfCGjoEBZ6hyIH53BD1>rsf*>F|dlvqsOGqw9%=fr@@+2|W z!+0KOUBN0OX5`q`8g5dYfiVOkC_q^@6BjJNUbqk|8pD+Q%7u^&7Khu$brB;Vf|t!w zIDY{IBnT*U_uyr-=tu-*S*Tcy?wz{{ii3#jRc;0Ro628&)-3EqjQCycTt9di>y8wW zmS!xixc>8LENzjRe?K~(r)S5zG(Ef!J07Q$%~oz7C^-%@Ki*BEt?jnP=Pq>9z4|F^ z->(dS00XTvXno;%V$)i%%VkwN4*Xl|h+xX{Iw%y#_x6$5{uaqh52{it0N{!6XQ@O9 zAnc$V2W8nK0!R=bzK6IT4vKo)CNxS>H)<^uQi=x087@lV`iP92m`bUkO5}{)iG|G= znkrw6kyIW(*cu1;F94*5ofkkGsa*skg7#||z!yOW$UrSZ_#y;IP6I!9Vknj+uT*)= z2O<=W!5fnDCv0FVuqZ$XM4+}7W2m;#%C{Wtc3SAkW)aUfsCPUp)$t}Oe^ a-va<; - +
+
+ + +
+ Close + +
+ diff --git a/Vocaluxe/Website/js/main.js b/Vocaluxe/Website/js/main.js index a43136bf..e2418430 100644 --- a/Vocaluxe/Website/js/main.js +++ b/Vocaluxe/Website/js/main.js @@ -11,6 +11,7 @@ $(document).ready(function () { initMainPageHandler(); initLoginPageHandler(); initHeartbeat(); + initVideoPopup(); }); function replaceTransitionHandler() { @@ -234,6 +235,20 @@ function initPageLoadHandler() { } $('#displaySongIsDuet').text(result.IsDuet ? "Yes" : "No"); + + if (result.Title != null || result.Artist != null) { + $('#displaySongLinks').show(); + + $('#displaySongLinkYoutube').unbind('click').click(function () { + showYoutube(result.Artist, result.Title); + }); + + $('#displaySongLinkSpotify').unbind('click').click(function () { + showSpotify(result.Artist, result.Title); + }); + } else { + $('#displaySongLinks').hide(); + } }); // Save promise on page so the transition handler can find it. @@ -586,11 +601,16 @@ function request(data, message) { textVisible: true }); } - + if (!data["headers"]) { data["headers"] = {}; } - data["headers"]["session"] = sessionId; + + if (message == "external") { + message = "Loading (external)..."; + } else { + data["headers"]["session"] = sessionId; + } return $.ajax(data).always(function (result) { if (message != "noOverlay") { @@ -616,7 +636,7 @@ function showError(message) { if (!message) { message = "Error..."; } - + $('div[data-role="content"]').wrap('
'); $.mobile.loading('show', { text: message, @@ -624,9 +644,99 @@ function showError(message) { }); $('.ui-loader').find('span').removeClass('ui-icon-loading').addClass('ui-custom-errorIcon'); - setTimeout(function() { + setTimeout(function () { $.mobile.loading('hide'); $('div[data-role="content"]').unwrap(); $('.ui-loader').find('span').removeClass('ui-custom-errorIcon').addClass('ui-icon-loading'); }, 1000); +} + +var popupVideoHeight = 390; +var popupVideoWidth = 640; +function initVideoPopup() { + function scale(width, height, padding, border) { + var scrWidth = $(window).width() - 30, + scrHeight = $(window).height() - 30, + ifrPadding = 2 * padding, + ifrBorder = 2 * border, + ifrWidth = width + ifrPadding + ifrBorder, + ifrHeight = height + ifrPadding + ifrBorder, + h, w; + + if (ifrWidth < scrWidth && ifrHeight < scrHeight) { + w = ifrWidth; + h = ifrHeight; + } else if ((ifrWidth / scrWidth) > (ifrHeight / scrHeight)) { + w = scrWidth; + h = (scrWidth / ifrWidth) * ifrHeight; + } else { + h = scrHeight; + w = (scrHeight / ifrHeight) * ifrWidth; + } + + return { + 'width': w - (ifrPadding + ifrBorder), + 'height': h - (ifrPadding + ifrBorder) + }; + }; + $("#popupVideo").find("a").click(function () { + $("#popupVideo").popup("close"); + $("#popupVideo").popup("close"); //Sometimes twice?? + }); + + $("#popupVideo iframe") + .attr("width", 0) + .attr("height", 0); + + $("#popupVideo").on({ + popupbeforeposition: function () { + var size = scale(popupVideoWidth, popupVideoHeight, 15, 1), + w = size.width, + h = size.height; + + $("#popupVideo iframe") + .attr("width", w) + .attr("height", h); + }, + popupafterclose: function () { + $("#popupVideo iframe") + .attr("width", 0) + .attr("height", 0) + .attr("src", ""); + } + }); +}; + +function showYoutube(artist, title) { + request({ + url: "http://gdata.youtube.com/feeds/api/videos/-/Music?max-results=1&alt=json&format=5&q=" + artist + " " + title, + dataType: "json", + }, "external") + .done(function (result) { + if (result && result.feed && result.feed.entry && result.feed.entry.length > 0) { + var vidId = result.feed.entry[0].id.$t.replace("http://gdata.youtube.com/feeds/api/videos/", ""); + popupVideoHeight = 390; + popupVideoWidth = 640; + + $("#popupVideo iframe").attr("src", "http://www.youtube.com/embed/" + vidId + "?&autoplay=1&rel=0&showinfo=0&disablekb=1&autohide=1"); + $("#popupVideo").popup("open"); + } + }); +} + +function showSpotify(artist, title) { + request({ + url: "http://ws.spotify.com/search/1/track.json?q=" + title + "+artist:" + artist, + dataType: "json", + }, "external") + .done(function (result) { + if (result && result.tracks && result.tracks.length > 0) { + var spotId = result.tracks[0].href; + popupVideoHeight = 80; + popupVideoWidth = 300; + + $("#popupVideo iframe").attr("src", "https://embed.spotify.com/?uri=" + spotId); + $("#popupVideo").popup("open"); + } + }); } \ No newline at end of file