Add toggle for music (#17)

This commit is contained in:
Corbin Davenport
2022-01-23 02:30:23 -05:00
parent f113f287fb
commit 4a36a24e07
3 changed files with 61 additions and 10 deletions

View File

@@ -1,5 +1,6 @@
// The active background music track is stored here instead of themeAudio.src
var currentMusic = ''
var musicEnabled = true
// Set MediaSession API info for Chrome media player popup
if ('mediaSession' in navigator) {
@@ -15,17 +16,28 @@ themeAudio.loop = true
// Get stored settings
chrome.storage.local.get({
music: 'wii-shop-theme'
music: 'wii-shop-theme',
musicEnabled: true
}, function (data) {
currentMusic = chrome.extension.getURL('music/' + data.music + '.ogg')
console.log('Music enabled:', data.musicEnabled)
musicEnabled = data.musicEnabled
})
// Change music after settings change
// Update settings after storage change
chrome.storage.onChanged.addListener(function (changes, area) {
if (changes.musicEnabled) {
musicEnabled = changes.musicEnabled.newValue
if (!changes.musicEnabled) {
themeAudio.src = ''
}
}
if (changes.music) {
currentMusic = chrome.extension.getURL('music/' + changes.music.newValue + '.ogg')
themeAudio.src = chrome.extension.getURL('music/' + changes.music.newValue + '.ogg')
themeAudio.play()
if (musicEnabled) {
themeAudio.src = chrome.extension.getURL('music/' + changes.music.newValue + '.ogg')
themeAudio.play()
}
}
})
@@ -33,8 +45,8 @@ chrome.storage.onChanged.addListener(function (changes, area) {
function checkMusic(tabs) {
var url = new URL(tabs[0].url)
var domain = url.hostname.toString().replace('www.', '')
console.log(domain)
if (siteList.includes(domain)) {
console.log(domain, musicEnabled)
if (siteList.includes(domain) && musicEnabled) {
themeAudio.src = currentMusic
themeAudio.play()
} else {

View File

@@ -6,8 +6,38 @@ document.querySelector('#music-picker').addEventListener('change', function () {
})
// Get stored settings
chrome.storage.local.get(function (data) {
document.querySelector('#music-picker').value = data.music;
chrome.storage.local.get({
music: 'wii-shop-theme',
musicEnabled: 'true'
}, function (data) {
document.querySelector('#music-picker').value = data.music
if (data.musicEnabled) {
document.getElementById('music-toggle').innerText = 'Turn off music'
} else {
document.getElementById('music-toggle').innerText = 'Turn on music'
}
})
// Music on/off button
document.getElementById('music-toggle').addEventListener('click', function() {
chrome.storage.local.get({
musicEnabled: true
}, function (data) {
console.log(data)
if (data.musicEnabled) {
// Turn off music
document.getElementById('music-toggle').innerText = 'Turn on music'
chrome.storage.local.set({
musicEnabled: false
})
} else {
// Turn on music
document.getElementById('music-toggle').innerText = 'Turn off music'
chrome.storage.local.set({
musicEnabled: true
})
}
})
})
// Button link functionality

View File

@@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>Wii Shop Channel Music - Settings</title>
<style>
html,
body {
@@ -26,7 +27,11 @@
<body>
<div class="container-fluid">
<label for="music-picker" class="mt-2 form-label">Music Picker</label>
<button class="btn btn-sm btn-wii mt-3 w-100" id="music-toggle">...</button>
<div class="form-text">This toggles background music playback. You may need to switch tabs to take</div>
<label for="music-picker" class="mt-2 form-label">Music picker</label>
<select id="music-picker" multiple size="6" class="form-select w-100" multiple>
<option value="wii-shop-theme">Wii Shop Channel</option>
<option value="wii-shop-banner-theme">Wii Shop Channel (Menu)</option>
@@ -36,7 +41,11 @@
<option value="coconut-mall">Coconut Mall</option>
</select>
<button class="btn btn-sm btn-wii mt-2 mb-2 w-100" data-link="https://discord.com/invite/59wfy5cNHw">Join Discord server</button>
<div class="mt-2">More stuff</div>
<button class="btn btn-sm btn-wii mt-2 w-100" data-link="https://discord.com/invite/59wfy5cNHw">Join Discord server</button>
<button class="btn btn-sm btn-wii mt-2 mb-3 w-100" data-link="https://github.com/corbindavenport/wii-shop-extension/">GitHub repository</button>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/popup.js"></script>