Show warning when adding YT videos as HV source

Author: OpenHypervideo

src/_shared/modules/Localization/locale/de.js

@@ -369,5 +369,6 @@ window.FrameTrail_L10n['de'] = {
     "UserRegister": "Neue Nutzer:innen registrieren",
     "UserRoleAdmin": "Admin",
     "UserRoleUser": "User",
-    "UserSelect": "Nutzer:in auswählen"
+    "UserSelect": "Nutzer:in auswählen",
+    "WarningYouTubeSource": "Wenn du ein YouTube-Video als Quelle auswählst, funktioniert das Hypervideo nicht, wenn es als HTML-Datei exportiert und lokal geöffnet wird (YouTube verhindert das)."
 }

src/_shared/modules/Localization/locale/en.js

@@ -369,5 +369,6 @@ window.FrameTrail_L10n['en'] = {
     "UserRegister": "Register New User",
     "UserRoleAdmin": "Admin",
     "UserRoleUser": "User",
-    "UserSelect": "Select a User"
+    "UserSelect": "Select a User",
+    "WarningYouTubeSource": "If you choose a YouTube video as a source, the hypervideo will not work when exported as an HTML file and opened locally (YouTube prevents that)."
 }

src/_shared/modules/Localization/locale/fr.js

@@ -369,5 +369,6 @@ window.FrameTrail_L10n['fr'] = {
     "UserRegister": "Inscrire un nouvel utilisateur",
     "UserRoleAdmin": "Admin",
     "UserRoleUser": "Utilisateur",
-    "UserSelect": "Sélectionner un utilisateur"
+    "UserSelect": "Sélectionner un utilisateur",
+    "WarningYouTubeSource": "Si vous choisissez une vidéo YouTube comme source, l'hypervidéo ne fonctionnera pas lorsque vous l'exporterez en tant que fichier HTML et l'ouvrez localement (YouTube empêche cela)."
 }

src/player/modules/HypervideoSettingsDialog/module.js

@@ -345,14 +345,24 @@ FrameTrail.defineModule('HypervideoSettingsDialog', function(FrameTrail){
             if (!_thumb) return;
             EditHypervideoForm.querySelectorAll('.videoResourceList .resourceThumb').forEach(function(el) { el.classList.remove('selected'); });
             _thumb.classList.add('selected');
-            
+
             var resourceId = _thumb.dataset.resourceid;
             var resource = database.resources[resourceId];
-            
+
             EditHypervideoForm.querySelector('input[name="newResourceId"]').value = resourceId;
             EditHypervideoForm.querySelector('input[name="newResourceSrc"]').value = resource ? resource.src : '';
             // Duration will be determined when video loads - for now use 0 as placeholder
             EditHypervideoForm.querySelector('input[name="newResourceDuration"]').value = resource ? (resource.duration || 0) : 0;
+
+            // Show YouTube warning when selecting a YouTube resource
+            var ytWarning = hypervideoDialogCtrl && hypervideoDialogCtrl.widget().querySelector('.youtubeLocalWarning');
+            if (ytWarning) {
+                if (_thumb.dataset.type === 'youtube') {
+                    ytWarning.classList.add('active');
+                } else {
+                    ytWarning.classList.remove('active');
+                }
+            }
         });
 
         // Helper to get new empty video duration
@@ -942,6 +952,19 @@ FrameTrail.defineModule('HypervideoSettingsDialog', function(FrameTrail){
                 }
             ]
         });
+
+        // Add YouTube warning to buttonpane
+        var buttonPane = hypervideoDialogCtrl.widget().querySelector('.ft-dialog-buttonpane');
+        var ytWarningEl = document.createElement('div');
+        ytWarningEl.className = 'youtubeLocalWarning message warning mt-1';
+        ytWarningEl.style.flexBasis = '100%';
+        ytWarningEl.textContent = labels['WarningYouTubeSource'];
+        buttonPane.prepend(ytWarningEl);
+
+        // Show warning if current source is YouTube
+        if (originalResourceId && database.resources[originalResourceId] && database.resources[originalResourceId].type === 'youtube') {
+            ytWarningEl.classList.add('active');
+        }
     }
 
     /**

src/player/modules/Sidebar/module.js

@@ -393,6 +393,16 @@ FrameTrail.defineModule('Sidebar', function(FrameTrail){
             thumb.classList.add('selected');
             newDialog.querySelector('input[name="resourcesID"]').value = thumb.dataset.resourceid;
 
+            // Show YouTube warning when selecting a YouTube resource
+            var ytWarning = newDialogCtrl && newDialogCtrl.widget().querySelector('.youtubeLocalWarning');
+            if (ytWarning) {
+                if (thumb.dataset.type === 'youtube') {
+                    ytWarning.classList.add('active');
+                } else {
+                    ytWarning.classList.remove('active');
+                }
+            }
+
             // Update button state when video is selected
             updateAddButtonState();
         };
@@ -612,8 +622,14 @@ FrameTrail.defineModule('Sidebar', function(FrameTrail){
             content:  newDialog,
             autoOpen: false,
             open: function() {
-                newDialogCtrl.widget().querySelector('.ft-dialog-buttonpane').append(newDialog.querySelector('.message.error'));
-                addHypervideoButton = newDialogCtrl.widget().querySelector('.ft-dialog-buttonpane button');
+                var buttonPane = newDialogCtrl.widget().querySelector('.ft-dialog-buttonpane');
+                var ytWarningEl = document.createElement('div');
+                ytWarningEl.className = 'youtubeLocalWarning message warning mt-1';
+                ytWarningEl.style.flexBasis = '100%';
+                ytWarningEl.textContent = labels['WarningYouTubeSource'];
+                buttonPane.prepend(ytWarningEl);
+                buttonPane.append(newDialog.querySelector('.message.error'));
+                addHypervideoButton = buttonPane.querySelector('button');
                 addHypervideoButton.disabled = true;
                 updateAddButtonState();
             },