nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: improve utils screen recorder

Browse source
This commit is contained in:
2 * r + 2 * t 2026-06-08 17:05:34 +10:00
parent 2824fd1af9
commit c781c47ae8
1 changed files with 65 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
modules/utilities/cards/Record.qml
View file

@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import Caelestia.Components
import Caelestia.Config import Caelestia.Config
import qs.components import qs.components
import qs.components.controls import qs.components.controls
@ -35,7 +36,7 @@ StyledRect {
StyledRect { StyledRect {
implicitWidth: implicitHeight implicitWidth: implicitHeight
implicitHeight: { implicitHeight: {
const h = icon.implicitHeight + Tokens.padding.large; const h = icon.implicitHeight + Tokens.padding.small * 2;
return h - (h % 2); return h - (h % 2);
} }
@ -46,8 +47,7 @@ StyledRect {
id: icon id: icon
anchors.centerIn: parent anchors.centerIn: parent
anchors.horizontalCenterOffset: -0.5 anchors.verticalCenterOffset: 1
anchors.verticalCenterOffset: 1.5
text: "screen_record" text: "screen_record"
color: Recorder.running ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer color: Recorder.running ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
fontStyle: Tokens.font.icon.large fontStyle: Tokens.font.icon.large
@ -67,15 +67,17 @@ StyledRect {
StyledText { StyledText {
Layout.fillWidth: true Layout.fillWidth: true
text: Recorder.paused ? qsTr("Recording paused") : Recorder.running ? qsTr("Recording running") : qsTr("Recording off") text: Recorder.paused ? qsTr("Paused") : Recorder.running ? qsTr("Running...") : qsTr("Ready")
color: Colours.palette.m3onSurfaceVariant color: Colours.palette.m3onSurfaceVariant
font: Tokens.font.body.small font: Tokens.font.body.small
elide: Text.ElideRight elide: Text.ElideRight
animate: true
} }
} }
SplitButton { SplitButton {
disabled: Recorder.running disabled: Recorder.running
active: menuItems.find(m => root.props.recordingMode === m.icon + m.text) ?? menuItems[0] active: menuItems.find(m => root.props.recordingMode === m.icon + m.text) ?? menuItems[0]
menu.onItemSelected: item => root.props.recordingMode = item.icon + item.text menu.onItemSelected: item => root.props.recordingMode = item.icon + item.text
@ -117,6 +119,7 @@ StyledRect {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: implicitHeight Layout.preferredHeight: implicitHeight
sourceComponent: running ? recordingControls : recordingList sourceComponent: running ? recordingControls : recordingList
clip: Layout.preferredHeight < implicitHeight
Behavior on Layout.preferredHeight { Behavior on Layout.preferredHeight {
id: locHeightAnim id: locHeightAnim
@ -128,21 +131,11 @@ StyledRect {
Behavior on running { Behavior on running {
SequentialAnimation { SequentialAnimation {
ParallelAnimation { Anim {
Anim { target: listOrControls
target: listOrControls property: "opacity"
property: "scale" to: 0
to: 0.7 type: Anim.DefaultEffects
duration: Tokens.anim.durations.small
easing: Tokens.anim.standardAccel
}
Anim {
target: listOrControls
property: "opacity"
to: 0
duration: Tokens.anim.durations.small
easing: Tokens.anim.standardAccel
}
} }
PropertyAction { PropertyAction {
target: locHeightAnim target: locHeightAnim
@ -150,25 +143,22 @@ StyledRect {
value: true value: true
} }
PropertyAction {} PropertyAction {}
PropertyAction {
target: locHeightAnim
property: "enabled"
value: false
}
ParallelAnimation { ParallelAnimation {
Anim { SequentialAnimation {
target: listOrControls PauseAnimation {
property: "scale" duration: 100
to: 1 }
duration: Tokens.anim.durations.small PropertyAction {
easing: Tokens.anim.standardDecel target: locHeightAnim
property: "enabled"
value: false
}
} }
Anim { Anim {
target: listOrControls target: listOrControls
property: "opacity" property: "opacity"
to: 1 to: 1
duration: Tokens.anim.durations.small type: Anim.SlowEffects
easing: Tokens.anim.standardDecel
} }
} }
} }
@ -205,7 +195,7 @@ StyledRect {
animate: true animate: true
text: Recorder.paused ? "PAUSED" : "REC" text: Recorder.paused ? "PAUSED" : "REC"
color: Recorder.paused ? Colours.palette.m3onTertiary : Colours.palette.m3onError color: Recorder.paused ? Colours.palette.m3onTertiary : Colours.palette.m3onError
font: Tokens.font.mono.medium font: Tokens.font.mono.small
} }
Behavior on implicitWidth { Behavior on implicitWidth {
@ -233,6 +223,7 @@ StyledRect {
} }
StyledText { StyledText {
Layout.fillWidth: true
text: { text: {
const elapsed = Recorder.elapsed; const elapsed = Recorder.elapsed;
@ -249,31 +240,52 @@ StyledRect {
return qsTr("Recording for %1").arg(time); return qsTr("Recording for %1").arg(time);
} }
font: Tokens.font.body.medium font: Tokens.font.body.medium
elide: Text.ElideMiddle
} }
Item { ButtonRow {
Layout.fillWidth: true spacing: Tokens.spacing.extraSmall
}
IconButton { IconButton {
label.animate: true shapeMorph: true
icon: Recorder.paused ? "play_arrow" : "pause" isRound: true
isToggle: true label.animate: true
checked: Recorder.paused icon: Recorder.paused ? "play_arrow" : "pause"
type: IconButton.Tonal isToggle: true
font: Tokens.font.icon.large checked: Recorder.paused
onClicked: { type: IconButton.Tonal
Recorder.togglePause(); font: Tokens.font.icon.medium
internalChecked = Recorder.paused; onClicked: {
Recorder.togglePause();
internalChecked = Recorder.paused;
}
implicitWidth: {
// Ensure even size so icon is centered properly
const h = label.implicitHeight + Tokens.padding.large * 2;
if (h % 2 !== 0)
return h + 1;
return h;
}
} }
}
IconButton { IconButton {
icon: "stop" shapeMorph: true
inactiveColour: Colours.palette.m3error isRound: true
inactiveOnColour: Colours.palette.m3onError icon: "stop"
font: Tokens.font.icon.large inactiveColour: Colours.palette.m3error
onClicked: Recorder.stop() inactiveOnColour: Colours.palette.m3onError
font: Tokens.font.icon.medium
onClicked: Recorder.stop()
implicitWidth: {
// Ensure even size so icon is centered properly
const h = label.implicitHeight + Tokens.padding.large * 2;
if (h % 2 !== 0)
return h + 1;
return h;
}
}
} }
} }
} }