Upload rewrite_fix_v2.js

rewrite_fix_v2.js

@@ -1,15 +1,42 @@
 // Fix rewriteArticle - call correct endpoint for VNEWS
-// This file patches the rewriteArticle function to use /api/rewrite_slide (fast, no AI needed)
-// Fallback to /api/rewrite_share if slide fails
+// Uses /api/rewrite_share which now returns {post, slides}
+// Includes full multilingual voice + emotion UI
 
 (function(){
-  // Override rewriteArticle to call /api/rewrite_slide  
+  // Full voice list with languages and emotions
+  const VOICE_OPTIONS = [
+    {id:'hoaimy', label:'🎙️ Hoài My (VI)', lang:'vi'},
+    {id:'namminh', label:'🎙️ Nam Minh (VI)', lang:'vi'},
+    {id:'andrew', label:'🎙️ Andrew (Multilingual)', lang:'en'},
+    {id:'jenny', label:'🎙️ Jenny (EN)', lang:'en'},
+    {id:'thalita', label:'🎙️ Thalita (PT)', lang:'pt'},
+    {id:'pt_francisco', label:'🎙️ Francisco (PT)', lang:'pt'},
+    {id:'ela', label:'🎙️ Ela (ES)', lang:'es'},
+    {id:'es_carlos', label:'🎙️ Carlos (ES)', lang:'es'},
+    {id:'denise', label:'🎙️ Denise (FR)', lang:'fr'},
+    {id:'katja', label:'🎙️ Katja (DE)', lang:'de'},
+    {id:'nanami', label:'🎙️ Nanami (JA)', lang:'ja'},
+    {id:'sunhee', label:'🎙️ SunHee (KO)', lang:'ko'},
+    {id:'xiaochen', label:'🎙️ XiaoChen (ZH)', lang:'zh'},
+  ];
+
+  const EMOTION_OPTIONS = [
+    {id:'neutral', label:'😐 Trung tính', emoji:'😐'},
+    {id:'happy', label:'😊 Vui vẻ', emoji:'😊'},
+    {id='excited', label:'🔥 Hào hứng', emoji:'🔥'},
+    {id:'sad', label:'😢 Buồn', emoji:'😢'},
+    {id:'humorous', label:'😂 Hài hước', emoji:'😂'},
+    {id:'serious', label:'⚠️ Nghiêm túc', emoji:'⚠️'},
+    {id:'urgent', label:'🚨 Khẩn cấp', emoji:'🚨'},
+    {id:'warm', label:'💖 Ấm áp', emoji:'💖'},
+  ];
+
   window.rewriteArticle = async function(){
     var url = window._currentArticle && window._currentArticle.url;
     if(!url) return;
-    toast('⏳ Đang tạo slide tóm tắt...');
+    toast('⏳ Đang tạo bài đăng Tường AI...');
     try {
-      var r = await fetch('/api/rewrite_slide', {
+      var r = await fetch('/api/rewrite_share', {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
         body: JSON.stringify({url: url, context: document.querySelector('.article-view') ? document.querySelector('.article-view').innerText.slice(0,14000) : ''})
@@ -19,27 +46,141 @@
       toast('✅ Đã đăng Tường AI!');
       if (j.post) prependWallPost(j.post);
       if (j.post && typeof goToWallPost === 'function') goToWallPost(j.post.id);
+      // Show slides if available
       if (j.slides && j.slides.length) {
-        showSlidePreview(j.slides, j.post ? j.post.title : '');
+        setTimeout(function(){ showSlidePreview(j.slides, j.post ? j.post.title : ''); }, 500);
+      }
+      // Show voice + emotion selector
+      if (j.post && !j.post.video) {
+        setTimeout(function(){ showVoiceEmotionSelector(j.post.id, j.post.title, j.post.text); }, 1000);
       }
     } catch(e) {
-      // Fallback: try /api/rewrite_share
+      toast('❌ ' + e.message);
+    }
+  };
+
+  // Full voice + emotion selector popup
+  window.showVoiceEmotionSelector = function(postId, title, text) {
+    var overlay = document.createElement('div');
+    overlay.id = 'voice-emotion-selector';
+    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px';
+    
+    var box = document.createElement('div');
+    box.style.cssText = 'background:#1a1a1a;border:2px solid #2d8659;border-radius:16px;padding:20px;max-width:400px;width:100%;max-height:80vh;overflow-y:auto';
+    
+    var h = '<h3 style="color:#5cb87a;margin-bottom:12px;font-size:16px">🎬 Tạo Short AI</h3>';
+    
+    // Voice selection
+    h += '<div style="margin-bottom:12px"><div style="color:#aaa;font-size:11px;margin-bottom:6px">🎙️ Chọn giọng đọc:</div>';
+    VOICE_OPTIONS.forEach(function(v){
+      h += '<button class="ve-voice-btn" data-voice="'+v.id+'" style="display:inline-block;background:#222;border:1px solid #333;color:#ccc;padding:5px 10px;border-radius:12px;font-size:10px;margin:2px;cursor:pointer" onmouseover="this.style.background=\'#333\'" onmouseout="this.style.background=\'#222\'">'+esc(v.label)+'</button>';
+    });
+    h += '</div>';
+    
+    // Emotion selection
+    h += '<div style="margin-bottom:12px"><div style="color:#aaa;font-size:11px;margin-bottom:6px">😊 Chọn cảm xúc:</div>';
+    EMOTION_OPTIONS.forEach(function(e){
+      h += '<button class="ve-emotion-btn" data-emotion="'+e.id+'" style="display:inline-block;background:#222;border:1px solid #333;color:#ccc;padding:5px 10px;border-radius:12px;font-size:10px;margin:2px;cursor:pointer" onmouseover="this.style.background=\'#333\'" onmouseout="this.style.background=\'#222\'">'+esc(e.label)+'</button>';
+    });
+    h += '</div>';
+    
+    // Speed
+    h += '<div style="margin-bottom:12px"><div style="color:#aaa;font-size:11px;margin-bottom:6px">⚡ Tốc độ:</div>';
+    h += '<select id="ve-speed" style="background:#222;border:1px solid #333;color:#ccc;padding:6px 12px;border-radius:10px;font-size:11px">';
+    h += '<option value="0.85">0.85x — Chậm</option>';
+    h += '<option value="1.0">1.0x — Bình thường</option>';
+    h += '<option value="1.2" selected>1.2x — Nhanh</option>';
+    h += '<option value="1.35">1.35x — Rất nhanh</option>';
+    h += '</select></div>';
+    
+    // Actions
+    h += '<div style="display:flex;gap:8px;margin-top:12px">';
+    h += '<button id="ve-create-btn" style="flex:1;background:#2d8659;border:0;color:#fff;padding:10px;border-radius:12px;font-size:12px;font-weight:700;cursor:pointer">🎬 Tạo Short</button>';
+    h += '<button id="ve-cancel-btn" style="background:#333;border:0;color:#ccc;padding:10px 16px;border-radius:12px;font-size:11px;cursor:pointer">✕</button>';
+    h += '</div>';
+    
+    // Status
+    h += '<div id="ve-status" style="color:#888;font-size:10px;margin-top:8px;display:none"></div>';
+    
+    box.innerHTML = h;
+    overlay.appendChild(box);
+    document.body.appendChild(overlay);
+    
+    var selectedVoice = 'hoaimy';
+    var selectedEmotion = 'neutral';
+    
+    // Voice click handlers
+    box.querySelectorAll('.ve-voice-btn').forEach(function(btn){
+      btn.addEventListener('click', function(){
+        box.querySelectorAll('.ve-voice-btn').forEach(function(b){b.style.borderColor='#333';b.style.background='#222';});
+        this.style.borderColor='#5cb87a';
+        this.style.background='#1a2a1f';
+        selectedVoice = this.dataset.voice;
+      });
+    });
+    // Select first voice by default
+    box.querySelector('.ve-voice-btn').style.borderColor = '#5cb87a';
+    box.querySelector('.ve-voice-btn').style.background = '#1a2a1f';
+    
+    // Emotion click handlers
+    box.querySelectorAll('.ve-emotion-btn').forEach(function(btn){
+      btn.addEventListener('click', function(){
+        box.querySelectorAll('.ve-emotion-btn').forEach(function(b){b.style.borderColor='#333';b.style.background='#222';});
+        this.style.borderColor='#5cb87a';
+        this.style.background='#1a2a1f';
+        selectedEmotion = this.dataset.emotion;
+      });
+    });
+    // Select first emotion by default
+    box.querySelector('.ve-emotion-btn').style.borderColor = '#5cb87a';
+    box.querySelector('.ve-emotion-btn').style.background = '#1a2a1f';
+    
+    // Cancel
+    box.querySelector('#ve-cancel-btn').addEventListener('click', function(){
+      overlay.remove();
+    });
+    
+    // Create short
+    box.querySelector('#ve-create-btn').addEventListener('click', async function(){
+      this.disabled = true;
+      this.textContent = '⏳ Đang tạo...';
+      box.querySelector('#ve-status').style.display = 'block';
+      box.querySelector('#ve-status').textContent = 'Đang tạo video shorts (có thể mất 1-3 phút)...';
+      
       try {
-        var r2 = await fetch('/api/rewrite_share', {
+        var speed = parseFloat(box.querySelector('#ve-speed').value) || 1.2;
+        var r = await fetch('/api/ai/short/' + encodeURIComponent(postId), {
           method: 'POST',
           headers: {'Content-Type': 'application/json'},
-          body: JSON.stringify({url: url, context: document.querySelector('.article-view') ? document.querySelector('.article-view').innerText.slice(0,14000) : ''})
+          body: JSON.stringify({voice: selectedVoice, emotion: selectedEmotion, speed: speed})
         });
-        var j2 = await r2.json();
-        if (r2.ok && !j2.error) {
-          toast('✅ Đã đăng Tường AI!');
-          if (j2.post) prependWallPost(j2.post);
-          if (j2.post && typeof goToWallPost === 'function') goToWallPost(j2.post.id);
-          return;
+        var j = await r.json();
+        if (!r.ok || j.error) throw new Error(j.error || 'Lỗi tạo video');
+        toast('✅ Đã tạo Short AI!');
+        overlay.remove();
+        // Update wall
+        var p = _wallPosts.find(function(x){return String(x.id)===String(postId);});
+        if (p) {
+          p.video = j.video;
+          p.voice = j.voice;
+          p.emotion = j.emotion;
         }
-      } catch(e2) {}
-      toast('❌ ' + e.message);
-    }
+        // Refresh wall view
+        var track = document.getElementById('ai-wall-track');
+        if (track) {
+          var idx = _wallPosts.findIndex(function(x){return String(x.id)===String(postId);});
+          if (idx >= 0) {
+            var el = track.children[idx];
+            if (el) el.outerHTML = makeWallItem(p, idx);
+          }
+        }
+        refreshShortAISlider();
+      } catch(e) {
+        this.disabled = false;
+        this.textContent = '🎬 Tạo Short';
+        box.querySelector('#ve-status').textContent = '❌ ' + e.message;
+      }
+    });
   };
 
   // Show slides as fullscreen overlay
@@ -55,22 +196,36 @@
       overlay.innerHTML = '<div style="position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;z-index:2">' +
         '<button onclick="document.getElementById(\'slide-preview\').remove()" style="background:rgba(0,0,0,.6);border:0;color:#fff;padding:8px 14px;border-radius:20px;font-size:12px;cursor:pointer">✕ Đóng</button>' +
         '<span style="color:#fff;font-size:11px;background:rgba(0,0,0,.6);padding:4px 10px;border-radius:10px">' + (idx+1) + '/' + slides.length + '</span>' +
+        '<button onclick="document.getElementById(\'slide-preview\').remove()" style="background:rgba(0,0,0,.6);border:0;color:#fff;padding:8px 14px;border-radius:20px;font-size:12px;cursor:pointer">✕</button>' +
         '</div>' +
         '<div style="flex:1;display:flex;align-items:center;justify-content:center;padding:20px">' +
         (s.image ? '<img src="' + esc(s.image) + '" style="max-width:100%;max-height:60vh;border-radius:10px;object-fit:contain" onerror="this.style.display=\'none\'">' : '') +
         '</div>' +
         '<div style="padding:16px 20px;background:linear-gradient(transparent,rgba(0,0,0,.9));min-height:100px">' +
-        '<p style="color:#fff;font-size:14px;line-height:1.6">' + esc(s.text) + '</p>' +
+        '<p style="color:#fff;font-size:14px;line-height:1.6;text-align:center">' + esc(s.text) + '</p>' +
         '</div>' +
         '<div style="display:flex;gap:10px;padding:10px 20px 20px;justify-content:center">' +
         '<button onclick="prevSlide()" style="background:#333;border:0;color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;cursor:pointer"' + (idx===0?' disabled style="opacity:.3"':'') + '>← Trước</button>' +
-        '<button onclick="nextSlide()" style="background:#2d8659;border:0;color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;cursor:pointer"' + (idx===slides.length-1?' disabled style="opacity:.3"':'') + '>Tiếp →</button>' +
+        '<button onclick="nextSlideRip(currentSlide)" id="slide-next-btn" style="background:#2d8659;border:0;color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;cursor:pointer"' + (idx===slides.length-1?' disabled style="opacity:.3"':'') + '>Tiếp →</button>' +
         '</div>';
     }
     
-    window.nextSlide = function() { if (currentSlide < slides.length - 1) { currentSlide++; renderSlide(currentSlide); } };
+    window.nextSlideRip = function(currentIdx) { if (currentIdx < slides.length - 1) { currentSlide = currentIdx + 1; renderSlide(currentSlide); } };
     window.prevSlide = function() { if (currentSlide > 0) { currentSlide--; renderSlide(currentSlide); } };
     
+    // Fix: update next button onclick properly
+    var origRender = renderSlide;
+    renderSlide = function(idx) {
+      currentSlide = idx;
+      origRender(idx);
+      var nextBtn = document.getElementById('slide-next-btn');
+      if (nextBtn) {
+        nextBtn.onclick = function(){ if (idx < slides.length - 1) { currentSlide = idx + 1; renderSlide(currentSlide); } };
+        nextBtn.disabled = (idx === slides.length - 1);
+        nextBtn.style.opacity = (idx === slides.length - 1) ? '.3' : '1';
+      }
+    };
+    
     renderSlide(0);
     document.body.appendChild(overlay);
     
@@ -78,8 +233,8 @@
     overlay.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; });
     overlay.addEventListener('touchend', function(e) {
       var diff = e.changedTouches[0].clientX - startX;
-      if (diff < -50) nextSlide();
-      else if (diff > 50) prevSlide();
+      if (diff < -50) window.nextSlideRip(currentSlide);
+      else if (diff > 50) window.prevSlide();
     });
   };
 })();