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 00000000..0be1cd79 Binary files /dev/null and b/Vocaluxe/Website/img/spotify.png differ diff --git a/Vocaluxe/Website/img/youtube.png b/Vocaluxe/Website/img/youtube.png new file mode 100644 index 00000000..0241b05f Binary files /dev/null and b/Vocaluxe/Website/img/youtube.png differ diff --git a/Vocaluxe/Website/index.html b/Vocaluxe/Website/index.html index fe235fee..6e828e0e 100644 --- a/Vocaluxe/Website/index.html +++ b/Vocaluxe/Website/index.html @@ -173,8 +173,20 @@
- +
+
+ + +
+ 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