aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/RecordingBox
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/RecordingBox')
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingBox.tsx8
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingView.scss322
2 files changed, 157 insertions, 173 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index e38a42b29..1f976f926 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -65,7 +65,6 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
};
@undoBatch
- @action
public static WorkspaceStopRecording() {
const remDoc = RecordingBox.screengrabber?.Document;
if (remDoc) {
@@ -90,7 +89,6 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
* @returns
*/
@undoBatch
- @action
public static WorkspaceStartRecording(value: string) {
const screengrabber =
value === 'Record Workspace'
@@ -120,7 +118,6 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
* @param value RecordingBox rootdoc
*/
@undoBatch
- @action
public static replayWorkspace(value: Doc) {
Doc.UserDoc().currentRecording = value;
value.overlayX = 70;
@@ -138,7 +135,6 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
* @param value current recordingbox
*/
@undoBatch
- @action
public static addRecToWorkspace(value: RecordingBox) {
let ffView = Array.from(DocumentManager.Instance.DocumentViews).find(view => view.ComponentView instanceof CollectionFreeFormView);
(ffView?.ComponentView as CollectionFreeFormView)._props.addDocument?.(value.Document);
@@ -149,7 +145,6 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
Doc.UserDoc().workspaceRecordingState = undefined;
}
- @action
public static resumeWorkspaceReplaying(doc: Doc) {
const docView = DocumentManager.Instance.getDocumentView(doc);
if (docView?.ComponentView instanceof VideoBox) {
@@ -158,7 +153,6 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
Doc.UserDoc().workspaceReplayingState = media_state.Playing;
}
- @action
public static pauseWorkspaceReplaying(doc: Doc) {
const docView = DocumentManager.Instance.getDocumentView(doc);
const videoBox = docView?.ComponentView as VideoBox;
@@ -168,7 +162,6 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
Doc.UserDoc().workspaceReplayingState = media_state.Paused;
}
- @action
public static stopWorkspaceReplaying(value: Doc) {
Doc.RemFromMyOverlay(value);
Doc.UserDoc().currentRecording = undefined;
@@ -178,7 +171,6 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
@undoBatch
- @action
public static removeWorkspaceReplaying(value: Doc) {
Doc.RemoveDocFromList(Doc.UserDoc(), 'workspaceRecordings', value);
Doc.RemFromMyOverlay(value);
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.scss b/src/client/views/nodes/RecordingBox/RecordingView.scss
index 287cccd8f..f2d5a980d 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.scss
+++ b/src/client/views/nodes/RecordingBox/RecordingView.scss
@@ -1,208 +1,200 @@
video {
- // flex: 100%;
- width: 100%;
- // min-height: 400px;
- //height: auto;
- height: 100%;
- //display: block;
- object-fit: cover;
- background-color: black;
-}
-
-button {
- margin: 0 .5rem
+ // flex: 100%;
+ width: 100%;
+ // min-height: 400px;
+ //height: auto;
+ height: 100%;
+ //display: block;
+ object-fit: cover;
+ background-color: black;
}
.recording-container {
- height: 100%;
- width: 100%;
- // display: flex;
- pointer-events: all;
- background-color: black;
+ height: 100%;
+ width: 100%;
+ // display: flex;
+ pointer-events: all;
+ background-color: black;
+ button {
+ margin: 0 0.5rem;
+ }
}
.video-wrapper {
- // max-width: 600px;
- // max-width: 700px;
- // position: relative;
- display: flex;
- justify-content: center;
- // overflow: hidden;
- border-radius: 10px;
- margin: 0;
+ // max-width: 600px;
+ // max-width: 700px;
+ // position: relative;
+ display: flex;
+ justify-content: center;
+ // overflow: hidden;
+ border-radius: 10px;
+ margin: 0;
}
.video-wrapper:hover .controls {
- bottom: 34.5px;
- transform: translateY(0%);
- opacity: 100%;
+ bottom: 34.5px;
+ transform: translateY(0%);
+ opacity: 100%;
}
.controls {
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- width: 100%;
- flex-wrap: wrap;
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.1);
- // backdrop-filter: blur(4px);
- border-radius: 10px;
- border: 1px solid rgba(255, 255, 255, 0.18);
- transition: all 0.3s ease-in-out;
- bottom: 34.5px;
- height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ width: 100%;
+ flex-wrap: wrap;
+ background: rgba(255, 255, 255, 0.25);
+ box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.1);
+ // backdrop-filter: blur(4px);
+ border-radius: 10px;
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ transition: all 0.3s ease-in-out;
+ bottom: 34.5px;
+ height: 60px;
}
.controls:active {
- bottom: 40px;
+ bottom: 40px;
}
.actions button {
- background: none;
- border: none;
- outline: none;
- cursor: pointer;
+ background: none;
+ border: none;
+ outline: none;
+ cursor: pointer;
}
.actions button i {
- background-color: none;
- color: white;
- font-size: 30px;
+ background-color: none;
+ color: white;
+ font-size: 30px;
}
-
.velocity {
- appearance: none;
- background: none;
- color: white;
- outline: none;
- border: none;
- text-align: center;
- font-size: 16px;
+ appearance: none;
+ background: none;
+ color: white;
+ outline: none;
+ border: none;
+ text-align: center;
+ font-size: 16px;
}
.mute-btn {
- background: none;
- border: none;
- outline: none;
- cursor: pointer;
+ background: none;
+ border: none;
+ outline: none;
+ cursor: pointer;
}
.mute-btn i {
- background-color: none;
- color: white;
- font-size: 20px;
+ background-color: none;
+ color: white;
+ font-size: 20px;
}
.recording-sign {
- height: 20px;
- width: auto;
- display: flex;
- flex-direction: row;
- position: absolute;
- top: 10px;
- right: 15px;
- align-items: center;
- justify-content: center;
-
- .timer {
- font-size: 15px;
- color: white;
- margin: 0;
- }
-
- .dot {
- height: 15px;
- width: 15px;
- margin: 5px;
- background-color: red;
- border-radius: 50%;
- display: inline-block;
- }
+ height: 20px;
+ width: auto;
+ display: flex;
+ flex-direction: row;
+ position: absolute;
+ top: 10px;
+ right: 15px;
+ align-items: center;
+ justify-content: center;
+
+ .timer {
+ font-size: 15px;
+ color: white;
+ margin: 0;
+ }
+
+ .dot {
+ height: 15px;
+ width: 15px;
+ margin: 5px;
+ background-color: red;
+ border-radius: 50%;
+ display: inline-block;
+ }
}
.controls-inner-container {
- display: flex;
- flex-direction: row;
- position: relative;
- width: 100%;
- align-items: center;
- justify-content: center;
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
}
.record-button-wrapper {
- width: 35px;
- height: 35px;
- font-size: 0;
- background-color: grey;
- border: 0px;
- border-radius: 35px;
- margin: 10px;
- display: flex;
- justify-content: center;
-
- .record-button {
- background-color: red;
- border: 0px;
- border-radius: 50%;
- height: 80%;
- width: 80%;
- align-self: center;
- margin: 0;
-
- &:hover {
- height: 85%;
- width: 85%;
- }
- }
-
- .stop-button {
- background-color: red;
- border: 0px;
- border-radius: 10%;
- height: 70%;
- width: 70%;
- align-self: center;
- margin: 0;
-
-
- // &:hover {
- // width: 40px;
- // height: 40px
- // }
- }
-
+ width: 35px;
+ height: 35px;
+ font-size: 0;
+ background-color: grey;
+ border: 0px;
+ border-radius: 35px;
+ margin: 10px;
+ display: flex;
+ justify-content: center;
+
+ .record-button {
+ background-color: red;
+ border: 0px;
+ border-radius: 50%;
+ height: 80%;
+ width: 80%;
+ align-self: center;
+ margin: 0;
+
+ &:hover {
+ height: 85%;
+ width: 85%;
+ }
+ }
+
+ .stop-button {
+ background-color: red;
+ border: 0px;
+ border-radius: 10%;
+ height: 70%;
+ width: 70%;
+ align-self: center;
+ margin: 0;
+
+ // &:hover {
+ // width: 40px;
+ // height: 40px
+ // }
+ }
}
.options-wrapper {
- height: 100%;
- display: flex;
- flex-direction: row;
- align-content: center;
- position: relative;
- top: 0;
- bottom: 0;
-
- &.video-edit-wrapper {
-
- // right: 50% - 15;
-
- .track-screen {
- font-weight: 200;
- }
-
- }
-
- &.track-screen-wrapper {
-
- // right: 50% - 30;
-
- .track-screen {
- font-weight: 200;
- color: aqua;
- }
-
- }
-} \ No newline at end of file
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ align-content: center;
+ position: relative;
+ top: 0;
+ bottom: 0;
+
+ &.video-edit-wrapper {
+ // right: 50% - 15;
+
+ .track-screen {
+ font-weight: 200;
+ }
+ }
+
+ &.track-screen-wrapper {
+ // right: 50% - 30;
+
+ .track-screen {
+ font-weight: 200;
+ color: aqua;
+ }
+ }
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:57:54 +0000