Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-05 19:39:43 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #10390 from zfox23/newSnapshotReview_Improvements3

Browse source 
Lots of Snapshot app improvements, Round Three
This commit is contained in:
Howard Stearns 2017-05-04 17:05:37 -07:00 committed by GitHub
commit d9540d7ece
4 changed files with 326 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
scripts/system/html/css/SnapshotReview.css
View file

@ -158,7 +158,7 @@ input[type=button].naked:active {
align-items: flex-end; align-items: flex-end;
height: 40px; height: 40px;
width: calc(100% - 60px); width: calc(100% - 60px);
margin-bottom: 25px; margin-bottom: -24px;
margin-left: 0; margin-left: 0;
} }
.shareButtons img { .shareButtons img {
@ -178,7 +178,7 @@ input[type=button].naked:active {
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
position: absolute; position: absolute;
bottom: 0; bottom: 40px;
left: 73px; left: 73px;
right: 0; right: 0;
font-family: Raleway-Regular; font-family: Raleway-Regular;
@ -187,6 +187,19 @@ input[type=button].naked:active {
padding-left: 8px; padding-left: 8px;
color: white; color: white;
} }
.helpTextDiv {
width: 350px;
height: 65px;
margin-right: 15px;
line-height: 65px;
position: absolute;
bottom: 0;
right: 0;
font-family: Raleway-Regular;
font-weight: 500;
font-size: 16px;
color: white;
}
/* /*
// END styling of share overlay // END styling of share overlay
*/ */

10
scripts/system/html/css/hifi-style.css
View file

@ -136,11 +136,14 @@ input[type=radio]:active + label > span > span{
} }
.grayButton { .grayButton {
font-family: FiraSans-SemiBold; font-family: Raleway-Bold;
color: white; font-size: 13px;
color: black;
padding: 0px 10px; padding: 0px 10px;
border-radius: 3px;
border-width: 0px; border-width: 0px;
background-image: linear-gradient(#FFFFFF, #AFAFAF); background-image: linear-gradient(#FFFFFF, #AFAFAF);
min-height: 30px;
} }
.grayButton:hover { .grayButton:hover {
background-image: linear-gradient(#FFFFFF, #FFFFFF); background-image: linear-gradient(#FFFFFF, #FFFFFF);
@ -152,7 +155,8 @@ input[type=radio]:active + label > span > span{
background-image: linear-gradient(#FFFFFF, ##AFAFAF); background-image: linear-gradient(#FFFFFF, ##AFAFAF);
} }
.blueButton { .blueButton {
font-family: FiraSans-SemiBold; font-family: Raleway-Bold;
font-size: 13px;
color: white; color: white;
padding: 0px 10px; padding: 0px 10px;
border-radius: 3px; border-radius: 3px;

295
scripts/system/html/js/SnapshotReview.js
View file

@ -62,6 +62,12 @@ function chooseSnapshotLocation() {
action: "chooseSnapshotLocation" action: "chooseSnapshotLocation"
})); }));
} }
function login() {
EventBridge.emitWebEvent(JSON.stringify({
type: "snapshot",
action: "login"
}));
}
function clearImages() { function clearImages() {
document.getElementById("snap-button").disabled = false; document.getElementById("snap-button").disabled = false;
var snapshotImagesDiv = document.getElementById("snapshot-images"); var snapshotImagesDiv = document.getElementById("snapshot-images");
@ -74,6 +80,52 @@ function clearImages() {
idCounter = 0; idCounter = 0;
} }
function selectImageWithHelpText(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 imageContainer = document.getElementById(selectedID),
image = document.getElementById(selectedID + 'img'),
shareBar = document.getElementById(selectedID + "shareBar"),
helpTextDiv = document.getElementById(selectedID + "helpTextDiv"),
showShareButtonsButtonDiv = document.getElementById(selectedID + "showShareButtonsButtonDiv"),
itr,
containers = document.getElementsByClassName("shareControls");
if (isSelected) {
showShareButtonsButtonDiv.onclick = function () { selectImageWithHelpText(selectedID, false); };
showShareButtonsButtonDiv.classList.remove("inactive");
showShareButtonsButtonDiv.classList.add("active");
image.onclick = function () { selectImageWithHelpText(selectedID, false); };
imageContainer.style.outline = "4px solid #00b4ef";
imageContainer.style.outlineOffset = "-4px";
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.45)";
shareBar.style.pointerEvents = "initial";
helpTextDiv.style.visibility = "visible";
for (itr = 0; itr < containers.length; itr += 1) {
var parentID = containers[itr].id.slice(0, 2);
if (parentID !== selectedID) {
selectImageWithHelpText(parentID, false);
}
}
} else {
showShareButtonsButtonDiv.onclick = function () { selectImageWithHelpText(selectedID, true); };
showShareButtonsButtonDiv.classList.remove("active");
showShareButtonsButtonDiv.classList.add("inactive");
image.onclick = function () { selectImageWithHelpText(selectedID, true); };
imageContainer.style.outline = "none";
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
shareBar.style.pointerEvents = "none";
helpTextDiv.style.visibility = "hidden";
}
}
function selectImageToShare(selectedID, isSelected) { function selectImageToShare(selectedID, isSelected) {
if (selectedID.id) { if (selectedID.id) {
selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
@ -97,6 +149,7 @@ function selectImageToShare(selectedID, isSelected) {
imageContainer.style.outlineOffset = "-4px"; imageContainer.style.outlineOffset = "-4px";
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.45)"; shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.45)";
shareBar.style.pointerEvents = "initial";
shareButtonsDiv.style.visibility = "visible"; shareButtonsDiv.style.visibility = "visible";
shareBarHelp.style.visibility = "visible"; shareBarHelp.style.visibility = "visible";
@ -116,12 +169,13 @@ function selectImageToShare(selectedID, isSelected) {
imageContainer.style.outline = "none"; imageContainer.style.outline = "none";
shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)"; shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
shareBar.style.pointerEvents = "none";
shareButtonsDiv.style.visibility = "hidden"; shareButtonsDiv.style.visibility = "hidden";
shareBarHelp.style.visibility = "hidden"; shareBarHelp.style.visibility = "hidden";
} }
} }
function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) { function createShareBar(parentID, isLoggedIn, canShare, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) {
var shareBar = document.createElement("div"), var shareBar = document.createElement("div"),
shareBarHelpID = parentID + "shareBarHelp", shareBarHelpID = parentID + "shareBarHelp",
shareButtonsDivID = parentID + "shareButtonsDiv", shareButtonsDivID = parentID + "shareButtonsDiv",
@ -130,45 +184,84 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
blastToConnectionsButtonID = parentID + "blastToConnectionsButton", blastToConnectionsButtonID = parentID + "blastToConnectionsButton",
shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton", shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton",
facebookButtonID = parentID + "facebookButton", facebookButtonID = parentID + "facebookButton",
twitterButtonID = parentID + "twitterButton"; twitterButtonID = parentID + "twitterButton",
shareBarInnerHTML = '';
shareBar.id = parentID + "shareBar"; shareBar.id = parentID + "shareBar";
shareBar.className = "shareControls"; shareBar.className = "shareControls";
var shareBarInnerHTML = '<div class="showShareButtonsButtonDiv inactive" id="' + showShareButtonsButtonDivID + '" onclick="selectImageToShare(' + parentID + ', true)">' +
'<label id="' + showShareButtonsLabelID + '">SHARE</label>' + if (isLoggedIn) {
'<span class="showShareButtonDots">' + if (canShare) {
'&#xe019;' + shareBarInnerHTML = '<div class="shareControlsHelp" id="' + shareBarHelpID + '" style="visibility:hidden;' + ((canBlast && blastButtonDisabled || !canBlast && hifiButtonDisabled) ? "background-color:#000;opacity:0.5;" : "") + '"></div>' +
'<div class="showShareButtonsButtonDiv inactive" id="' + showShareButtonsButtonDivID + '" onclick="selectImageToShare(' + parentID + ', true)">' +
'<label id="' + showShareButtonsLabelID + '">SHARE</label>' +
'<span class="showShareButtonDots">' +
'&#xe019;' +
'</div>' +
'</div>' +
'<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
if (canBlast) {
shareBarInnerHTML += '<div class="shareButton blastToConnections' + (blastButtonDisabled ? ' disabled' : '') + '" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ', true)" onclick="' + (blastButtonDisabled ? '' : 'blastToConnections(' + parentID + ', ' + isGif + ')') + '"><img src="img/blast_icon.svg"></div>';
}
shareBarInnerHTML += '<div class="shareButton shareWithEveryone' + (hifiButtonDisabled ? ' disabled' : '') + '" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ', true)" onclick="' + (hifiButtonDisabled ? '' : 'shareWithEveryone(' + parentID + ', ' + isGif + ')') + '"><img src="img/hifi_icon.svg" style="width:35px;height:35px;margin:2px 0 0 2px;"></div>' +
'<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ', true)" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
'<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ', true)" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
'</div>';
// Add onclick handler to parent DIV's img to toggle share buttons
document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true); };
} else {
shareBarInnerHTML = '<div class="showShareButtonsButtonDiv inactive" id="' + showShareButtonsButtonDivID + '" onclick="selectImageToShare(' + parentID + ', true)">' +
'<label id="' + showShareButtonsLabelID + '">SHARE</label>' +
'<span class="showShareButtonDots">' +
'&#xe019;' +
'</div>' +
'</div>' +
'<div class="helpTextDiv" id="' + parentID + 'helpTextDiv' + '" style="visibility:hidden;text-align:left;">' +
'This snap was taken in an unshareable domain.' +
'</div>';
// Add onclick handler to parent DIV's img to toggle share buttons
document.getElementById(parentID + 'img').onclick = function () { selectImageWithHelpText(parentID, true); };
}
} else {
shareBarInnerHTML = '<div class="showShareButtonsButtonDiv inactive" id="' + showShareButtonsButtonDivID + '" onclick="selectImageToShare(' + parentID + ', true)">' +
'<label id="' + showShareButtonsLabelID + '">SHARE</label>' +
'<span class="showShareButtonDots">' +
'&#xe019;' +
'</div>' +
'</div>' + '</div>' +
'</div>' + '<div class="helpTextDiv" id="' + parentID + 'helpTextDiv' + '" style="visibility:hidden;text-align:right;">' +
'<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">'; 'Please log in to share snaps' + '<input class="grayButton" style="margin-left:20px;width:95px;height:30px;" type="button" value="LOG IN" onclick="login()" />' +
if (canBlast) { '</div>';
shareBarInnerHTML += '<div class="shareButton blastToConnections' + (blastButtonDisabled ? ' disabled' : '') + '" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="' + (blastButtonDisabled ? '' : 'blastToConnections(' + parentID + ', ' + isGif + ')') + '"><img src="img/blast_icon.svg"></div>'; // Add onclick handler to parent DIV's img to toggle share buttons
document.getElementById(parentID + 'img').onclick = function () { selectImageWithHelpText(parentID, true); };
} }
shareBarInnerHTML += '<div class="shareButton shareWithEveryone' + (hifiButtonDisabled ? ' disabled' : '') + '" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="' + (hifiButtonDisabled ? '' : 'shareWithEveryone(' + parentID + ', ' + isGif + ')') + '"><img src="img/hifi_icon.svg" style="width:35px;height:35px;margin:2px 0 0 2px;"></div>' +
'<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
'<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
'</div>';
shareBar.innerHTML = shareBarInnerHTML; shareBar.innerHTML = shareBarInnerHTML;
shareBar.innerHTML += '<div class="shareControlsHelp" id="' + shareBarHelpID + '" style="visibility:hidden;' + ((canBlast && blastButtonDisabled || !canBlast && hifiButtonDisabled) ? "background-color:#000;opacity:0.5;" : "") + '"></div>';
// Add onclick handler to parent DIV's img to toggle share buttons
document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true); };
return shareBar; return shareBar;
} }
function appendShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) { function appendShareBar(divID, isLoggedIn, canShare, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) {
if (divID.id) { if (divID.id) {
divID = divID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID divID = divID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
} }
document.getElementById(divID).appendChild(createShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast)); document.getElementById(divID).appendChild(createShareBar(divID, isLoggedIn, canShare, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast));
if (divID === "p0") { if (divID === "p0") {
selectImageToShare(divID, true); if (isLoggedIn) {
if (canBlast) { if (canShare) {
shareButtonHovered('blast', divID); selectImageToShare(divID, true);
} else {
selectImageWithHelpText(divID, true);
}
} else { } else {
shareButtonHovered('hifi', divID); selectImageWithHelpText(divID, true);
}
}
if (isLoggedIn && canShare) {
if (canBlast) {
shareButtonHovered('blast', divID, false);
} else {
shareButtonHovered('hifi', divID, false);
} }
} }
} }
@ -179,7 +272,7 @@ function shareForUrl(selectedID) {
data: paths[parseInt(selectedID.substring(1), 10)] data: paths[parseInt(selectedID.substring(1), 10)]
})); }));
} }
function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled, canBlast) { function addImage(image_data, isLoggedIn, canShare, isGifLoading, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled, canBlast) {
if (!image_data.localPath) { if (!image_data.localPath) {
return; return;
} }
@ -204,12 +297,13 @@ function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, b
if (isGif) { if (isGif) {
imageContainer.innerHTML += '<span class="gifLabel">GIF</span>'; imageContainer.innerHTML += '<span class="gifLabel">GIF</span>';
} }
if (!isGifLoading && !isShowingPreviousImages && canShare) { if (!isGifLoading) {
appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled, true); appendShareBar(id, isLoggedIn, canShare, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast);
}
if (!isGifLoading && !isShowingPreviousImages) {
shareForUrl(id); shareForUrl(id);
} }
if (isShowingPreviousImages && image_data.story_id) { if (isShowingPreviousImages && isLoggedIn && image_data.story_id) {
appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast);
updateShareInfo(id, image_data.story_id); updateShareInfo(id, image_data.story_id);
} }
} }
@ -262,6 +356,7 @@ function showUploadingMessage(selectedID, destination) {
var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"); var shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
shareBarHelp.innerHTML = '<img style="display:inline;width:25px;height:25px;" src="./img/loader.gif"></img><span style="position:relative;margin-left:5px;bottom:7px;">Preparing to Share</span>'; shareBarHelp.innerHTML = '<img style="display:inline;width:25px;height:25px;" src="./img/loader.gif"></img><span style="position:relative;margin-left:5px;bottom:7px;">Preparing to Share</span>';
shareBarHelp.classList.add("uploading");
shareBarHelp.setAttribute("data-destination", destination); shareBarHelp.setAttribute("data-destination", destination);
} }
function hideUploadingMessageAndShare(selectedID, storyID) { function hideUploadingMessageAndShare(selectedID, storyID) {
@ -271,6 +366,8 @@ function hideUploadingMessageAndShare(selectedID, storyID) {
var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"), var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"),
shareBarHelpDestination = shareBarHelp.getAttribute("data-destination"); shareBarHelpDestination = shareBarHelp.getAttribute("data-destination");
shareBarHelp.classList.remove("uploading");
if (shareBarHelpDestination) { if (shareBarHelpDestination) {
switch (shareBarHelpDestination) { switch (shareBarHelpDestination) {
case 'blast': case 'blast':
@ -380,7 +477,7 @@ function shareWithEveryone(selectedID, isGif) {
showUploadingMessage(selectedID, 'hifi'); showUploadingMessage(selectedID, 'hifi');
} }
} }
function shareButtonHovered(destination, selectedID) { function shareButtonHovered(destination, selectedID, shouldAlsoModifyOther) {
if (selectedID.id) { if (selectedID.id) {
selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
} }
@ -388,54 +485,63 @@ function shareButtonHovered(destination, selectedID) {
shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv").childNodes, shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv").childNodes,
itr; itr;
for (itr = 0; itr < shareButtonsDiv.length; itr += 1) { if (!shareBarHelp.classList.contains("uploading")) {
shareButtonsDiv[itr].style.backgroundColor = "rgba(0, 0, 0, 0)"; for (itr = 0; itr < shareButtonsDiv.length; itr += 1) {
shareButtonsDiv[itr].style.backgroundColor = "rgba(0, 0, 0, 0)";
}
shareBarHelp.style.opacity = "1.0";
switch (destination) {
case 'blast':
var blastToConnectionsButton = document.getElementById(selectedID + "blastToConnectionsButton");
if (!blastToConnectionsButton.classList.contains("disabled")) {
shareBarHelp.style.backgroundColor = "#EA4C5F";
shareBarHelp.style.opacity = "1.0";
blastToConnectionsButton.style.backgroundColor = "#EA4C5F";
blastToConnectionsButton.style.opacity = "1.0";
shareBarHelp.innerHTML = blastShareText;
} else {
shareBarHelp.style.backgroundColor = "#000000";
shareBarHelp.style.opacity = "0.5";
blastToConnectionsButton.style.backgroundColor = "#000000";
blastToConnectionsButton.style.opacity = "0.5";
shareBarHelp.innerHTML = blastAlreadySharedText;
}
break;
case 'hifi':
var shareWithEveryoneButton = document.getElementById(selectedID + "shareWithEveryoneButton");
if (!shareWithEveryoneButton.classList.contains("disabled")) {
shareBarHelp.style.backgroundColor = "#1FC6A6";
shareBarHelp.style.opacity = "1.0";
shareWithEveryoneButton.style.backgroundColor = "#1FC6A6";
shareWithEveryoneButton.style.opacity = "1.0";
shareBarHelp.innerHTML = hifiShareText;
} else {
shareBarHelp.style.backgroundColor = "#000000";
shareBarHelp.style.opacity = "0.5";
shareWithEveryoneButton.style.backgroundColor = "#000000";
shareWithEveryoneButton.style.opacity = "0.5";
shareBarHelp.innerHTML = hifiAlreadySharedText;
}
break;
case 'facebook':
shareBarHelp.style.backgroundColor = "#3C58A0";
shareBarHelp.innerHTML = facebookShareText;
document.getElementById(selectedID + "facebookButton").style.backgroundColor = "#3C58A0";
break;
case 'twitter':
shareBarHelp.style.backgroundColor = "#00B4EE";
shareBarHelp.innerHTML = twitterShareText;
document.getElementById(selectedID + "twitterButton").style.backgroundColor = "#00B4EE";
break;
}
} }
shareBarHelp.style.opacity = "1.0";
switch (destination) { if (shouldAlsoModifyOther && imageCount > 1) {
case 'blast': if (selectedID === "p0" && !document.getElementById("p1").classList.contains("processingGif")) {
var blastToConnectionsButton = document.getElementById(selectedID + "blastToConnectionsButton"); shareButtonHovered(destination, "p1", false);
if (!blastToConnectionsButton.classList.contains("disabled")) { } else if (selectedID === "p1") {
shareBarHelp.style.backgroundColor = "#EA4C5F"; shareButtonHovered(destination, "p0", false);
shareBarHelp.style.opacity = "1.0"; }
blastToConnectionsButton.style.backgroundColor = "#EA4C5F";
blastToConnectionsButton.style.opacity = "1.0";
shareBarHelp.innerHTML = blastShareText;
} else {
shareBarHelp.style.backgroundColor = "#000000";
shareBarHelp.style.opacity = "0.5";
blastToConnectionsButton.style.backgroundColor = "#000000";
blastToConnectionsButton.style.opacity = "0.5";
shareBarHelp.innerHTML = blastAlreadySharedText;
}
break;
case 'hifi':
var shareWithEveryoneButton = document.getElementById(selectedID + "shareWithEveryoneButton");
if (!shareWithEveryoneButton.classList.contains("disabled")) {
shareBarHelp.style.backgroundColor = "#1FC6A6";
shareBarHelp.style.opacity = "1.0";
shareWithEveryoneButton.style.backgroundColor = "#1FC6A6";
shareWithEveryoneButton.style.opacity = "1.0";
shareBarHelp.innerHTML = hifiShareText;
} else {
shareBarHelp.style.backgroundColor = "#000000";
shareBarHelp.style.opacity = "0.5";
shareWithEveryoneButton.style.backgroundColor = "#000000";
shareWithEveryoneButton.style.opacity = "0.5";
shareBarHelp.innerHTML = hifiAlreadySharedText;
}
break;
case 'facebook':
shareBarHelp.style.backgroundColor = "#3C58A0";
shareBarHelp.innerHTML = facebookShareText;
document.getElementById(selectedID + "facebookButton").style.backgroundColor = "#3C58A0";
break;
case 'twitter':
shareBarHelp.style.backgroundColor = "#00B4EE";
shareBarHelp.innerHTML = twitterShareText;
document.getElementById(selectedID + "twitterButton").style.backgroundColor = "#00B4EE";
break;
} }
} }
function shareButtonClicked(destination, selectedID) { function shareButtonClicked(destination, selectedID) {
@ -474,7 +580,7 @@ function handleCaptureSetting(setting) {
window.onload = function () { window.onload = function () {
// Uncomment the line below to test functionality in a browser. // Uncomment the line below to test functionality in a browser.
// See definition of "testInBrowser()" to modify tests. // See definition of "testInBrowser()" to modify tests.
//testInBrowser(3); //testInBrowser(4);
openEventBridge(function () { openEventBridge(function () {
// Set up a handler for receiving the data, and tell the .js we are ready to receive it. // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
EventBridge.scriptEventReceived.connect(function (message) { EventBridge.scriptEventReceived.connect(function (message) {
@ -503,7 +609,7 @@ window.onload = function () {
imageCount = message.image_data.length; imageCount = message.image_data.length;
if (imageCount > 0) { if (imageCount > 0) {
message.image_data.forEach(function (element, idx) { message.image_data.forEach(function (element, idx) {
addImage(element, true, message.canShare, true, message.image_data[idx].blastButtonDisabled, message.image_data[idx].hifiButtonDisabled, messageOptions.canBlast); addImage(element, messageOptions.isLoggedIn, message.canShare, false, true, message.image_data[idx].blastButtonDisabled, message.image_data[idx].hifiButtonDisabled, messageOptions.canBlast);
}); });
} else { } else {
showSnapshotInstructions(); showSnapshotInstructions();
@ -519,23 +625,23 @@ window.onload = function () {
imageCount = message.image_data.length + 1; // "+1" for the GIF that'll finish processing soon imageCount = message.image_data.length + 1; // "+1" for the GIF that'll finish processing soon
message.image_data.push({ localPath: messageOptions.loadingGifPath }); message.image_data.push({ localPath: messageOptions.loadingGifPath });
message.image_data.forEach(function (element, idx) { message.image_data.forEach(function (element, idx) {
addImage(element, idx === 1, idx === 0 && messageOptions.canShare, false); addImage(element, messageOptions.isLoggedIn, idx === 0 && messageOptions.canShare, idx === 1, false, false, false, true);
}); });
document.getElementById("p1").classList.add("processingGif");
} else { } else {
var gifPath = message.image_data[0].localPath, var gifPath = message.image_data[0].localPath,
p1img = document.getElementById('p1img'); p1img = document.getElementById('p1img');
p1img.src = gifPath; p1img.src = gifPath;
paths[1] = gifPath; paths[1] = gifPath;
if (messageOptions.canShare) { shareForUrl("p1");
shareForUrl("p1"); appendShareBar("p1", messageOptions.isLoggedIn, messageOptions.canShare, true, false, false, messageOptions.canBlast);
appendShareBar("p1", true, false, false, true); document.getElementById("p1").classList.remove("processingGif");
}
} }
} else { } else {
imageCount = message.image_data.length; imageCount = message.image_data.length;
message.image_data.forEach(function (element) { message.image_data.forEach(function (element) {
addImage(element, false, messageOptions.canShare, false); addImage(element, messageOptions.isLoggedIn, messageOptions.canShare, false, false, false, false, true);
}); });
} }
break; break;
@ -577,18 +683,23 @@ function testInBrowser(test) {
} else if (test === 1) { } else if (test === 1) {
imageCount = 2; imageCount = 2;
//addImage({ localPath: 'http://lorempixel.com/553/255' }); //addImage({ localPath: 'http://lorempixel.com/553/255' });
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true); addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, true, true, false, true, false, false, true);
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true); addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, true, true, false, true, false, false, true);
} else if (test === 2) { } else if (test === 2) {
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true); addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, true, true, false, true, false, false, true);
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true); addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, true, true, false, true, false, false, true);
showConfirmationMessage("p0", 'blast'); showConfirmationMessage("p0", 'blast');
showConfirmationMessage("p1", 'hifi'); showConfirmationMessage("p1", 'hifi');
} else if (test === 3) { } else if (test === 3) {
imageCount = 2; imageCount = 2;
//addImage({ localPath: 'http://lorempixel.com/553/255' }); //addImage({ localPath: 'http://lorempixel.com/553/255' });
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true); addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, true, true, false, true, false, false, true);
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true); addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, true, true, false, true, false, false, true);
showUploadingMessage("p0", 'hifi'); showUploadingMessage("p0", 'hifi');
} } else if (test === 4) {
imageCount = 2;
//addImage({ localPath: 'http://lorempixel.com/553/255' });
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, false, true, false, false, true);
addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, false, true, false, false, true);
}
} }

169
scripts/system/snapshot.js
View file

@ -29,12 +29,13 @@ var button = tablet.addButton({
sortOrder: 5 sortOrder: 5
}); });
var snapshotOptions; var snapshotOptions = {};
var imageData = []; var imageData = [];
var storyIDsToMaybeDelete = []; var storyIDsToMaybeDelete = [];
var shareAfterLogin = false; var shareAfterLogin = false;
var snapshotToShareAfterLogin; var snapshotToShareAfterLogin = [];
var METAVERSE_BASE = location.metaverseServerUrl; var METAVERSE_BASE = location.metaverseServerUrl;
var isLoggedIn;
// It's totally unnecessary to return to C++ to perform many of these requests, such as DELETEing an old story, // It's totally unnecessary to return to C++ to perform many of these requests, such as DELETEing an old story,
// POSTING a new one, PUTTING a new audience, or GETTING story data. It's far more efficient to do all of that within JS // POSTING a new one, PUTTING a new audience, or GETTING story data. It's far more efficient to do all of that within JS
@ -61,7 +62,6 @@ function onMessage(message) {
return; return;
} }
var isLoggedIn;
switch (message.action) { switch (message.action) {
case 'ready': // DOM is ready and page has loaded case 'ready': // DOM is ready and page has loaded
tablet.emitScriptEvent(JSON.stringify({ tablet.emitScriptEvent(JSON.stringify({
@ -94,6 +94,9 @@ function onMessage(message) {
Settings.setValue("previousAnimatedSnapHifiSharingDisabled", false); Settings.setValue("previousAnimatedSnapHifiSharingDisabled", false);
} }
break; break;
case 'login':
openLoginWindow();
break;
case 'chooseSnapshotLocation': case 'chooseSnapshotLocation':
var snapshotPath = Window.browseDir("Choose Snapshots Directory", "", ""); var snapshotPath = Window.browseDir("Choose Snapshots Directory", "", "");
@ -125,23 +128,28 @@ function onMessage(message) {
takeSnapshot(); takeSnapshot();
break; break;
case 'shareSnapshotForUrl': case 'shareSnapshotForUrl':
isLoggedIn = Account.isLoggedIn(); isDomainOpen(Settings.getValue("previousSnapshotDomainID"), function (canShare) {
if (isLoggedIn) { if (canShare) {
print('Sharing snapshot with audience "for_url":', message.data); isLoggedIn = Account.isLoggedIn();
Window.shareSnapshot(message.data, message.href || href); if (isLoggedIn) {
} else { print('Sharing snapshot with audience "for_url":', message.data);
// TODO Window.shareSnapshot(message.data, message.href || href);
} } else {
shareAfterLogin = true;
snapshotToShareAfterLogin.push({ path: message.data, href: message.href || href });
}
}
});
break; break;
case 'blastToConnections': case 'blastToConnections':
isLoggedIn = Account.isLoggedIn(); isLoggedIn = Account.isLoggedIn();
if (message.isGif) {
Settings.setValue("previousAnimatedSnapBlastingDisabled", true);
} else {
Settings.setValue("previousStillSnapBlastingDisabled", true);
}
if (isLoggedIn) { if (isLoggedIn) {
if (message.isGif) {
Settings.setValue("previousAnimatedSnapBlastingDisabled", true);
} else {
Settings.setValue("previousStillSnapBlastingDisabled", true);
}
print('Uploading new story for announcement!'); print('Uploading new story for announcement!');
request({ request({
@ -187,20 +195,16 @@ function onMessage(message) {
}); });
} }
}); });
} else {
openLoginWindow();
} }
break; break;
case 'shareSnapshotWithEveryone': case 'shareSnapshotWithEveryone':
isLoggedIn = Account.isLoggedIn(); isLoggedIn = Account.isLoggedIn();
if (message.isGif) {
Settings.setValue("previousAnimatedSnapHifiSharingDisabled", true);
} else {
Settings.setValue("previousStillSnapHifiSharingDisabled", true);
}
if (isLoggedIn) { if (isLoggedIn) {
if (message.isGif) {
Settings.setValue("previousAnimatedSnapHifiSharingDisabled", true);
} else {
Settings.setValue("previousStillSnapHifiSharingDisabled", true);
}
print('Modifying audience of story ID', message.story_id, "to 'for_feed'"); print('Modifying audience of story ID', message.story_id, "to 'for_feed'");
var requestBody = { var requestBody = {
audience: "for_feed" audience: "for_feed"
@ -228,10 +232,6 @@ function onMessage(message) {
print("SUCCESS changing audience" + (message.isAnnouncement ? " and posting announcement!" : "!")); print("SUCCESS changing audience" + (message.isAnnouncement ? " and posting announcement!" : "!"));
} }
}); });
} else {
openLoginWindow();
shareAfterLogin = true;
snapshotToShareAfterLogin = { path: message.data, href: message.href || href };
} }
break; break;
case 'removeFromStoryIDsToMaybeDelete': case 'removeFromStoryIDsToMaybeDelete':
@ -244,6 +244,42 @@ function onMessage(message) {
} }
} }
function fillImageDataFromPrevious() {
isLoggedIn = Account.isLoggedIn();
var previousStillSnapPath = Settings.getValue("previousStillSnapPath");
var previousStillSnapStoryID = Settings.getValue("previousStillSnapStoryID");
var previousStillSnapBlastingDisabled = Settings.getValue("previousStillSnapBlastingDisabled");
var previousStillSnapHifiSharingDisabled = Settings.getValue("previousStillSnapHifiSharingDisabled");
var previousAnimatedSnapPath = Settings.getValue("previousAnimatedSnapPath");
var previousAnimatedSnapStoryID = Settings.getValue("previousAnimatedSnapStoryID");
var previousAnimatedSnapBlastingDisabled = Settings.getValue("previousAnimatedSnapBlastingDisabled");
var previousAnimatedSnapHifiSharingDisabled = Settings.getValue("previousAnimatedSnapHifiSharingDisabled");
snapshotOptions = {
containsGif: previousAnimatedSnapPath !== "",
processingGif: false,
shouldUpload: false,
canBlast: location.domainId === Settings.getValue("previousSnapshotDomainID"),
isLoggedIn: isLoggedIn
};
imageData = [];
if (previousStillSnapPath !== "") {
imageData.push({
localPath: previousStillSnapPath,
story_id: previousStillSnapStoryID,
blastButtonDisabled: previousStillSnapBlastingDisabled,
hifiButtonDisabled: previousStillSnapHifiSharingDisabled
});
}
if (previousAnimatedSnapPath !== "") {
imageData.push({
localPath: previousAnimatedSnapPath,
story_id: previousAnimatedSnapStoryID,
blastButtonDisabled: previousAnimatedSnapBlastingDisabled,
hifiButtonDisabled: previousAnimatedSnapHifiSharingDisabled
});
}
}
var SNAPSHOT_REVIEW_URL = Script.resolvePath("html/SnapshotReview.html"); var SNAPSHOT_REVIEW_URL = Script.resolvePath("html/SnapshotReview.html");
var isInSnapshotReview = false; var isInSnapshotReview = false;
var shouldActivateButton = false; var shouldActivateButton = false;
@ -253,37 +289,7 @@ function onButtonClicked() {
tablet.gotoHomeScreen(); tablet.gotoHomeScreen();
} else { } else {
shouldActivateButton = true; shouldActivateButton = true;
var previousStillSnapPath = Settings.getValue("previousStillSnapPath"); fillImageDataFromPrevious();
var previousStillSnapStoryID = Settings.getValue("previousStillSnapStoryID");
var previousStillSnapBlastingDisabled = Settings.getValue("previousStillSnapBlastingDisabled");
var previousStillSnapHifiSharingDisabled = Settings.getValue("previousStillSnapHifiSharingDisabled");
var previousAnimatedSnapPath = Settings.getValue("previousAnimatedSnapPath");
var previousAnimatedSnapStoryID = Settings.getValue("previousAnimatedSnapStoryID");
var previousAnimatedSnapBlastingDisabled = Settings.getValue("previousAnimatedSnapBlastingDisabled");
var previousAnimatedSnapHifiSharingDisabled = Settings.getValue("previousAnimatedSnapHifiSharingDisabled");
snapshotOptions = {
containsGif: previousAnimatedSnapPath !== "",
processingGif: false,
shouldUpload: false,
canBlast: location.domainId === Settings.getValue("previousSnapshotDomainID")
}
imageData = [];
if (previousStillSnapPath !== "") {
imageData.push({
localPath: previousStillSnapPath,
story_id: previousStillSnapStoryID,
blastButtonDisabled: previousStillSnapBlastingDisabled,
hifiButtonDisabled: previousStillSnapHifiSharingDisabled
});
}
if (previousAnimatedSnapPath !== "") {
imageData.push({
localPath: previousAnimatedSnapPath,
story_id: previousAnimatedSnapStoryID,
blastButtonDisabled: previousAnimatedSnapBlastingDisabled,
hifiButtonDisabled: previousAnimatedSnapHifiSharingDisabled
});
}
tablet.gotoWebScreen(SNAPSHOT_REVIEW_URL); tablet.gotoWebScreen(SNAPSHOT_REVIEW_URL);
tablet.webEventReceived.connect(onMessage); tablet.webEventReceived.connect(onMessage);
HMD.openTablet(); HMD.openTablet();
@ -406,6 +412,7 @@ function isDomainOpen(id, callback) {
} }
function stillSnapshotTaken(pathStillSnapshot, notify) { function stillSnapshotTaken(pathStillSnapshot, notify) {
isLoggedIn = Account.isLoggedIn();
// show hud // show hud
Reticle.visible = reticleVisible; Reticle.visible = reticleVisible;
Reticle.allowMouseCapture = true; Reticle.allowMouseCapture = true;
@ -434,7 +441,8 @@ function stillSnapshotTaken(pathStillSnapshot, notify) {
snapshotOptions = { snapshotOptions = {
containsGif: false, containsGif: false,
processingGif: false, processingGif: false,
canShare: canShare canShare: canShare,
isLoggedIn: isLoggedIn
}; };
imageData = [{ localPath: pathStillSnapshot, href: href }]; imageData = [{ localPath: pathStillSnapshot, href: href }];
tablet.emitScriptEvent(JSON.stringify({ tablet.emitScriptEvent(JSON.stringify({
@ -449,6 +457,7 @@ function stillSnapshotTaken(pathStillSnapshot, notify) {
function processingGifStarted(pathStillSnapshot) { function processingGifStarted(pathStillSnapshot) {
Window.processingGifStarted.disconnect(processingGifStarted); Window.processingGifStarted.disconnect(processingGifStarted);
Window.processingGifCompleted.connect(processingGifCompleted); Window.processingGifCompleted.connect(processingGifCompleted);
isLoggedIn = Account.isLoggedIn();
// show hud // show hud
Reticle.visible = reticleVisible; Reticle.visible = reticleVisible;
Reticle.allowMouseCapture = true; Reticle.allowMouseCapture = true;
@ -468,7 +477,8 @@ function processingGifStarted(pathStillSnapshot) {
containsGif: true, containsGif: true,
processingGif: true, processingGif: true,
loadingGifPath: Script.resolvePath(Script.resourcesPath() + 'icons/loadingDark.gif'), loadingGifPath: Script.resolvePath(Script.resourcesPath() + 'icons/loadingDark.gif'),
canShare: canShare canShare: canShare,
isLoggedIn: isLoggedIn
}; };
imageData = [{ localPath: pathStillSnapshot, href: href }]; imageData = [{ localPath: pathStillSnapshot, href: href }];
tablet.emitScriptEvent(JSON.stringify({ tablet.emitScriptEvent(JSON.stringify({
@ -481,6 +491,7 @@ function processingGifStarted(pathStillSnapshot) {
} }
function processingGifCompleted(pathAnimatedSnapshot) { function processingGifCompleted(pathAnimatedSnapshot) {
isLoggedIn = Account.isLoggedIn();
Window.processingGifCompleted.disconnect(processingGifCompleted); Window.processingGifCompleted.disconnect(processingGifCompleted);
if (!buttonConnected) { if (!buttonConnected) {
button.clicked.connect(onButtonClicked); button.clicked.connect(onButtonClicked);
@ -493,7 +504,9 @@ function processingGifCompleted(pathAnimatedSnapshot) {
snapshotOptions = { snapshotOptions = {
containsGif: true, containsGif: true,
processingGif: false, processingGif: false,
canShare: canShare canShare: canShare,
isLoggedIn: isLoggedIn,
canBlast: location.domainId === Settings.getValue("previousSnapshotDomainID"),
}; };
imageData = [{ localPath: pathAnimatedSnapshot, href: href }]; imageData = [{ localPath: pathAnimatedSnapshot, href: href }];
tablet.emitScriptEvent(JSON.stringify({ tablet.emitScriptEvent(JSON.stringify({
@ -529,10 +542,30 @@ function onTabletScreenChanged(type, url) {
} }
} }
function onUsernameChanged() { function onUsernameChanged() {
if (shareAfterLogin && Account.isLoggedIn()) { fillImageDataFromPrevious();
print('Sharing snapshot after login:', snapshotToShareAfterLogin.path); isDomainOpen(Settings.getValue("previousSnapshotDomainID"), function (canShare) {
Window.shareSnapshot(snapshotToShareAfterLogin.path, snapshotToShareAfterLogin.href); tablet.emitScriptEvent(JSON.stringify({
shareAfterLogin = false; type: "snapshot",
action: "showPreviousImages",
options: snapshotOptions,
image_data: imageData,
canShare: canShare
}));
});
if (isLoggedIn) {
if (shareAfterLogin) {
isDomainOpen(Settings.getValue("previousSnapshotDomainID"), function (canShare) {
if (canShare) {
snapshotToShareAfterLogin.forEach(function (element) {
print('Uploading snapshot after login:', element.path);
Window.shareSnapshot(element.path, element.href);
});
}
});
shareAfterLogin = false;
snapshotToShareAfterLogin = [];
}
} }
} }
function snapshotLocationSet(location) { function snapshotLocationSet(location) {
@ -548,7 +581,7 @@ button.clicked.connect(onButtonClicked);
buttonConnected = true; buttonConnected = true;
Window.snapshotShared.connect(snapshotUploaded); Window.snapshotShared.connect(snapshotUploaded);
tablet.screenChanged.connect(onTabletScreenChanged); tablet.screenChanged.connect(onTabletScreenChanged);
Account.usernameChanged.connect(onUsernameChanged); GlobalServices.myUsernameChanged.connect(onUsernameChanged);
Snapshot.snapshotLocationSet.connect(snapshotLocationSet); Snapshot.snapshotLocationSet.connect(snapshotLocationSet);
Script.scriptEnding.connect(function () { Script.scriptEnding.connect(function () {
if (buttonConnected) { if (buttonConnected) {