Skip to content

Commit

Permalink
wake lock final
Browse files Browse the repository at this point in the history
  • Loading branch information
@jason-murray
jason-murray committed Sep 4, 2024
1 parent b9df181 commit 2a9572a
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 90 deletions.
169 changes: 84 additions & 85 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,111 +11,110 @@ const resizeRef = ref(null);
onMounted(async () => {
let drag = false;
let drag = false;
let move = 0;
let move = 0;
function interactStart (e) {
drag = true;
function interactStart(e) {
drag = true;
if (device.mobile()) {
if (device.landscape()) {
move = e.touches[0].clientX;
} else {
move = e.touches[0].clientY;
}
} else {
move = e.y;
if (device.mobile()) {
if (device.landscape()) {
move = e.touches[0].clientX;
} else {
move = e.touches[0].clientY;
}
} else {
move = e.y;
}
}
}
function interactMove (e) {
if (device.mobile()) {
if (device.landscape()) {
move = e.touches[0].clientX;
} else {
move = e.touches[0].clientY;
}
} else {
move = e.y;
}
function interactMove(e) {
if (drag) {
if (device.mobile() && device.landscape()) {
topRef.value.style.width = move - resizeRef.value.getBoundingClientRect().width / 2 + "px";
if (device.mobile()) {
if (device.landscape()) {
move = e.touches[0].clientX;
} else {
move = e.touches[0].clientY;
}
} else {
topRef.value.style.height = move - resizeRef.value.getBoundingClientRect().height / 2 + "px";
move = e.y;
}
if (drag) {
if (device.mobile() && device.landscape()) {
topRef.value.style.width = move - resizeRef.value.getBoundingClientRect().width / 2 + "px";
} else {
topRef.value.style.height = move - resizeRef.value.getBoundingClientRect().height / 2 + "px";
}
e.preventDefault();
}
e.preventDefault();
}
}
function interactEnd (e) {
drag = false;
}
function interactEnd(e) {
drag = false;
}
resizeRef.value.addEventListener("mousedown", interactStart);
resizeRef.value.addEventListener("touchstart", interactStart);
resizeRef.value.addEventListener("mousedown", interactStart);
resizeRef.value.addEventListener("touchstart", interactStart);
containerRef.value.addEventListener("mousemove", interactMove);
containerRef.value.addEventListener("touchmove", interactMove);
containerRef.value.addEventListener("mousemove", interactMove);
containerRef.value.addEventListener("touchmove", interactMove);
containerRef.value.addEventListener("mouseup", interactEnd);
containerRef.value.addEventListener("touchend", interactEnd);
containerRef.value.addEventListener("mouseup", interactEnd);
containerRef.value.addEventListener("touchend", interactEnd);
if (device.mobile() && device.landscape()) {
topRef.value.style.width = window.innerWidth / 2 + "px";
} else {
topRef.value.style.height = window.innerHeight / 3 + "px";
}
if (device.mobile() && device.landscape()) {
topRef.value.style.width = window.innerWidth / 2 + "px";
} else {
topRef.value.style.height = window.innerHeight / 3 + "px";
}
// scroll chat-scroll-container to bottom
let chatScrollContainer = document.querySelector(".chat-scroll-container");
chatScrollContainer.scrollTop = chatScrollContainer.scrollHeight;
// scroll chat-scroll-container to bottom
let chatScrollContainer = document.querySelector(".chat-scroll-container");
chatScrollContainer.scrollTop = chatScrollContainer.scrollHeight;
// Scroll to bottom on orientation change
device.onChangeOrientation(newOrientation => {
if(!device.mobile()){
return;
}
// Scroll to bottom on orientation change
device.onChangeOrientation(newOrientation => {
if (!device.mobile()) {
return;
}
if (newOrientation === "landscape") {
topRef.value.scrollTop = topRef.value.scrollHeight;
topRef.value.style.height = '';
topRef.value.style.width = window.innerHeight / 2 + "px";
} else {
topRef.value.style.width = '';
topRef.value.style.height = window.innerWidth / 3 + "px";
}
});
// Create a reference for the Wake Lock.
let wakeLock = null;
// create an async function to request a wake lock
setInterval(async () => {
try {
wakeLock = await navigator.wakeLock.request("screen");
} catch (err) {
// The Wake Lock request has failed - usually system related, such as battery.
console.log(`${err.name}, ${err.message}`);
}
}, 10000);
if (newOrientation === "landscape") {
topRef.value.scrollTop = topRef.value.scrollHeight;
topRef.value.style.height = '';
topRef.value.style.width = window.innerHeight / 2 + "px";
} else {
topRef.value.style.width = '';
topRef.value.style.height = window.innerWidth / 3 + "px";
}
});
// Create a reference for the Wake Lock.
let wakeLock = null;
// create an async function to request a wake lock (only works on https)
setInterval(async () => {
try {
wakeLock = await navigator.wakeLock.request("screen");
} catch (err) {
console.log(`${err.name}, ${err.message}`);
}
}, 10000);
})
</script>

<template>
<main class="h-dvh">
<div class="resizeable-container" ref="containerRef">
<div class="top flex-shrink-0 overflow-y-auto px-3" ref="topRef">
<NotificationFeed />
</div>
<div class="resize" ref="resizeRef"></div>
<div class="bottom">
<ChatFeed />
</div>
</div>
</main>
<main class="h-dvh">
<div class="resizeable-container" ref="containerRef">
<div class="top flex-shrink-0 overflow-y-auto px-3" ref="topRef">
<NotificationFeed />
</div>
<div class="resize" ref="resizeRef"></div>
<div class="bottom">
<ChatFeed />
</div>
</div>
</main>
</template>
11 changes: 8 additions & 3 deletions src/components/ChatFeed.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const size = url.searchParams.get("size") ?? 1;
const font = url.searchParams.get("font") ?? 1;
iframeSrc.value = `https://www.giambaj.it/twitch/jchat/v2/?channel=${channel}&size=${size}&font=${font}`;
onMounted( () => {
onMounted(() => {
// on scroll up chat-scroll-container display scroll to bottom button
setInterval(() => {
if (Math.ceil(chatScrollContainer.value.scrollTop) + chatScrollContainer.value.clientHeight < chatScrollContainer.value.scrollHeight) {
Expand Down Expand Up @@ -43,8 +43,13 @@ function scrollToBottom() {
<iframe class="chat-frame" :src="iframeSrc"></iframe>
</div>
<Transition name="slide-fade">
<button v-if="scrolled" @click="scrollToBottom" class="svg scroll-to-bottom-button bg-purple-700 hover:bg-purple-800 drop-shadow-lg rounded-full p-1 font-bold">
<svg width="30px" height="30px" class="translate-y-[2px]" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>
<button v-if="scrolled" @click="scrollToBottom"
class="svg scroll-to-bottom-button bg-purple-700 hover:bg-purple-800 drop-shadow-lg rounded-full p-1 font-bold">
<svg width="30px" height="30px" class="translate-y-[2px]" viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg">
<path
d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" />
</svg>
</button>
</Transition>
</template>
4 changes: 2 additions & 2 deletions src/components/NotificationFeed.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ let i = 0;
ws[i] = debug ? new WebSocket('wss://example.com') : new WebSocket('wss://eventsub.wss.twitch.tv/ws?keepalive_timeout_seconds=10');
function subscribe_to_events(session_id) {
fetch('https://api.twitch.tv/helix/eventsub/subscriptions', {
method: 'POST',
headers: {
Expand All @@ -124,7 +124,7 @@ function subscribe_to_events(session_id) {
}
})
}).then(response => response.json())
.then(data => console.log(data));
.then(data => console.log(data));
}
let wsAliveInt = 0;
Expand Down

0 comments on commit 2a9572a

Please sign in to comment.