Merge pull request #6 from vordenken/feature/v0.3

Feature/v0.3

.github/FUNDING.yml

@@ -1,3 +1,4 @@
 # Thank you so much for supporting me. This will help me further develop apps and eventually publish them in the AppStore.
 
-buy_me_a_coffee: vordenken
+buy_me_a_coffee: vordenken
+ko_fi: vordenken

.gitignore

@@ -60,3 +60,5 @@ fastlane/report.xml
 fastlane/Preview.html
 fastlane/screenshots/**/*.png
 fastlane/test_output
+
+releases/

AutoPiP Extension/Info.plist

@@ -2,6 +2,17 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>SFSafariToolbarItem</key>
+	<dict>
+		<key>Label</key>
+		<string>AutoPiP</string>
+		<key>Image</key>
+		<string>toolbar-icon.svg</string>
+		<key>Identifier</key>
+		<string>com.vd.AutoPiP.Extension</string>
+		<key>Action</key>
+		<string>Popup</string>
+	</dict>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

AutoPiP Extension/Resources/content.js

@@ -1,5 +1,51 @@
 // content.js
-document.addEventListener("visibilitychange", function() {
+let isEnabled = true;
+
+// Wrapper-Funktionen für Event Listener
+function handleVisibilityChangeWrapper() {
+    if (isEnabled) handleVisibilityChange();
+}
+
+function handleWindowBlurWrapper() {
+    if (isEnabled) handleWindowBlur();
+}
+
+function handleWindowFocusWrapper() {
+    if (isEnabled) handleWindowFocus();
+}
+
+// Initial Event Listener Setup mit Wrapper-Funktionen
+document.addEventListener("visibilitychange", handleVisibilityChangeWrapper);
+window.addEventListener("blur", handleWindowBlurWrapper);
+window.addEventListener("focus", handleWindowFocusWrapper);
+
+// Lade initialen Status
+browser.storage.local.get('enabled', function(result) {
+    isEnabled = result.enabled === undefined ? true : result.enabled;
+});
+
+// Message Listener für Toggle-Befehle
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.command === "toggleAutoPiP") {
+        isEnabled = message.enabled;
+        console.log('AutoPiP enabled:', isEnabled);
+
+        // Wenn deaktiviert, PiP sofort beenden
+        if (!isEnabled && getVideo()) {
+            const video = getVideo();
+            if (document.pictureInPictureElement ||
+                (video.webkitPresentationMode &&
+                 video.webkitPresentationMode === "picture-in-picture")) {
+                disablePiP();
+            }
+        }
+
+        sendResponse({enabled: isEnabled});
+        return true;
+    }
+});
+
+function handleVisibilityChange() {
     const video = getVideo();
     if (!video) return;
 
@@ -9,13 +55,36 @@ document.addEventListener("visibilitychange", function() {
             enablePiP();
         }
     } else {
-        // Tab wird wieder aktiv - beende PiP
-        if (document.pictureInPictureElement ||
-            (video.webkitPresentationMode && video.webkitPresentationMode === "picture-in-picture")) {
+        // Tab wird wieder aktiv - beende PiP nur wenn wir wirklich im Tab sind
+        if (document.hasFocus() &&
+            (document.pictureInPictureElement ||
+            (video.webkitPresentationMode && video.webkitPresentationMode === "picture-in-picture"))) {
             disablePiP();
         }
     }
-});
+}
+
+function handleWindowBlur() {
+    const video = getVideo();
+    if (!video) return;
+
+    // Aktiviere PiP wenn Safari den Fokus verliert und Video läuft
+    if (!video.paused && video.currentTime > 0 && !video.ended) {
+        enablePiP();
+    }
+}
+
+function handleWindowFocus() {
+    const video = getVideo();
+    if (!video) return;
+
+    // Deaktiviere PiP wenn Safari den Fokus erhält und wir im Video-Tab sind
+    if (!document.hidden && document.hasFocus() &&
+        (document.pictureInPictureElement ||
+        (video.webkitPresentationMode && video.webkitPresentationMode === "picture-in-picture"))) {
+        disablePiP();
+    }
+}
 
 // DOM Änderungen überwachen
 new MutationObserver(checkForVideo).observe(document, {

AutoPiP Extension/Resources/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "AutoPiP",
-    "version": "0.2",
+    "version": "0.3",
     "default_locale": "en",
     "description": "Automatically enables Picture-in-Picture mode when switching tabs",
     "icons": {
@@ -13,11 +13,20 @@
     "permissions": [
         "activeTab",
         "<all_urls>",
-        "tabs"
+        "tabs",
+        "storage"
     ],
     "content_scripts": [{
         "matches": ["<all_urls>"],
         "js": ["content.js"],
         "run_at": "document_end"
-    }]
+    }],
+    "browser_action": {
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "images/toolbar-icon-16.png",
+            "48": "images/toolbar-icon-48.png",
+            "128": "images/toolbar-icon-128.png"
+        }
+    }
 }

AutoPiP Extension/Resources/popup.html

@@ -1,11 +1,99 @@
+<!-- popup.html -->
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="popup.css">
-    <script type="module" src="popup.js"></script>
+    <style>
+        body {
+            width: 250px;
+            padding: 15px;
+            font-family: -apple-system;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .app-icon {
+            width: 48px;
+            height: 48px;
+        }
+
+        .app-name {
+            font-size: 18px;
+            font-weight: bold;
+        }
+
+        .version {
+            color: #666;
+            font-size: 12px;
+        }
+
+        .checkbox-container {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: 10px 0;
+        }
+
+        .links {
+            display: flex;
+            gap: 15px;
+            margin-top: 10px;
+        }
+
+        .link-icon {
+            width: 24px;
+            height: 24px;
+            opacity: 0.8;
+            transition: opacity 0.2s;
+        }
+
+        .link-icon:hover {
+            opacity: 1;
+        }
+
+        hr {
+            width: 100%;
+            border: none;
+            border-top: 1px solid #ddd;
+        }
+    </style>
 </head>
 <body>
-    <strong>Hello World!</strong>
+    <div class="header">
+        <img src="images/icon-64.png" class="app-icon" alt="AutoPiP">
+        <div>
+            <div class="app-name">AutoPiP</div>
+            <div class="version">v0.3</div>
+        </div>
+    </div>
+
+    <div class="checkbox-container">
+        <label for="toggleCheckbox">Enabled</label>
+        <input type="checkbox" id="toggleCheckbox" checked>
+    </div>
+
+    <hr>
+
+    <div class="links">
+        <a href="https://github.com/vordenken/AutoPiP" target="_blank">
+            <img src="images/icons8-github-64.png" class="link-icon" alt="GitHub">
+        </a>
+        <a href="https://ko-fi.com/vordenken" target="_blank">
+            <img src="images/icons8-kofi-64.png" class="link-icon" alt="Ko-fi">
+        </a>
+        <a href="https://www.buymeacoffee.com/vordenken" target="_blank">
+            <img src="images/icons8-bmc-64.png" class="link-icon" alt="Buy Me a Coffee">
+        </a>
+    </div>
+
+    <script src="popup.js"></script>
 </body>
 </html>

AutoPiP Extension/Resources/popup.js

@@ -1 +1,36 @@
-console.log("Hello World!", browser);
+// popup.js
+document.addEventListener('DOMContentLoaded', function() {
+    const toggleCheckbox = document.getElementById('toggleCheckbox');
+
+    // Lade gespeicherten Status
+    browser.storage.local.get('enabled', function(result) {
+        const enabled = result.enabled === undefined ? true : result.enabled;
+        toggleCheckbox.checked = enabled;
+
+        // Sende initialen Status an alle Tabs
+        updateAllTabs(enabled);
+    });
+
+    // Checkbox Event Listener
+    toggleCheckbox.addEventListener('change', function() {
+        const enabled = toggleCheckbox.checked;
+        console.log('Checkbox changed to:', enabled); // Debug logging
+
+        // Speichere Status
+        browser.storage.local.set({ enabled: enabled });
+
+        // Update alle Tabs
+        updateAllTabs(enabled);
+    });
+});
+
+function updateAllTabs(enabled) {
+    browser.tabs.query({}, function(tabs) {
+        tabs.forEach(tab => {
+            browser.tabs.sendMessage(tab.id, {
+                command: "toggleAutoPiP",
+                enabled: enabled
+            }).catch(err => console.log('Error sending message to tab:', err));
+        });
+    });
+}