diff --git a/interface/src/ui/SnapshotUploader.cpp b/interface/src/ui/SnapshotUploader.cpp index aa37608476..3408cb8512 100644 --- a/interface/src/ui/SnapshotUploader.cpp +++ b/interface/src/ui/SnapshotUploader.cpp @@ -31,6 +31,7 @@ void SnapshotUploader::uploadSuccess(QNetworkReply& reply) { auto dataObject = doc.object().value("data").toObject(); QString thumbnailUrl = dataObject.value("thumbnail_url").toString(); QString imageUrl = dataObject.value("image_url").toString(); + QString snapshotID = dataObject.value("id").toString(); auto addressManager = DependencyManager::get(); QString placeName = _inWorldLocation.authority(); // We currently only upload shareable places, in which case this is just host. QString currentPath = _inWorldLocation.path(); @@ -43,6 +44,7 @@ void SnapshotUploader::uploadSuccess(QNetworkReply& reply) { if (dataObject.contains("shareable_url")) { detailsObject.insert("shareable_url", dataObject.value("shareable_url").toString()); } + detailsObject.insert("snapshot_id", snapshotID); QString pickledDetails = QJsonDocument(detailsObject).toJson(); userStoryObject.insert("details", pickledDetails); userStoryObject.insert("thumbnail_url", thumbnailUrl); diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index ccc9386d13..0aa422ca84 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -104,7 +104,7 @@ input[type=button].naked:active { */ /* -// START styling of share bar +// START styling of share overlay */ .shareControls { display: flex; @@ -212,6 +212,28 @@ input[type=button].naked:active { // END styling of share overlay */ +/* +// START styling of uploading message +*/ +.uploadingMessage { + width: 100%; + height: 100%; + position: absolute; + text-align: center; + background-color: rgba(0, 0, 0, 0.8); + left: 0; + top: 0; +} +.uploadingMessage > img { + width: 72px; + height: 72px; + display: block; + margin: 60px auto 10px auto; +} +/* +// END styling of uploading message +*/ + /* // START styling of snapshot controls (bottom panel) and its contents */ diff --git a/scripts/system/html/img/fb_logo72.png b/scripts/system/html/img/fb_logo72.png new file mode 100644 index 0000000000..8e3a2370dd Binary files /dev/null and b/scripts/system/html/img/fb_logo72.png differ diff --git a/scripts/system/html/img/twitter_logo72.png b/scripts/system/html/img/twitter_logo72.png new file mode 100644 index 0000000000..862f245228 Binary files /dev/null and b/scripts/system/html/img/twitter_logo72.png differ diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index ed290e9756..8185117669 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -1,3 +1,5 @@ +/*jslint browser:true */ +/*jslint maxlen: 180*/ "use strict"; // // SnapshotReview.js @@ -17,23 +19,23 @@ function showSetupInstructions() { var snapshotImagesDiv = document.getElementById("snapshot-images"); snapshotImagesDiv.className = "snapshotInstructions"; snapshotImagesDiv.innerHTML = 'Snapshot Instructions' + - '
' + - '

This app lets you take and share snaps and GIFs with your connections in High Fidelity.

' + - "

Setup Instructions

" + - "

Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:

" + - '
' + - '
' + - '' + - '
'; + '
' + + '

This app lets you take and share snaps and GIFs with your connections in High Fidelity.

' + + "

Setup Instructions

" + + "

Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:

" + + '
' + + '
' + + '' + + '
'; document.getElementById("snap-button").disabled = true; } function showSetupComplete() { var snapshotImagesDiv = document.getElementById("snapshot-images"); snapshotImagesDiv.className = "snapshotInstructions"; snapshotImagesDiv.innerHTML = 'Snapshot Instructions' + - '
' + - "

You're all set!

" + - '

Try taking a snapshot by pressing the red button below.

'; + '
' + + "

You're all set!

" + + '

Try taking a snapshot by pressing the red button below.

'; } function chooseSnapshotLocation() { EventBridge.emitWebEvent(JSON.stringify({ @@ -52,68 +54,71 @@ function clearImages() { imageCount = 0; idCounter = 0; } -function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled) { - if (!image_data.localPath) { - return; + +function selectImageToShare(selectedID, isSelected) { + if (selectedID.id) { + selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID } - var id = "p" + idCounter++; - // imageContainer setup - var imageContainer = document.createElement("DIV"); - imageContainer.id = id; - imageContainer.style.width = "95%"; - imageContainer.style.height = "240px"; - imageContainer.style.margin = "5px auto"; - imageContainer.style.display = "flex"; - imageContainer.style.justifyContent = "center"; - imageContainer.style.alignItems = "center"; - imageContainer.style.position = "relative"; - // img setup - var img = document.createElement("IMG"); - img.id = id + "img"; - if (imageCount > 1) { - img.setAttribute("class", "multiple"); - } - img.src = image_data.localPath; - imageContainer.appendChild(img); - document.getElementById("snapshot-images").appendChild(imageContainer); - paths.push(image_data.localPath); - var isGif = img.src.split('.').pop().toLowerCase() === "gif"; - if (isGif) { - imageContainer.innerHTML += 'GIF'; - } - if (!isGifLoading && !isShowingPreviousImages && canShare) { - shareForUrl(id); - } else if (isShowingPreviousImages && canShare && image_data.story_id) { - appendShareBar(id, image_data.story_id, isGif, blastButtonDisabled, hifiButtonDisabled) + var imageContainer = document.getElementById(selectedID), + image = document.getElementById(selectedID + 'img'), + shareBar = document.getElementById(selectedID + "shareBar"), + shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv"), + showShareButtonsButton = document.getElementById(selectedID + "showShareButtonsButton"), + itr, + containers = document.getElementsByClassName("shareControls"); + + if (isSelected) { + showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, false); }; + showShareButtonsButton.classList.remove("inactive"); + showShareButtonsButton.classList.add("active"); + + image.onclick = function () { selectImageToShare(selectedID, false); }; + imageContainer.style.outline = "4px solid #00b4ef"; + imageContainer.style.outlineOffset = "-4px"; + + shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)"; + + shareButtonsDiv.style.visibility = "visible"; + + for (itr = 0; itr < containers.length; itr += 1) { + var parentID = containers[itr].id.slice(0, 2); + if (parentID !== selectedID) { + selectImageToShare(parentID, false); + } + } + } else { + showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, true); }; + showShareButtonsButton.classList.remove("active"); + showShareButtonsButton.classList.add("inactive"); + + image.onclick = function () { selectImageToShare(selectedID, true); }; + imageContainer.style.outline = "none"; + + shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)"; + + shareButtonsDiv.style.visibility = "hidden"; } } -function appendShareBar(divID, story_id, isGif, blastButtonDisabled, hifiButtonDisabled) { - var story_url = "https://highfidelity.com/user_stories/" + story_id; - var parentDiv = document.getElementById(divID); - parentDiv.setAttribute('data-story-id', story_id); - document.getElementById(divID).appendChild(createShareBar(divID, isGif, story_url, blastButtonDisabled, hifiButtonDisabled)); - if (divID === "p0") { - selectImageToShare(divID, true); - } -} -function createShareBar(parentID, isGif, shareURL, blastButtonDisabled, hifiButtonDisabled) { - var shareBar = document.createElement("div"); +function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled) { + var shareBar = document.createElement("div"), + shareButtonsDivID = parentID + "shareButtonsDiv", + showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv", + showShareButtonsButtonID = parentID + "showShareButtonsButton", + showShareButtonsLabelID = parentID + "showShareButtonsLabel", + blastToConnectionsButtonID = parentID + "blastToConnectionsButton", + shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton", + facebookButtonID = parentID + "facebookButton", + twitterButtonID = parentID + "twitterButton"; + shareBar.id = parentID + "shareBar"; shareBar.className = "shareControls"; - var shareButtonsDivID = parentID + "shareButtonsDiv"; - var showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv"; - var showShareButtonsButtonID = parentID + "showShareButtonsButton"; - var showShareButtonsLabelID = parentID + "showShareButtonsLabel"; - var blastToConnectionsButtonID = parentID + "blastToConnectionsButton"; - var shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton"; - var facebookButtonID = parentID + "facebookButton"; - var twitterButtonID = parentID + "twitterButton"; - shareBar.innerHTML += '' + - '