status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: play audio messages

This commit is contained in:
Richard Ramos 2020-07-30 12:07:41 -04:00
parent 484c647f39
commit 5ab1088f7c
No known key found for this signature in database
GPG Key ID: 80D4B01265FDFE8F
11 changed files with 163 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/chat/views/message_list.nim
View File

@ -28,6 +28,8 @@ type
ImageUrls = UserRole + 17
Timeout = UserRole + 18
Image = UserRole + 19
Audio = UserRole + 20
AudioDurationMs = UserRole + 21
QtObject:
type
@ -111,6 +113,8 @@ QtObject:
of ChatMessageRoles.ImageUrls: result = newQVariant(message.imageUrls)
of ChatMessageRoles.Timeout: result = newQVariant(self.timedoutMessages.contains(message.id))
of ChatMessageRoles.Image: result = newQVariant(message.image)
of ChatMessageRoles.Audio: result = newQVariant(message.audio)
of ChatMessageRoles.AudioDurationMs: result = newQVariant(message.audioDurationMs)
method roleNames(self: ChatMessageList): Table[int, string] =
{
@ -132,7 +136,9 @@ QtObject:
ChatMessageRoles.Index.int: "index",
ChatMessageRoles.ImageUrls.int: "imageUrls",
ChatMessageRoles.Timeout.int: "timeout",
ChatMessageRoles.Image.int: "image"
ChatMessageRoles.Image.int: "image",
ChatMessageRoles.Audio.int: "audio",
ChatMessageRoles.AudioDurationMs.int: "audioDurationMs"
}.toTable
proc getMessageIndex(self: ChatMessageList, messageId: string): int {.slot.} =

6
src/signals/messages.nim
View File

@ -146,7 +146,7 @@ proc toMessage*(jsonMsg: JsonNode): Message =
contentType = ContentType(jsonMsg{"contentType"}.getInt)
except:
warn "Unknown content type received", type = jsonMsg{"contentType"}.getInt
contentType = ContentType.Unknown
contentType = ContentType.Message
var message = Message(
alias: jsonMsg{"alias"}.getStr,
@ -172,7 +172,9 @@ proc toMessage*(jsonMsg: JsonNode): Message =
stickerHash: "",
parsedText: @[],
imageUrls: "",
image: $jsonMsg{"image"}.getStr
image: $jsonMsg{"image"}.getStr,
audio: $jsonMsg{"audio"}.getStr,
audioDurationMs: jsonMsg{"audioDurationMs"}.getInt,
)
if jsonMsg["parsedText"].kind != JNull:

9
src/status/chat/message.nim
View File

@ -9,7 +9,8 @@ type ContentType* {.pure.} = enum
Emoji = 4,
Transaction = 5,
Group = 6,
Image = 7
Image = 7,
Audio = 8
type TextItem* = object
textType*: string
@ -33,7 +34,7 @@ type Message* = object
parsedText*: seq[TextItem]
# quotedMessage: # ???
replace*: string # ???
responseTo*: string # ???
responseTo*: string
rtl*: bool # ???
seen*: bool # ???
sticker*: string
@ -45,7 +46,9 @@ type Message* = object
outgoingStatus*: string
imageUrls*: string
image*: string
audio*: string
audioDurationMs*: int
proc `$`*(self: Message): string =
result = fmt"Message(id:{self.id}, chatId:{self.chatId}, clock:{self.clock}, from:{self.fromAuthor}, type:{self.contentType})"
result = fmt"Message(id:{self.id}, chatId:{self.chatId}, clock:{self.clock}, from:{self.fromAuthor}, contentType:{self.contentType})"

3
ui/app/AppLayouts/Chat/ChatColumn/Message.qml
View File

@ -26,10 +26,11 @@ Item {
property bool isEmoji: contentType === Constants.emojiType
property bool isImage: contentType === Constants.imageType
property bool isAudio: contentType === Constants.audioType
property bool isStatusMessage: contentType === Constants.systemMessagePrivateGroupType
property bool isSticker: contentType === Constants.stickerType
property bool isText: contentType === Constants.messageType
property bool isMessage: isEmoji || isImage || isSticker || isText
property bool isMessage: isEmoji || isImage || isSticker || isText || isAudio
property bool isExpired: (outgoingStatus == "sending" && (Math.floor(timestamp) + 180000) < Date.now())

107
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/AudioPlayer.qml Normal file
View File

@ -0,0 +1,107 @@
import QtQuick 2.3
import QtMultimedia 5.14
import "../../../../../shared"
import "../../../../../imports"
Item {
property string audioSource: ""
height: 20
width: 350
Audio {
id: audioMessage
source: audioSource
notifyInterval: 150
}
SVGImage {
id: playButton
source: audioMessage.playbackState == Audio.PlayingState ? "../../../../img/icon-pause.svg" : "../../../../img/icon-play.svg"
width: 15
height: 15
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
MouseArea {
id: playArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onPressed: {
if(audioMessage.playbackState === Audio.PlayingState){
audioMessage.pause();
} else {
audioMessage.play();
}
}
}
}
Rectangle {
height: 2
width: 300
color: Style.current.grey
anchors.verticalCenter: parent.verticalCenter
anchors.left: playButton.right
anchors.leftMargin: 20
Rectangle {
id: progress
height: 2
width: {
if(audioMessage.duration === 0) return 0;
if(audioMessage.playbackState === Audio.StoppedState) return 0;
return parent.width * audioMessage.position / audioMessage.duration;
}
color: Style.current.black
anchors.verticalCenter: parent.verticalCenter
}
Rectangle {
id: handle
width: 10
height: 10
color: Style.current.black
radius: 10
anchors.verticalCenter: parent.verticalCenter
x: progress.width
state: "default"
states: State {
name: "pressed"
when: handleMouseArea.pressed
PropertyChanges {
target: handle;
scale: 1.2
}
}
transitions: Transition {
NumberAnimation {
properties: "scale";
duration: 100;
easing.type: Easing.InOutQuad
}
}
MouseArea {
id: handleMouseArea
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
drag.target: parent
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: parent.parent.width
onPressed: {
handle.state = "pressed"
if(audioMessage.playbackState === Audio.PlayingState){
audioMessage.pause();
}
}
onReleased: {
handle.state = "default"
audioMessage.seek(audioMessage.duration * handle.x / parent.parent.width);
}
}
}
}
}

15
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
View File

@ -136,4 +136,19 @@ Item {
chatHorizontalPadding: 0
}
}
Loader {
id: audioPlayerLoader
active: isAudio
sourceComponent: audioPlayer
anchors.top: chatName.visible ? chatName.bottom : parent.top
anchors.left: chatImage.right
}
Component {
id: audioPlayer
AudioPlayer {
audioSource: audio
}
}
}

19
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml
View File

@ -51,6 +51,9 @@ Item {
case Constants.stickerType:
h += stickerId.height;
break;
case Constants.audioType:
h += audioPlayerLoader.height;
break;
default:
h += chatText.visible ? chatText.height : 0;
h += chatImageContent.visible ? chatImageContent.height: 0;
@ -123,7 +126,21 @@ Item {
imageWidth: 250
}
}
Loader {
id: audioPlayerLoader
active: isAudio
sourceComponent: audioPlayer
anchors.verticalCenter: parent.verticalCenter
}
Component {
id: audioPlayer
AudioPlayer {
audioSource: audio
}
}
Sticker {
id: stickerId
anchors.left: parent.left

1
ui/app/img/icon-pause.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 23 29" height="29px" id="Layer_1" version="1.1" viewBox="0 0 23 29" width="23px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><rect fill="#231F20" height="29" width="9"/><rect fill="#231F20" height="29" width="9" x="14"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 442 B

1
ui/app/img/icon-play.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 23 29" height="29px" id="Layer_1" version="1.1" viewBox="0 0 23 29" width="23px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="#231F20" points="0,28.524 23,14.175 0,-0.175 "/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 403 B

1
ui/imports/Constants.qml
View File

@ -16,6 +16,7 @@ QtObject {
readonly property int transactionType: 5
readonly property int systemMessagePrivateGroupType: 6
readonly property int imageType: 7
readonly property int audioType: 8
readonly property string watchWalletType: "watch"
readonly property string keyWalletType: "key"

2
vendor/status-go vendored

@ -1 +1 @@
Subproject commit 58fcf809eaa5ad1f89253e1027bb8b5abf84c962
Subproject commit e6ae4409e4cf1f248a459ddc8f98ae6a39364bc1