Skip to content

Commit

Permalink
fix a pip related issue that was blocking ambient sounds on Android.
Browse files Browse the repository at this point in the history
  • Loading branch information
@amitmerchant1990
amitmerchant1990 committed Dec 1, 2024
1 parent e29b587 commit 25195db
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 64 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ This is an offline-capable [Notepad](https://notepad.js.org/) which uses the [Se
- Optimal line length for better reading experience.
- [Floating window](https://www.amitmerchant.com/implementing-interactive-floating-windows-using-picture-in-picture-api/) to effectively take notes on top of other apps (in [supported browsers](https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API))
- Download notes as **plain text** or **PDF**.
- Ability to play white noise to help you focus.
- Ability to play ambient noise—**coffee shop**, **rain**, **fireside**, etc.—to help you focus.

[View the app in action](https://twitter.com/amit_merchant/status/756876111959601152)

Expand Down
12 changes: 6 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,12 @@
/>
</a>
</span>
<span title="Play White Noise">
<a href="#white-noise" data-toggle="modal" data-target="#whiteNoiseModal" title="Play White Noise">
<span title="Play Ambient Noise">
<a href="#white-noise" data-toggle="modal" data-target="#whiteNoiseModal" title="Play Ambient Noise">
<span>
<img
src="img/navbar/music.svg"
alt="Play White Noise"
alt="Play Ambient Noise"
/>
</span>
</a>
Expand Down Expand Up @@ -211,7 +211,7 @@ <h4 class="modal-title custom-modal-title">Notepad — Offline capable</h4>
<li><b>Optimal line length</b> for better reading experience.</li>
<li><b>Floating window</b> (in supported browsers) to effectively take notes across other apps.</li>
<li>Download notes as <b>PDF</b> or <b>plain text</b>.</li>
<li>Ability to play <b>white noise</b>—coffee shop, rain, fireside, etc.—to help you focus.</li>
<li>Ability to play <b>ambient noise</b>—coffee shop, rain, fireside, etc.—to help you focus.</li>
<li>It's proudly <a href="https://github.com/amitmerchant1990/notepad" target="_blank">open-source</a>!</li>
</ul>
<p>
Expand Down Expand Up @@ -262,7 +262,7 @@ <h4 class="modal-title custom-modal-title">Notepad — Offline capable</h4>
<div id="changelog" class="container tab-pane fade">
<h4>1st Dec, 2024</h3>
<ul>
<li>Implemented a white noise player to help you focus. You can mix and match the following noises currently: <b>Coffee Shop</b>, <b>Rain</b>, <b>Fireside</b> and <b>White Noise</b>.</li>
<li>Implemented a ambient noise player to help you focus. You can mix and match the following noises currently: <b>Coffee Shop</b>, <b>Rain</b>, <b>Fireside</b> and <b>White Noise</b>.</li>
</ul>

<h4>15th Nov, 2024</h3>
Expand Down Expand Up @@ -553,7 +553,7 @@ <h4 class="modal-title custom-modal-title">Preferences</h4>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title custom-modal-title">White Noise</h4>
<h4 class="modal-title custom-modal-title">Ambient Noise</h4>
</div>
<div class="modal-body">
<div class="sound-buttons">
Expand Down
114 changes: 57 additions & 57 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ The app serves the following features:
- Full-screen mode for a distraction-free writing experience.
- Floating window (in supported browsers) to effectively take notes across other apps.
- Download notes as PDF or plain text.
- Ability to play white noise to help you focus.
- Ability to play ambient noise to help you focus.
- It's proudly open-source!
CAUTION: Since the app uses the browser's localStorage to store your notes,
Expand Down Expand Up @@ -314,70 +314,70 @@ there's a small donate button in the About section.
// button if the browser supports it
if ('documentPictureInPicture' in window) {
$('#pipContainer').show();
}

pipButton.addEventListener('click', async() => {
const appTextarea = document.getElementById("textareaContainer");

// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
width: 350,
height: 500,
});
pipButton.addEventListener('click', async() => {
const appTextarea = document.getElementById("textareaContainer");

[...document.styleSheets].forEach((styleSheet) => {
try {
const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
const style = document.createElement('style');

style.textContent = cssRules;
pipWindow.document.head.appendChild(style);
} catch (e) {
const link = document.createElement('link');

link.rel = 'stylesheet';
link.type = styleSheet.type;
link.media = styleSheet.media;
link.href = styleSheet.href;
pipWindow.document.head.appendChild(link);
}
});
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
width: 350,
height: 500,
});

// Move the textarea to the Picture-in-Picture window.
pipWindow.document.body.append(appTextarea);
[...document.styleSheets].forEach((styleSheet) => {
try {
const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
const style = document.createElement('style');

style.textContent = cssRules;
pipWindow.document.head.appendChild(style);
} catch (e) {
const link = document.createElement('link');

link.rel = 'stylesheet';
link.type = styleSheet.type;
link.media = styleSheet.media;
link.href = styleSheet.href;
pipWindow.document.head.appendChild(link);
}
});

// Move the textarea to the Picture-in-Picture window.
pipWindow.document.body.append(appTextarea);

// Move the textarea back when the Picture-in-Picture window closes.
pipWindow.addEventListener("pagehide", (event) => {
const mainContainer = document.querySelector("#mainContainer");
const textareaContainer = event.target.querySelector("#textareaContainer");
const overlay = document.querySelector(".overlay");
mainContainer.append(textareaContainer);
mainContainer.classList.remove("pip");

overlay.style.display = "none";
overlay.style.pointerEvents = "none";

textareaContainer.classList.remove("dark");
});
});

// Move the textarea back when the Picture-in-Picture window closes.
pipWindow.addEventListener("pagehide", (event) => {
const mainContainer = document.querySelector("#mainContainer");
const textareaContainer = event.target.querySelector("#textareaContainer");
documentPictureInPicture.addEventListener("enter", (event) => {
const playerContainer = document.querySelector("#mainContainer");
const textareaContainer = document.querySelector("#textareaContainer");
const overlay = document.querySelector(".overlay");
mainContainer.append(textareaContainer);
mainContainer.classList.remove("pip");

playerContainer.classList.add("pip");
overlay.style.display = "block";
overlay.style.pointerEvents = "all";

overlay.style.display = "none";
overlay.style.pointerEvents = "none";
if (localStorage.getItem('mode') && localStorage.getItem('mode') == 'dark') {
textareaContainer.classList.add("dark");
}

textareaContainer.classList.remove("dark");
if (!localStorage.getItem('mode') && window.matchMedia('(prefers-color-scheme: dark)').matches) {
textareaContainer.classList.add("dark");
}
});
});

documentPictureInPicture.addEventListener("enter", (event) => {
const playerContainer = document.querySelector("#mainContainer");
const textareaContainer = document.querySelector("#textareaContainer");
const overlay = document.querySelector(".overlay");

playerContainer.classList.add("pip");
overlay.style.display = "block";
overlay.style.pointerEvents = "all";

if (localStorage.getItem('mode') && localStorage.getItem('mode') == 'dark') {
textareaContainer.classList.add("dark");
}

if (!localStorage.getItem('mode') && window.matchMedia('(prefers-color-scheme: dark)').matches) {
textareaContainer.classList.add("dark");
}
});
}

// This changes the application's theme when
// user toggles device's theme preference
Expand Down

0 comments on commit 25195db

Please sign in to comment.