baileytownsend.dev
A stream.place client in a single index.html
very bad history management
+2
-1
README.md
+2
-1
README.md
···
5
Public instance at: [https://bootleg.baileytownsend.dev](https://bootleg.baileytownsend.dev)
6
7
# Features
8
-
- You can watch your favorite streamer on the atmosphere. If you know their handle that is....
9
- It even shows the stream. with play/pause, mute, and volume controls.
10
- Loads chats in as well from stream.place's websocket.
11
- You can login via oauth thanks to [@atcute/oauth-browser-client](https://github.com/mary-ext/atcute/tree/trunk/packages/oauth/browser-client).
···
5
Public instance at: [https://bootleg.baileytownsend.dev](https://bootleg.baileytownsend.dev)
6
7
# Features
8
+
- You can watch your favorite streamer on the atmosphere.
9
+
- Shows everyone who is currently streaming
10
- It even shows the stream. with play/pause, mute, and volume controls.
11
- Loads chats in as well from stream.place's websocket.
12
- You can login via oauth thanks to [@atcute/oauth-browser-client](https://github.com/mary-ext/atcute/tree/trunk/packages/oauth/browser-client).
+30
-6
index.html
+30
-6
index.html
···
1094
let loggedInDid = null;
1095
let loggedInHandle = null;
1096
let currentStreamerDid = null;
1097
1098
// ---- DOM refs ----
1099
const video = document.getElementById("video");
···
1617
//This is when the video is successfully loaded
1618
videoLoadedAt = new Date();
1619
1620
-
window.history.pushState(
1621
-
{},
1622
-
"",
1623
-
`/${streamersHandle}`,
1624
-
);
1625
setStatus("Live", "live");
1626
startStats();
1627
} else if (
···
1698
});
1699
}
1700
1701
-
function disconnect() {
1702
stopStats();
1703
disconnectChat();
1704
if (pc) {
···
1712
statusStats.textContent = "";
1713
connectBtn.style.display = "";
1714
disconnectBtn.style.display = "none";
1715
log("Disconnected");
1716
window.history.pushState({}, "", "/");
1717
showBrowseView();
···
1901
window.togglePlayPause = togglePlayPause;
1902
window.toggleMute = toggleMute;
1903
window.setVolume = setVolume;
1904
1905
// ---- Init ----
1906
updateAuthUI();
···
1094
let loggedInDid = null;
1095
let loggedInHandle = null;
1096
let currentStreamerDid = null;
1097
+
let handlingPopstate = false;
1098
1099
// ---- DOM refs ----
1100
const video = document.getElementById("video");
···
1618
//This is when the video is successfully loaded
1619
videoLoadedAt = new Date();
1620
1621
+
if (!handlingPopstate) {
1622
+
window.history.pushState(
1623
+
{},
1624
+
"",
1625
+
`/${streamersHandle}`,
1626
+
);
1627
+
}
1628
setStatus("Live", "live");
1629
startStats();
1630
} else if (
···
1701
});
1702
}
1703
1704
+
function teardownStream() {
1705
stopStats();
1706
disconnectChat();
1707
if (pc) {
···
1715
statusStats.textContent = "";
1716
connectBtn.style.display = "";
1717
disconnectBtn.style.display = "none";
1718
+
}
1719
+
1720
+
function disconnect() {
1721
+
teardownStream();
1722
log("Disconnected");
1723
window.history.pushState({}, "", "/");
1724
showBrowseView();
···
1908
window.togglePlayPause = togglePlayPause;
1909
window.toggleMute = toggleMute;
1910
window.setVolume = setVolume;
1911
+
1912
+
// ---- History navigation ----
1913
+
window.addEventListener("popstate", () => {
1914
+
handlingPopstate = true;
1915
+
const profile = getProfileFromUrl();
1916
+
if (profile) {
1917
+
if (pc) teardownStream();
1918
+
browseView.classList.remove("visible");
1919
+
mainLayout.style.display = "";
1920
+
usernameInput.value = profile;
1921
+
connect();
1922
+
} else {
1923
+
if (pc) teardownStream();
1924
+
showBrowseView();
1925
+
}
1926
+
handlingPopstate = false;
1927
+
});
1928
1929
// ---- Init ----
1930
updateAuthUI();