aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/collections/CollectionSubView.tsx109
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.scss49
-rw-r--r--src/client/views/webcam/DashWebRTCVideo.tsx57
-rw-r--r--src/client/views/webcam/WebCamLogic.js14
4 files changed, 142 insertions, 87 deletions
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index acab45078..343be1b58 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -283,63 +283,74 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
const albumId = matches[3];
const mediaItems = await GooglePhotos.Query.AlbumSearch(albumId);
console.log(mediaItems);
+ return;
}
- const batch = UndoManager.StartBatch("collection view drop");
- const promises: Promise<void>[] = [];
- // tslint:disable-next-line:prefer-for-of
- for (let i = 0; i < e.dataTransfer.items.length; i++) {
- const item = e.dataTransfer.items[i];
- if (item.kind === "string" && item.type.indexOf("uri") !== -1) {
- let str: string;
- const prom = new Promise<string>(resolve => e.dataTransfer.items[i].getAsString(resolve))
- .then(action((s: string) => rp.head(Utils.CorsProxy(str = s))))
- .then(result => {
- const type = result["content-type"];
- if (type) {
- Docs.Get.DocumentFromType(type, str, options)
- .then(doc => doc && this.props.addDocument(doc));
- }
- });
- promises.push(prom);
- }
- const type = item.type;
- if (item.kind === "file") {
- const file = item.getAsFile();
- const formData = new FormData();
-
- if (!file || !file.type) {
- continue;
+ const { items } = e.dataTransfer;
+ const { length } = items;
+ if (length) {
+ const batch = UndoManager.StartBatch("collection view drop");
+ const promises: Promise<void>[] = [];
+ // tslint:disable-next-line:prefer-for-of
+ for (let i = 0; i < length; i++) {
+ const item = e.dataTransfer.items[i];
+ if (item.kind === "string" && item.type.indexOf("uri") !== -1) {
+ let str: string;
+ const prom = new Promise<string>(resolve => item.getAsString(resolve))
+ .then(action((s: string) => rp.head(Utils.CorsProxy(str = s))))
+ .then(result => {
+ const type = result["content-type"];
+ if (type) {
+ Docs.Get.DocumentFromType(type, str, options)
+ .then(doc => doc && this.props.addDocument(doc));
+ }
+ });
+ promises.push(prom);
}
+ const type = item.type;
+ if (item.kind === "file") {
+ const file = item.getAsFile();
+ const formData = new FormData();
+
+ if (!file || !file.type) {
+ continue;
+ }
- formData.append('file', file);
- const dropFileName = file ? file.name : "-empty-";
- promises.push(Networking.PostFormDataToServer("/uploadFormData", formData).then(results => {
- results.map(action((result: any) => {
- const { agnostic, accessPaths, nativeWidth, nativeHeight, contentSize } = result;
- const full = { ...options, _width: 300, title: dropFileName };
- const pathname = Utils.prepend(accessPaths?.agnostic.client || agnostic.client);
- Docs.Get.DocumentFromType(type, pathname, full).then(doc => {
- if (doc) {
- const proto = Doc.GetProto(doc);
- proto.fileUpload = basename(pathname).replace("upload_", "").replace(/\.[a-z0-9]*$/, "");
- nativeWidth && (proto["data-nativeWidth"] = nativeWidth);
- nativeHeight && (proto["data-nativeHeight"] = nativeHeight);
- contentSize && (proto.contentSize = contentSize);
- this.props?.addDocument(doc);
+ formData.append('file', file);
+ const dropFileName = file ? file.name : "-empty-";
+ promises.push(Networking.PostFormDataToServer("/uploadFormData", formData).then(results => {
+ results.map(action((result: any) => {
+ const { accessPaths, nativeWidth, nativeHeight, contentSize } = result;
+ if (Object.keys(accessPaths).length) {
+ const full = { ...options, _width: 300, title: dropFileName };
+ const pathname = Utils.prepend(accessPaths.agnostic.client);
+ Docs.Get.DocumentFromType(type, pathname, full).then(doc => {
+ if (doc) {
+ const proto = Doc.GetProto(doc);
+ proto.fileUpload = basename(pathname).replace("upload_", "").replace(/\.[a-z0-9]*$/, "");
+ nativeWidth && (proto["data-nativeWidth"] = nativeWidth);
+ nativeHeight && (proto["data-nativeHeight"] = nativeHeight);
+ contentSize && (proto.contentSize = contentSize);
+ this.props?.addDocument(doc);
+ }
+ });
+ } else {
+ alert("Upload failed...");
}
- });
+ }));
}));
- }));
+ }
}
- }
- if (promises.length) {
- Promise.all(promises).finally(() => { completed && completed(); batch.end(); });
- } else {
- if (text && !text.includes("https://")) {
- this.props.addDocument(Docs.Create.TextDocument(text, { ...options, _width: 400, _height: 315 }));
+ if (promises.length) {
+ Promise.all(promises).finally(() => { completed && completed(); batch.end(); });
+ } else {
+ if (text && !text.includes("https://")) {
+ this.props.addDocument(Docs.Create.TextDocument(text, { ...options, _width: 400, _height: 315 }));
+ }
+ batch.end();
}
- batch.end();
+ } else {
+ alert("No uploadable content found.");
}
}
}
diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss
index 2f35eeca2..41307a808 100644
--- a/src/client/views/webcam/DashWebRTCVideo.scss
+++ b/src/client/views/webcam/DashWebRTCVideo.scss
@@ -4,7 +4,7 @@
background: whitesmoke;
color: grey;
border-radius: 15px;
- box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+ box-shadow: #9c9396 0.2vw 0.2vw 0.4vw;
border: solid #BBBBBBBB 5px;
pointer-events: all;
display: flex;
@@ -18,29 +18,66 @@
letter-spacing: 2px;
font-size: 16px;
width: 100%;
+ margin-top: 20px;
+ }
+
+ .videoContainer {
+ position: relative;
+ width: calc(100% - 20px);
+ height: 100%;
+ /* border: 10px solid red; */
+ margin-left: 10px;
+ }
+
+ .buttonContainer {
+ display: flex;
+ width: calc(100% - 20px);
+ height: 50px;
+ justify-content: center;
+ text-align: center;
+ /* border: 1px solid black; */
+ margin-left: 10px;
+ margin-top: 0;
+ margin-bottom: 15px;
}
#roomName {
outline: none;
border-radius: inherit;
border: 1px solid #BBBBBBBB;
+ margin: 10px;
+ padding: 10px;
}
.side {
width: 25%;
height: 20%;
position: absolute;
- top: 65%;
+ /* top: 65%; */
z-index: 2;
- right: 5%;
+ right: 0px;
+ bottom: 18px;
}
.main {
position: absolute;
- width: 95%;
- height: 75%;
- top: 20%;
+ width: 100%;
+ height: 100%;
+ /* top: 20%; */
+ align-self: center;
+ }
+
+ .videoButtons {
+ border-radius: 50%;
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ justify-self: center;
align-self: center;
+ margin: 5px;
+ border: 1px solid black;
}
} \ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index cbf75f708..9c339e986 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -8,7 +8,14 @@ import { InkingControl } from "../InkingControl";
import "../../views/nodes/WebBox.scss";
import "./DashWebRTCVideo.scss";
import adapter from 'webrtc-adapter';
-import { initialize, hangup } from "./WebCamLogic";
+import { initialize, hangup, refreshVideos } from "./WebCamLogic";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
+import { faSync, faPhoneSlash } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faSync);
+library.add(faPhoneSlash);
+
/**
* This models the component that will be rendered, that can be used as a doc that will reflect the video cams.
@@ -19,14 +26,6 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
private roomText: HTMLInputElement | undefined;
@observable remoteVideoAdded: boolean = false;
- componentDidMount() {
- DocumentDecorations.Instance.addCloseCall(this.closeConnection);
- }
-
- closeConnection: CloseCall = () => {
- hangup();
- }
-
@action
changeUILook = () => {
this.remoteVideoAdded = true;
@@ -47,34 +46,30 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DashWebRTCVideo, fieldKey); }
- _ignore = 0;
- onPreWheel = (e: React.WheelEvent) => {
- this._ignore = e.timeStamp;
- }
- onPrePointer = (e: React.PointerEvent) => {
- this._ignore = e.timeStamp;
- }
- onPostPointer = (e: React.PointerEvent) => {
- if (this._ignore !== e.timeStamp) {
- e.stopPropagation();
- }
+ @action
+ onClickRefresh = () => {
+ refreshVideos();
}
- onPostWheel = (e: React.WheelEvent) => {
- if (this._ignore !== e.timeStamp) {
- e.stopPropagation();
- }
+
+ onClickHangUp = () => {
+ hangup();
}
render() {
let content =
- <div className="webcam-cont" style={{ width: "100%", height: "100%" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
+ <div className="webcam-cont" style={{ width: "100%", height: "100%" }}>
<div className="webcam-header">DashWebRTC</div>
<input id="roomName" type="text" placeholder="Enter room name" ref={(e) => this.roomText = e!} onKeyDown={this.onEnterKeyDown} />
- <video id="localVideo" className={"RTCVideo" + (this.remoteVideoAdded ? " side" : " main")} autoPlay playsInline muted ref={(e) => {
- }}></video>
- <video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
- }}></video>
-
+ <div className="videoContainer">
+ <video id="localVideo" className={"RTCVideo" + (this.remoteVideoAdded ? " side" : " main")} autoPlay playsInline muted ref={(e) => {
+ }}></video>
+ <video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
+ }}></video>
+ </div>
+ <div className="buttonContainer">
+ <div className="videoButtons" style={{ background: "red" }} onClick={this.onClickHangUp}><FontAwesomeIcon icon={faPhoneSlash} color="white" /></div>
+ <div className="videoButtons" style={{ background: "green" }} onClick={this.onClickRefresh}><FontAwesomeIcon icon={faSync} color="white" /></div>
+ </div>
</div >;
let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
@@ -86,7 +81,7 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
<div className={classname} >
{content}
</div>
- {!frozen ? (null) : <div className="webBox-overlay" onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer} />}
+ {!frozen ? (null) : <div className="webBox-overlay" />}
</>);
}
diff --git a/src/client/views/webcam/WebCamLogic.js b/src/client/views/webcam/WebCamLogic.js
index 3dfb82465..f542fb983 100644
--- a/src/client/views/webcam/WebCamLogic.js
+++ b/src/client/views/webcam/WebCamLogic.js
@@ -277,4 +277,16 @@ function handleRemoteHangup() {
function sendMessage(message) {
console.log('Client sending message: ', message);
socket.emit('message', message, room);
-}; \ No newline at end of file
+};
+
+export function refreshVideos() {
+ var localVideo = document.querySelector('#localVideo');
+ var remoteVideo = document.querySelector('#remoteVideo');
+ if (localVideo) {
+ localVideo.srcObject = localStream;
+ }
+ if (remoteVideo) {
+ remoteVideo.srcObject = remoteStream;
+ }
+
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 00:40:06 +0000