Changed around line 187: class Togger {
- window.open(`/edit.html?folderName=togger.com&fileName=channels%2F${this.currentChannel.id}.scroll`, 'edit')
+ window.open(
+ `/edit.html?folderName=togger.com&fileName=channels%2F${this.currentChannel.id}.scroll`,
+ "edit",
+ )
Changed around line 232: class Togger {
- showVolumeIndicator() {
+ showVolumeIndicator(newVolume) {
- this.showIndicator(isMuted ? "MUTED" : `Volume: ${volume}%`)
+ this.showIndicator(
+ isMuted
+ ? "MUTED"
+ : `Volume: ${newVolume === undefined ? volume : newVolume}%`,
+ )
Changed around line 256: class Togger {
+ const newVolume = Math.min(100, currentVolume + 10)
- this.showVolumeIndicator()
+ this.showVolumeIndicator(newVolume)
- this.player.setVolume(Math.max(0, currentVolume - 10))
- this.showVolumeIndicator()
+ const newVolume = Math.max(0, currentVolume - 10)
+ this.player.setVolume(newVolume)
+ this.showVolumeIndicator(newVolume)
Changed around line 478: class Togger {
- // Remove existing remote if it exists
- // Create remote container
- remote.style.cssText = `
- position: fixed;
- bottom: 1rem;
- right: 1rem;
- width: 256px;
- background: #1f2937;
- border-radius: 0.75rem;
- padding: 1rem;
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
- border: 2px solid #374151;
- z-index: 1000;
- user-select: none;
- touch-action: none;
- `
-
- // Add drag handle
+
- dragHandle.style.cssText = `
- width: 40px;
- height: 4px;
- background: #374151;
- border-radius: 2px;
- cursor: move;
- margin: 0 auto 1rem auto;
- `
+ dragHandle.className = "drag-handle"
- // Add brand name
- brand.style.cssText = `
- text-align: center;
- margin-bottom: 1rem;
- color: #f59e0b;
- font-weight: bold;
- font-size: 0.875rem;
- `
+ brand.className = "brand"
- // Add IR emitter
- irEmitter.style.cssText = `
- position: absolute;
- top: -0.25rem;
- left: 50%;
- transform: translateX(-50%);
- width: 2rem;
- height: 0.75rem;
- background: black;
- border-radius: 0.125rem;
- `
+ irEmitter.className = "ir-emitter"
- // Helper function to create buttons (remains the same)
- button.style.cssText = `
- width: ${options.large ? "3rem" : "3.5rem"};
- height: ${options.large ? "3rem" : "3.5rem"};
- border-radius: 9999px;
- background: ${options.isMute ? "#dc2626" : "#374151"};
- border: 2px solid ${options.isMute ? "#b91c1c" : "#4b5563"};
- box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);
- color: ${options.isMute ? "#fee2e2" : "#d1d5db"};
- font-size: ${options.small ? "0.875rem" : "1.125rem"};
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- transition: transform 0.1s;
- `
-
+ const classes = []
+ if (options.large) classes.push("large")
+ if (options.small) classes.push("small")
+ if (options.isMute) classes.push("mute")
+ button.className = classes.join(" ")
- setTimeout(() => (button.style.transform = "scale(1)"), 100)
+ setTimeout(() => (button.style.transform = ""), 100)
- // Create button rows container (remains the same)
- row.style.cssText = `
- display: flex;
- justify-content: center;
- gap: 2rem;
- margin-bottom: 1.5rem;
- `
+ row.className = "button-row"
- // Add mute button
- // Add channel buttons
- // Add collection control buttons
- // Add volume up/down buttons
- // Add remote to page
- // Add drag functionality
- let currentX
- let currentY
- let initialX
- let initialY
- let xOffset = 0
- let yOffset = 0
+ let currentX, currentY, initialX, initialY
+ let xOffset = 0,
+ yOffset = 0
Changed around line 588: class Togger {
-
- // Ensure the remote stays within viewport bounds
- // const remoteRect = remote.getBoundingClientRect()
- // const maxX = window.innerWidth - remoteRect.width
- // const maxY = window.innerHeight - remoteRect.height
-
- // xOffset = Math.min(Math.max(0, xOffset), maxX)
- // yOffset = Math.min(Math.max(0, yOffset), maxY)
-
- // Add event listeners for both mouse and touch events
-
-
- // Handle window resize
- window.addEventListener("resize", () => {
- if (window.innerWidth > 768) {
- remote.style.display = "none"
- } else {
- remote.style.display = "block"
- }
- })