diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/ProgressCircle/ProgressCircle.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/ProgressCircle.qml similarity index 100% rename from scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/ProgressCircle/ProgressCircle.qml rename to interface/resources/qml/hifi/simplifiedUI/simplifiedControls/ProgressCircle.qml diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/qmldir b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/qmldir index 6224a6c2fc..49fadf2f21 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/qmldir +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/qmldir @@ -2,6 +2,7 @@ module hifi.simplifiedUI.simplifiedControls Button 1.0 Button.qml CheckBox 1.0 CheckBox.qml InputPeak 1.0 InputPeak.qml +ProgressCircle 1.0 ProgressCircle.qml RadioButton 1.0 RadioButton.qml Slider 1.0 Slider.qml Switch 1.0 Switch.qml diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound.wav b/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound1.wav similarity index 100% rename from scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound.wav rename to scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound1.wav diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound2.wav b/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound2.wav new file mode 100644 index 0000000000..3d917997a7 Binary files /dev/null and b/scripts/simplifiedUI/simplifiedEmote/emojiApp/resources/sounds/emojiPopSound2.wav differ diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/simplifiedEmoji.js b/scripts/simplifiedUI/simplifiedEmote/emojiApp/simplifiedEmoji.js index 688af7fe41..803cfe726f 100644 --- a/scripts/simplifiedUI/simplifiedEmote/emojiApp/simplifiedEmoji.js +++ b/scripts/simplifiedUI/simplifiedEmote/emojiApp/simplifiedEmoji.js @@ -46,13 +46,12 @@ var UTF_CODE = 0; // Plays the specified sound at the specified position, volume, and localOnly // Only plays a sound if it is downloaded. // Only plays one sound at a time. -var soundUrl = Script.resolvePath('./resources/sounds/emojiPopSound.wav'); -var popSound = SoundCache.getSound(soundUrl); +var emojiCreateSound = SoundCache.getSound(Script.resolvePath('resources/sounds/emojiPopSound1.wav')); +var emojiDestroySound = SoundCache.getSound(Script.resolvePath('resources/sounds/emojiPopSound2.wav')); var injector; var DEFAULT_VOLUME = 0.01; var local = false; function playSound(sound, volume, position, localOnly) { - sound = sound || popSound; volume = volume || DEFAULT_VOLUME; position = position || MyAvatar.position; localOnly = localOnly || local; @@ -342,7 +341,7 @@ function playPopAnimation() { } else { // Start with the pop sound on the out currentPopScale = finalInPopScale ? finalInPopScale : MAX_POP_SCALE; - playSound(); + playSound(emojiDestroySound); } } @@ -375,7 +374,7 @@ function playPopAnimation() { if (currentPopStep === POP_ANIMATION_STEPS) { if (popType === "in") { finalInPopScale = currentPopScale; - playSound(); + playSound(emojiCreateSound); dimensions = [ Math.max(dimensions.x, emojiMaxDimensions.x), Math.max(dimensions.y, emojiMaxDimensions.y), diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml b/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml index 75ede7f51e..ad71be4adc 100644 --- a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml +++ b/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml @@ -17,7 +17,6 @@ import hifi.simplifiedUI.simplifiedControls 1.0 as SimplifiedControls import hifi.simplifiedUI.simplifiedConstants 1.0 as SimplifiedConstants import "../../resources/modules/emojiList.js" as EmojiList import "../../resources/modules/customEmojiList.js" as CustomEmojiList -import "./ProgressCircle" Rectangle { id: root @@ -103,8 +102,8 @@ Rectangle { Image { id: mainEmojiLowOpacity - width: 180 - height: 180 + width: mainEmojiImage.width + height: mainEmojiImage.height anchors.centerIn: parent source: mainEmojiImage.source opacity: 0.5 @@ -125,7 +124,7 @@ Rectangle { } // The overlay used during the pie timeout - ProgressCircle { + SimplifiedControls.ProgressCircle { id: progressCircle animationDuration: 7000 // Must match `TOTAL_EMOJI_DURATION_MS` in `simplifiedEmoji.js` anchors.centerIn: mainEmojiImage diff --git a/scripts/simplifiedUI/simplifiedEmote/simplifiedEmote.js b/scripts/simplifiedUI/simplifiedEmote/simplifiedEmote.js index e794895938..99ebd831aa 100644 --- a/scripts/simplifiedUI/simplifiedEmote/simplifiedEmote.js +++ b/scripts/simplifiedUI/simplifiedEmote/simplifiedEmote.js @@ -152,10 +152,10 @@ function toggleReaction(reaction) { if (reactionEnding) { endReactionWrapper(reaction); - updateEmoteIndicatorIcon("images/emote_Icon.svg", true); + updateEmoteIndicatorIcon("images/emote_Icon.svg"); } else { beginReactionWrapper(reaction); - updateEmoteIndicatorIcon("images/" + reaction + "_Icon.svg", true); + updateEmoteIndicatorIcon("images/" + reaction + "_Icon.svg"); } } @@ -279,11 +279,11 @@ function onMessageFromEmoteAppBar(message) { switch (message.method) { case "positive": triggerReactionWrapper("positive"); - updateEmoteIndicatorIcon("images/" + message.method + "_Icon.svg", true); + updateEmoteIndicatorIcon("images/" + message.method + "_Icon.svg"); break; case "negative": triggerReactionWrapper("negative"); - updateEmoteIndicatorIcon("images/" + message.method + "_Icon.svg", true); + updateEmoteIndicatorIcon("images/" + message.method + "_Icon.svg"); break; case "raiseHand": case "applaud": @@ -312,13 +312,12 @@ function getEmojiURLFromCode(code) { return "../../emojiApp/resources/images/emojis/52px/" + emojiFilename; } -function updateEmoteIndicatorIcon(iconURL, colorOverlayVisible) { +function updateEmoteIndicatorIcon(iconURL) { emoteAppBarWindow.sendToQml({ "source": "simplifiedEmote.js", "method": "updateEmoteIndicator", "data": { - "iconURL": iconURL, - "colorOverlayVisible": colorOverlayVisible + "iconURL": iconURL } }); } @@ -530,23 +529,12 @@ function shutdown() { // #region EMOJI_UTILITY var EMOJI_52_BASE_URL = "../../resources/images/emojis/52px/"; -// This duration must match the timeframe over which simplifiedEmoji.qml displays an emoji over the user's head -var EMOJI_DURATION_MS = 7000; -var restoreEmoteIndicatorIconTimeout; function selectedEmoji(code) { emojiAPI.addEmoji(code); // this URL needs to be relative to SimplifiedEmoteIndicator.qml var emojiURL = getEmojiURLFromCode(code); - updateEmoteIndicatorIcon(emojiURL, false); - - if (restoreEmoteIndicatorIconTimeout) { - Script.clearTimeout(restoreEmoteIndicatorIconTimeout); - } - restoreEmoteIndicatorIconTimeout = Script.setTimeout(function () { - updateEmoteIndicatorIcon("images/emote_Icon.svg", true); - restoreEmoteIndicatorIconTimeout = null; - }, EMOJI_DURATION_MS); + updateEmoteIndicatorIcon(emojiURL); } diff --git a/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml b/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml index 14729a610f..4fe5bb8f43 100644 --- a/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml +++ b/scripts/simplifiedUI/simplifiedEmote/ui/qml/SimplifiedEmoteIndicator.qml @@ -15,6 +15,7 @@ import QtGraphicalEffects 1.0 import stylesUit 1.0 as HifiStylesUit import TabletScriptingInterface 1.0 import hifi.simplifiedUI.simplifiedConstants 1.0 as SimplifiedConstants +import hifi.simplifiedUI.simplifiedControls 1.0 as SimplifiedControls Rectangle { id: root @@ -32,6 +33,8 @@ Rectangle { emoteButtonsRepeater.itemAt(3).hovered || emoteButtonsRepeater.itemAt(4).hovered || emoteButtonsRepeater.itemAt(5).hovered) ? expandedWidth : originalWidth; + readonly property int totalEmojiDurationMS: 7000 // Must match `TOTAL_EMOJI_DURATION_MS` in `simplifiedEmoji.js` + readonly property string emoteIconSource: "images/emote_Icon.svg" onRequestedWidthChanged: { root.requestNewWidth(root.requestedWidth); @@ -54,14 +57,77 @@ Rectangle { height: parent.height width: root.originalWidth + Image { + id: emoteIndicatorLowOpacity + width: emoteIndicator.width + height: emoteIndicator.height + anchors.centerIn: parent + source: emoteIndicator.source + opacity: 0.5 + fillMode: Image.PreserveAspectFit + // All "reactions" have associated icon filenames that contain "Icon.svg"; emojis don't. + visible: emoteIndicator.source.toString().indexOf("Icon.svg") === -1 + mipmap: true + } + Image { id: emoteIndicator width: 30 height: 30 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - source: "images/emote_Icon.svg" + source: root.emoteIconSource mipmap: true + visible: false + + onSourceChanged: { + // All "reactions" have associated icon filenames that contain "Icon.svg"; emojis don't. + progressCircle.endAnimation = false; + progressCircle.arcEnd = 360; + progressCircle.endAnimation = true; + + var sourceIsEmojiImage = source.toString().indexOf("Icon.svg") === -1; + + // This kicks off the progress circle animation + if (sourceIsEmojiImage) { + progressCircle.arcEnd = 0; + restoreEmoteIconTimer.restart(); + } else { + restoreEmoteIconTimer.stop(); + } + } + } + + Timer { + id: restoreEmoteIconTimer + running: false + repeat: false + interval: root.totalEmojiDurationMS + onTriggered: { + emoteIndicator.source = root.emoteIconSource; + } + } + + // The overlay used during the pie timeout + SimplifiedControls.ProgressCircle { + id: progressCircle + animationDuration: root.totalEmojiDurationMS + anchors.centerIn: emoteIndicator + size: emoteIndicator.width * 2 + opacity: 0.5 + colorCircle: "#FFFFFF" + colorBackground: "#E6E6E6" + showBackground: false + isPie: true + arcBegin: 0 + arcEnd: 360 + visible: false + } + + OpacityMask { + anchors.fill: emoteIndicator + source: emoteIndicator + maskSource: progressCircle } ColorOverlay { @@ -69,7 +135,8 @@ Rectangle { anchors.fill: emoteIndicator source: emoteIndicator color: "#ffffff" - opacity: 1 + // All "reactions" have associated icon filenames that contain "Icon.svg"; emojis don't. + opacity: emoteIndicator.source.toString().indexOf("Icon.svg") > -1 ? 1.0 : 0.0 } MouseArea { @@ -188,15 +255,9 @@ Rectangle { case "updateEmoteIndicator": print("CHANGING INDICATOR TO: ", JSON.stringify(message)); if (message.data.iconURL) { - var imageURL = message.data.iconURL; - emoteIndicator.source = imageURL; - if (message.data.colorOverlayVisible) { - print("SET OPACITY TO 1"); - emoteIndicatorColorOverlay.opacity = 1; - } else { - print("SET OPACITY TO 0"); - emoteIndicatorColorOverlay.opacity = 0; - } + emoteIndicator.source = message.data.iconURL; + } else { + console.log("SimplifiedEmoteIndicator.qml: Error! `updateEmoteIndicator()` called without a new `iconURL`!"); } break;