From a24a48843fdb6c692d098bdb7ffcbfc6b031bee1 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Wed, 26 Apr 2017 16:22:01 -0700 Subject: [PATCH] Checkpoint --- scripts/system/html/css/SnapshotReview.css | 133 ++++++++++------ scripts/system/html/img/shareIcon.png | Bin 0 -> 15201 bytes scripts/system/html/js/SnapshotReview.js | 177 ++++++++++----------- scripts/system/snapshot.js | 83 ++++++++-- 4 files changed, 234 insertions(+), 159 deletions(-) create mode 100644 scripts/system/html/img/shareIcon.png diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css index ef737870e0..fdfc3bfca9 100644 --- a/scripts/system/html/css/SnapshotReview.css +++ b/scripts/system/html/css/SnapshotReview.css @@ -86,71 +86,49 @@ input[type=button].naked:active { } .gifLabel { + position:absolute; + left: 15px; + top: 10px; font-family: Raleway-SemiBold; font-size: 18px; color: white; - float: left; text-shadow: 2px 2px 3px #000000; - margin-left: 20px; -} -.shareButtonDiv { - display: flex; - align-items: center; - font-family: Raleway-SemiBold; - font-size: 14px; - color: white; - float: right; - text-shadow: 2px 2px 3px #000000; - width: 100px; - height: 100%; - margin-right: 10px; -} -.shareButtonLabel { - vertical-align: middle; -} -.shareButton { - background-color: white; - width: 40px; - height: 40px; - border-radius: 50%; - border-width: 0; - margin-left: 5px; -} -.shareButton:hover { - background-color: #afafaf; -} -.shareButton:active { - background-color: white; } +/* +// END styling of snapshot pane and its contents +*/ /* -// START styling of share overlay +// START styling of share bar */ -.shareOverlayDiv { - text-align: center; -} .shareControls { - text-align: left; display: flex; - justify-content: center; + justify-content: space-between; flex-direction: row; - align-items: flex-start; + align-items: center; height: 50px; + line-height: 60px; + width: calc(100% - 8px); + position: absolute; + bottom: 4px; + left: 4px; + right: 4px; } -.shareOverlayLabel { - line-height: 75px; +.shareButtons { + display: flex; + align-items: center; + margin-left: 40px; + height: 100%; } -.hifiShareControls { +.blastToConnections { text-align: left; - width: 40%; - margin-left: 10%; + margin-right: 25px; + height: 29px; } -.buttonShareControls { +.shareWithEveryone { text-align: left; - height: 50px; - line-height: 50px; - width: 40%; - margin-right: 10%; + margin-right: 8px; + height: 29px; } .facebookButton { background-image: url(../img/fb_logo.png); @@ -166,12 +144,65 @@ input[type=button].naked:active { display: inline-block; margin-right: 8px; } +.showShareButtonsButtonDiv { + display: inline-flex; + align-items: center; + font-family: Raleway-SemiBold; + font-size: 14px; + color: white; + text-shadow: 2px 2px 3px #000000; + height: 100%; + margin-right: 10px; +} +.showShareButton { + width: 40px; + height: 40px; + border-radius: 50%; + border-width: 0; + margin-left: 5px; + outline: none; +} +.showShareButton.active { + border-color: #00b4ef; + border-width: 3px; + background-color: white; +} +.showShareButton.active:hover { + background-color: #afafaf; +} +.showShareButton.active:active { + background-color: white; +} +.showShareButton.inactive { + border-width: 0; + background-color: white; +} +.showShareButton.inactive:hover { + background-color: #afafaf; +} +.showShareButton.inactive:active { + background-color: white; +} +.showShareButtonDots { + display: flex; + width: 32px; + height: 40px; + position: absolute; + right: 14px; + pointer-events: none; +} +.showShareButtonDots > span { + width: 10px; + height: 10px; + margin: auto; + background-color: #0093C5; + border-radius: 50%; + border-width: 0; + display: inline; +} /* // END styling of share overlay */ -/* -// END styling of snapshot pane and its contents -*/ /* // START styling of snapshot controls (bottom panel) and its contents diff --git a/scripts/system/html/img/shareIcon.png b/scripts/system/html/img/shareIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..0486ac920222964fc18287bd03131bc70ed942bd GIT binary patch literal 15201 zcmeI3TZ|J`7{|{F5-IM!pkbp3!>mRyPUq6=jMFYlyU<3uuFINTObkqCPP-G@nPFzS z?d}u0(FBA@l&l7fl1PX?NRS6_5Wx_m5i}A*P*CK-#E1%-5LbvsGrhOF-RueB#hhQ# zK78N#f8U({xlCWWy}xf=yXzho0H8e{iw*z)I-SoQ3jhF@@}a)~01J)SMhk#Ni=9s! z*!yZH0Q|4&;IKWMSTD$W)-5S|61odn12~A?1w)dzK$}Ryw5o;3t4EKMgsOzdAzy+? z7!f$4#>P#!VZ3ip9^WGK3fUcYi3OpMHL}o_h(b1_SwbO17V8R{B{*T4B#J}qEg`bU zX-Etw`iY2cLc-_vQ!?ub5&_=L`uHH{eVE`F)=x7$&3Y+@6&PM%SfUIWb`b<2no3F- zh^{TSGnG_`9I>ll3fJkPMo2Gjt14A~Cxxo1IZ<*}bFo>`H5J z%z*R&wDg=Q!`@M-*`q?#MxB=V&#yk zDSF;oCDP53+IrWj!Kh@zu%o0HFU9!>S)btJ1h0=`0s_O-6)BBus*!-Uq)4_jmnsco zo9pO`ni`u^mD z&&HEgxe%tGL{X82lx}7vJFI4r~Fm z$+;z$%@4nRzs|L{IGM{Gr8jU0LL&4L$l6zSz4cNmTsI~TAyx~)|5|ZsvYLa z-I~I6D(4Man)L=ll402I^Lcz?@x@vnZdUZG1(+F*s#&O6&V9vs%bMoIjKYnrgmsCs zu(TEGewGyzrRYF(ZP+E!)gPP{&8?+2qgx1Wf&{h;32YY<*e)cnT}WWNkid2!f$c&9 z+l2(S3khr&64)*zuw6)CyO6+kA%X2e0^5ZIwhIYt7ZTVmB(PmbV7rjOb|Hc7LIT@` z1hxwaY!?#PE+nvBNMO5=z;+>l?Lq?Eg#@+>32YY<*e)cnT}WWNkid2!F{@p!+Fv-K zri92m*&Y7qaNr;SfRJMY2>`|)0ASk$0N4KoVB60C@K3jnwp zkM;}}&L5i$bxbgKKHL4_DBK^>=ZEfo^uk-;zrViYtBcQdpIPazUb@M4o2UV zyDxnFET7E(;a(aLp!HVuUXpp^t{Ep+SfgPU~B)pPj@|X zwk`DK>J?1K{vE-#Wvd^IeX*O|{$29Y07Op|9@#PE+O?#wXJ6;kTD-d+)JR UXL=U)Ie&tU_x42(t=as{e=9bQEdT%j literal 0 HcmV?d00001 diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js index 418e623aa8..8a266198a5 100644 --- a/scripts/system/html/js/SnapshotReview.js +++ b/scripts/system/html/js/SnapshotReview.js @@ -31,7 +31,7 @@ function showSetupComplete() { snapshotImagesDiv.innerHTML = 'Snapshot Instructions' + '
' + "

You're all set!

" + - '

Try taking a snapshot by pressing the button below.

'; + '

Try taking a snapshot by pressing the red button below.

'; } function chooseSnapshotLocation() { EventBridge.emitWebEvent(JSON.stringify({ @@ -54,25 +54,30 @@ function addImage(image_data, isGifLoading, isShowingPreviousImages, canSharePre if (!image_data.localPath) { return; } - var div = document.createElement("DIV"); var id = "p" + idCounter++; + // imageContainer setup + var imageContainer = document.createElement("DIV"); + imageContainer.id = id; + imageContainer.style.width = "100%"; + imageContainer.style.height = "251px"; + imageContainer.style.display = "flex"; + imageContainer.style.justifyContent = "center"; + imageContainer.style.alignItems = "center"; + imageContainer.style.position = "relative"; + // img setup var img = document.createElement("IMG"); - div.id = id; img.id = id + "img"; - div.style.width = "100%"; - div.style.height = "" + 502 / imageCount + "px"; - div.style.display = "flex"; - div.style.justifyContent = "center"; - div.style.alignItems = "center"; - div.style.position = "relative"; if (imageCount > 1) { img.setAttribute("class", "multiple"); } img.src = image_data.localPath; - div.appendChild(img); - document.getElementById("snapshot-images").appendChild(div); - var isGif = img.src.split('.').pop().toLowerCase() === "gif"; + 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) { shareForUrl(id); } else if (isShowingPreviousImages && canSharePreviousImages) { @@ -83,92 +88,68 @@ function appendShareBar(divID, story_id, isGif, hifiShareButtonsDisabled) { 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(createShareOverlay(divID, isGif, story_url, hifiShareButtonsDisabled)); + document.getElementById(divID).appendChild(createShareBar(divID, isGif, story_url, hifiShareButtonsDisabled)); } -function createShareOverlay(parentID, isGif, shareURL, hifiShareButtonsDisabled) { - var shareOverlayContainer = document.createElement("DIV"); - shareOverlayContainer.id = parentID + "shareOverlayContainer"; - shareOverlayContainer.style.position = "absolute"; - shareOverlayContainer.style.top = "0px"; - shareOverlayContainer.style.left = "0px"; - shareOverlayContainer.style.display = "flex"; - shareOverlayContainer.style.alignItems = "flex-end"; - shareOverlayContainer.style.width = "100%"; - shareOverlayContainer.style.height = "100%"; - +function createShareBar(parentID, isGif, shareURL, hifiShareButtonsDisabled) { var shareBar = document.createElement("div"); - shareBar.id = parentID + "shareBar" - shareBar.style.display = "inline"; - shareBar.style.width = "100%"; - shareBar.style.height = "60px"; - shareBar.style.lineHeight = "60px"; - shareBar.style.clear = "both"; - shareBar.style.marginLeft = "auto"; - shareBar.style.marginRight = "auto"; - shareBar.innerHTML = isGif ? 'GIF' : ""; - var shareButtonID = parentID + "shareButton"; - shareBar.innerHTML += '
' + - '' + - '' + - '
' - shareOverlayContainer.appendChild(shareBar); - - var shareOverlayBackground = document.createElement("div"); - shareOverlayBackground.id = parentID + "shareOverlayBackground"; - shareOverlayBackground.style.display = "none"; - shareOverlayBackground.style.position = "absolute"; - shareOverlayBackground.style.zIndex = "1"; - shareOverlayBackground.style.top = "0px"; - shareOverlayBackground.style.left = "0px"; - shareOverlayBackground.style.backgroundColor = "black"; - shareOverlayBackground.style.opacity = "0.5"; - shareOverlayBackground.style.width = "100%"; - shareOverlayBackground.style.height = "100%"; - shareOverlayContainer.appendChild(shareOverlayBackground); - - var shareOverlay = document.createElement("div"); - shareOverlay.id = parentID + "shareOverlay"; - shareOverlay.className = "shareOverlayDiv"; - shareOverlay.style.display = "none"; - shareOverlay.style.width = "100%"; - shareOverlay.style.height = "100%"; - shareOverlay.style.zIndex = "2"; + 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 inviteConnectionsCheckboxID = parentID + "inviteConnectionsCheckbox"; var facebookButtonID = parentID + "facebookButton"; var twitterButtonID = parentID + "twitterButton"; - shareOverlay.innerHTML = '' + - '
' + - '
' + - '
' + - '
' + - '' + - '
' + - '' + - '
' + - '
' + - '' + - '' + + shareBar.innerHTML += '' + + '' + + '
' + + '' + + '' + + '
' + + '' + '
' + '
'; - shareOverlayContainer.appendChild(shareOverlay); - return shareOverlayContainer; + return shareBar; } -function selectImageToShare(selectedID) { - selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID - var shareOverlayContainer = document.getElementById(selectedID + "shareOverlayContainer"); +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 imageContainer = document.getElementById(selectedID); var shareBar = document.getElementById(selectedID + "shareBar"); - var shareOverlayBackground = document.getElementById(selectedID + "shareOverlayBackground"); - var shareOverlay = document.getElementById(selectedID + "shareOverlay"); + var shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv"); + var showShareButtonsButton = document.getElementById(selectedID + "showShareButtonsButton"); - shareOverlay.style.outline = "4px solid #00b4ef"; - shareOverlay.style.outlineOffset = "-4px"; + if (isSelected) { + showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, false) }; + showShareButtonsButton.classList.remove("inactive"); + showShareButtonsButton.classList.add("active"); - shareBar.style.display = "none"; + imageContainer.style.outline = "4px solid #00b4ef"; + imageContainer.style.outlineOffset = "-4px"; - shareOverlayBackground.style.display = "inline"; - shareOverlay.style.display = "inline"; + shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)"; + + shareButtonsDiv.style.opacity = "1.0"; + } else { + showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, true) }; + showShareButtonsButton.classList.remove("active"); + showShareButtonsButton.classList.add("inactive"); + + imageContainer.style.outline = "none"; + + shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)"; + + shareButtonsDiv.style.opacity = "0.0"; + } } function shareForUrl(selectedID) { EventBridge.emitWebEvent(JSON.stringify({ @@ -177,17 +158,29 @@ function shareForUrl(selectedID) { data: paths[parseInt(selectedID.substring(1))] })); } +function blastToConnections(selectedID, isGif) { + selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID + + document.getElementById(selectedID + "blastToConnectionsButton").setAttribute("disabled", "disabled"); + document.getElementById(selectedID + "shareWithEveryoneButton").setAttribute("disabled", "disabled"); + + EventBridge.emitWebEvent(JSON.stringify({ + type: "snapshot", + action: "blastToConnections", + story_id: document.getElementById(selectedID).getAttribute("data-story-id"), + isGif: isGif + })); +} function shareWithEveryone(selectedID, isGif) { selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID + document.getElementById(selectedID + "blastToConnectionsButton").setAttribute("disabled", "disabled"); document.getElementById(selectedID + "shareWithEveryoneButton").setAttribute("disabled", "disabled"); - document.getElementById(selectedID + "inviteConnectionsCheckbox").setAttribute("disabled", "disabled"); EventBridge.emitWebEvent(JSON.stringify({ type: "snapshot", action: "shareSnapshotWithEveryone", story_id: document.getElementById(selectedID).getAttribute("data-story-id"), - isAnnouncement: document.getElementById(selectedID + "inviteConnectionsCheckbox").getAttribute("checked"), isGif: isGif })); } @@ -201,17 +194,9 @@ function shareButtonClicked(selectedID) { } function cancelSharing(selectedID) { selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID - var shareOverlayContainer = document.getElementById(selectedID + "shareOverlayContainer"); var shareBar = document.getElementById(selectedID + "shareBar"); - var shareOverlayBackground = document.getElementById(selectedID + "shareOverlayBackground"); - var shareOverlay = document.getElementById(selectedID + "shareOverlay"); - - shareOverlay.style.outline = "none"; shareBar.style.display = "inline"; - - shareOverlayBackground.style.display = "none"; - shareOverlay.style.display = "none"; } function handleCaptureSetting(setting) { @@ -331,6 +316,6 @@ function testInBrowser(isTestingSetupInstructions) { } else { imageCount = 1; //addImage({ localPath: 'http://lorempixel.com/553/255' }); - addImage({ localPath: 'C:/Users/valef/Desktop/hifi-snap-by-zfox-on-2017-04-26_10-26-53.jpg' }, false, true, true, false); + addImage({ localPath: 'C:/Users/valef/Desktop/hifi-snap-by-zfox-on-2017-04-26_10-26-53.gif' }, false, true, true, false); } } diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js index 06d519969e..9ec81eec10 100644 --- a/scripts/system/snapshot.js +++ b/scripts/system/snapshot.js @@ -85,6 +85,16 @@ function request(options, callback) { // cb(error, responseOfCorrectContentType) httpRequest.send(options.body); } +function openLoginWindow() { + if ((HMD.active && Settings.getValue("hmdTabletBecomesToolbar", false)) + || (!HMD.active && Settings.getValue("desktopTabletBecomesToolbar", true))) { + Menu.triggerOption("Login / Sign Up"); + } else { + tablet.loadQMLOnTop("../../dialogs/TabletLoginDialog.qml"); + HMD.openTablet(); + } +} + function onMessage(message) { // Receives message from the html dialog via the qwebchannel EventBridge. This is complicated by the following: // 1. Although we can send POJOs, we cannot receive a toplevel object. (Arrays of POJOs are fine, though.) @@ -97,7 +107,6 @@ function onMessage(message) { } var isLoggedIn; - var needsLogin = false; switch (message.action) { case 'ready': // DOM is ready and page has loaded tablet.emitScriptEvent(JSON.stringify({ @@ -138,7 +147,8 @@ function onMessage(message) { } break; case 'openSettings': - if ((HMD.active && Settings.getValue("hmdTabletBecomesToolbar", true)) || (!HMD.active && Settings.getValue("desktopTabletBecomesToolbar", false))) { + if ((HMD.active && Settings.getValue("hmdTabletBecomesToolbar", false)) + || (!HMD.active && Settings.getValue("desktopTabletBecomesToolbar", true))) { Desktop.show("hifi/dialogs/GeneralPreferencesDialog.qml", "General Preferences"); } else { tablet.loadQMLOnTop("TabletGeneralPreferences.qml"); @@ -164,6 +174,64 @@ function onMessage(message) { // TODO } break; + case 'blastToConnections': + isLoggedIn = Account.isLoggedIn(); + storyIDsToMaybeDelete.splice(storyIDsToMaybeDelete.indexOf(message.story_id), 1); + if (message.isGif) { + Settings.setValue("previousAnimatedSnapSharingDisabled", true); + } else { + Settings.setValue("previousStillSnapSharingDisabled", true); + } + + if (isLoggedIn) { + print('Uploading new story for announcement!'); + + request({ + uri: METAVERSE_BASE + '/api/v1/user_stories/' + message.story_id, + method: 'GET' + }, function (error, response) { + if (error || (response.status !== 'success')) { + print("ERROR getting details about existing snapshot story:", error || response.status); + return; + } else { + var requestBody = { + user_story: { + audience: "for_feed", + action: "announcement", + path: response.user_story.path, + place_name: response.user_story.place_name, + thumbnail_url: response.user_story.thumbnail_url, + details: { + shareable_url: response.user_story.details.shareable_url, + image_url: response.user_story.details.image_url + } + } + } + request({ + uri: METAVERSE_BASE + '/api/v1/user_stories', + method: 'POST', + json: true, + body: requestBody + }, function (error, response) { + if (error || (response.status !== 'success')) { + print("ERROR uploading announcement story: ", error || response.status); + if (message.isGif) { + Settings.setValue("previousAnimatedSnapSharingDisabled", false); + } else { + Settings.setValue("previousStillSnapSharingDisabled", false); + } + return; + } else { + print("SUCCESS uploading announcement story! Story ID:", response.user_story.id); + } + }); + } + }); + + } else { + openLoginWindow(); + } + break; case 'shareSnapshotWithEveryone': isLoggedIn = Account.isLoggedIn(); storyIDsToMaybeDelete.splice(storyIDsToMaybeDelete.indexOf(message.story_id), 1); @@ -202,19 +270,10 @@ function onMessage(message) { } }); } else { - needsLogin = true; + openLoginWindow(); shareAfterLogin = true; snapshotToShareAfterLogin = { path: message.data, href: message.href || href }; } - if (needsLogin) { - if ((HMD.active && Settings.getValue("hmdTabletBecomesToolbar")) - || (!HMD.active && Settings.getValue("desktopTabletBecomesToolbar"))) { - Menu.triggerOption("Login / Sign Up"); - } else { - tablet.loadQMLOnTop("../../dialogs/TabletLoginDialog.qml"); - HMD.openTablet(); - } - } break; case 'shareButtonClicked': print('Twitter or FB "Share" button clicked! Removing ID', message.story_id, 'from storyIDsToMaybeDelete[].');