WIP
This commit is contained in:
27
src/App.ts
27
src/App.ts
@@ -74,16 +74,39 @@ export class App {
|
|||||||
firstRun = false;
|
firstRun = false;
|
||||||
peerManager: PeerManager | null = null;
|
peerManager: PeerManager | null = null;
|
||||||
sync: Sync = new Sync();
|
sync: Sync = new Sync();
|
||||||
renderTimer: number = 0;
|
renderTimer: ReturnType<typeof setTimeout>|null = null;
|
||||||
syncQueues: Map<string, SyncItem[]> = new Map();
|
syncQueues: Map<string, SyncItem[]> = new Map();
|
||||||
syncing: Set<string> = new Set();
|
syncing: Set<string> = new Set();
|
||||||
|
|
||||||
|
updateStatusBar() {
|
||||||
|
return;
|
||||||
|
|
||||||
|
// let statusBarElement = document.getElementById('status_bar');
|
||||||
|
|
||||||
|
// if (!statusBarElement) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let newStatusBar = "";
|
||||||
|
|
||||||
|
|
||||||
|
// for (let [userID, syncItems] of this.syncQueues.entries()) {
|
||||||
|
// let statusBarItem = `<span>${userID} - ${syncItems.length}</span>`;
|
||||||
|
|
||||||
|
// newStatusBar+= statusBarItem;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// statusBarElement.innerHTML = newStatusBar;
|
||||||
|
}
|
||||||
|
|
||||||
async processSyncQueue(userID: string) {
|
async processSyncQueue(userID: string) {
|
||||||
|
|
||||||
if (this.syncing.has(userID)) {
|
if (this.syncing.has(userID)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.updateStatusBar();
|
||||||
|
|
||||||
let syncQueue = this.syncQueues.get(userID) as SyncItem[];
|
let syncQueue = this.syncQueues.get(userID) as SyncItem[];
|
||||||
|
|
||||||
while (syncQueue.length !== 0) {
|
while (syncQueue.length !== 0) {
|
||||||
@@ -110,6 +133,8 @@ export class App {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.syncing.delete(userID);
|
this.syncing.delete(userID);
|
||||||
|
|
||||||
|
this.updateStatusBar();
|
||||||
}
|
}
|
||||||
|
|
||||||
addPostIDsToSyncQueue(userID: string, peerID: string, postIDs: string[]) {
|
addPostIDsToSyncQueue(userID: string, peerID: string, postIDs: string[]) {
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ export class PeerManager {
|
|||||||
eventListeners: Map<PeerEventTypes, Function[]> = new Map();
|
eventListeners: Map<PeerEventTypes, Function[]> = new Map();
|
||||||
reconnectPeriod: number = 10;
|
reconnectPeriod: number = 10;
|
||||||
messageSuperlog = false;
|
messageSuperlog = false;
|
||||||
watchdogInterval: number = 0;
|
watchdogInterval: ReturnType<typeof setTimeout> |null = null;
|
||||||
reconnectTimer: number | null = null;
|
reconnectTimer: number | null = null;
|
||||||
peerStateSuperlog: boolean = false;
|
peerStateSuperlog: boolean = false;
|
||||||
|
|
||||||
@@ -586,7 +586,7 @@ class PeerConnection {
|
|||||||
this.peerManager.disconnectFromPeer(this.remotePeerID);
|
this.peerManager.disconnectFromPeer(this.remotePeerID);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.dataChannel.onerror = (e: RTCErrorEvent) => {
|
this.dataChannel.onerror = (e: RTCErrorEvent) => {
|
||||||
this.dataChannelSuperlog && console.log.apply(null, log(`datachannel from peer ${this.remotePeerID} error:`, e.error));
|
this.dataChannelSuperlog && console.log.apply(null, log(`datachannel from peer ${this.remotePeerID} error:`, e.error));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -42,6 +42,8 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div class="status-bar" id="status_bar"></div>
|
||||||
|
|
||||||
<div id="burger-menu-button" class="burger-menu">☰</div>
|
<div id="burger-menu-button" class="burger-menu">☰</div>
|
||||||
<div class="nav-overlay"></div>
|
<div class="nav-overlay"></div>
|
||||||
|
|
||||||
@@ -79,8 +81,6 @@
|
|||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- <div class="img-button" id="ddln_logo_button"></div> -->
|
<!-- <div class="img-button" id="ddln_logo_button"></div> -->
|
||||||
<div id="status"></div>
|
<div id="status"></div>
|
||||||
|
|||||||
@@ -326,6 +326,11 @@ iframe {
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.profile-pic-container img {
|
.profile-pic-container img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -355,4 +360,34 @@ iframe {
|
|||||||
|
|
||||||
.compose-button:hover {
|
.compose-button:hover {
|
||||||
background-color: rgb(87, 87, 255);
|
background-color: rgb(87, 87, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
display: inline-block;
|
||||||
|
animation-name: spin;
|
||||||
|
animation-duration: 2000ms;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
/* font-size: 64px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.spinner {
|
||||||
|
animation: none;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user