Fix: No-op app_v2_shorts_fix.js — all voice/emotion/slide logic now built into app_v2.js to fix conflicts

static/app_v2_shorts_fix.js

@@ -1,383 +1,6 @@
-// VNEWS Short AI Fix - Multilingual voices + emotion selector
-// This file patches makeShortVideo and readWallPost to support full voice list
-
+// app_v2_shorts_fix.js - No-op patch
+// All voice+emotion+slide functionality is now built into app_v2.js directly.
+// This file is kept for backward compatibility but does not override any functions.
 (function(){
-  // Full voice list
-  const VOICE_LIST = [
-    {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_LIST = [
-    {id:'neutral', label:'😐 Trung tính'},
-    {id:'happy', label:'😊 Vui vẻ'},
-    {id:'excited', label:'🔥 Hào hứng'},
-    {id:'sad', label:'😢 Buồn'},
-    {id:'humorous', label:'😂 Hài hước'},
-    {id:'serious', label:'⚠️ Nghiêm túc'},
-    {id:'urgent', label:'🚨 Khẩn cấp'},
-    {id:'warm', label:'💖 Ấm áp'},
-  ];
-
-  // Language detection (lightweight)
-  function detectLanguage(text) {
-    if (!text) return 'vi';
-    var t = text.toLowerCase();
-    var chars = new Set(t);
-    // Vietnamese
-    var vnChars = 'đăâêôơưàảãạáằẳẵặắầẩẫậấèẻẽẹéềễểệếìỉĩịíòỏõọóồổỗộốờởỡợớùủũụúừửữựỳỷỹỵý';
-    var vnCount = 0;
-    for (var c of vnChars) { if (chars.has(c)) vnCount++; }
-    if (vnCount >= 2) return 'vi';
-    
-    // Spanish markers
-    if (chars.has('ñ') || chars.has('¿') || chars.has('¡')) return 'es';
-    
-    // Portuguese markers
-    if (chars.has('ã') || chars.has('õ')) return 'pt';
-    
-    // English default
-    var words = t.split(/\s+/);
-    var enWords = ['the','is','at','which','on','and','or','but','this','that','with','from','have','been'];
-    var enCount = words.filter(function(w){return enWords.indexOf(w)>=0;}).length;
-    if (enCount >= 2) return 'en';
-    
-    return 'vi';
-  }
-
-  // Auto-detect emotion
-  function detectEmotion(text) {
-    if (!text) return 'neutral';
-    var t = text.toLowerCase();
-    var kws = {
-      happy: ['vui','hạnh phúc','tuyệt','thành công','chiến thắng','feliz','maravilloso','happy','joy','wonderful','great','amazing','love','excellent'],
-      excited: ['hào hứng','phấn khích','đột phá','kỷ lục','đỉnh cao','emocionante','increíble','excited','thrilling','unbelievable','awesome','breakthrough'],
-      sad: ['buồn','đau','mất','thảm họa','khủng hoảng','triste','terrible','sad','unhappy','tragic','painful','death'],
-      humorous: ['hài hước','buồn cười','haha','đùa','engraçado','gracioso','funny','hilarious','joke','lol'],
-      serious: ['nghiêm trọng','khẩn cấp','quan trọng','lo ngại','sério','crítico','serious','critical','urgent','severe','crisis'],
-      urgent: ['khẩn cấp','báo động','ngay lập tức','urgent','breaking','alert','emergency'],
-      warm: ['ấm áp','tình cảm','yêu thương','warm','love','heart','touching','beautiful story']
-    };
-    var bestScore = 0;
-    var bestEmotion = 'neutral';
-    for (var em in kws) {
-      var score = 0;
-      for (var kw of kws[em]) {
-        if (t.indexOf(kw) >= 0) score++;
-      }
-      if (score > bestScore) { bestScore = score; bestEmotion = em; }
-    }
-    return bestEmotion;
-  }
-
-  // Auto-select voice based on language
-  function getAutoVoice(lang) {
-    var map = {vi:'hoaimy', pt:'thalita', es:'ela', en:'jenny', fr:'denise', de:'katja', ja:'nanami', ko:'sunhee', zh:'xiaochen'};
-    return map[lang] || 'hoaimy';
-  }
-
-  // Build voice+emotion selector HTML
-  function buildVoiceEmotionSelector(post) {
-    var lang = post.language || detectLanguage(post.title + ' ' + post.text);
-    var autoVoice = post.voice || getAutoVoice(lang);
-    var autoEmotion = post.emotion || detectEmotion(post.title + ' ' + post.text);
-    
-    var h = '<div class="tts-selector" style="margin-top:10px;padding:10px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px">';
-    h += '<div class="tts-selector-label" style="font-size:11px;color:#888;margin-bottom:6px">🎙️ Giọng đọc (ngôn ngữ: ' + lang.toUpperCase() + '):</div>';
-    h += '<div class="tts-voice-btns" style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">';
-    VOICE_LIST.forEach(function(v){
-      var sel = v.id === autoVoice ? 'border-color:#5cb87a;background:#1a2a1f' : 'border-color:#333;background:#222';
-      h += '<button class="tts-voice-btn" data-voice="'+v.id+'" style="'+sel+';border:1px solid;color:#ccc;padding:4px 8px;border-radius:10px;font-size:10px;cursor:pointer">'+v.label+'</button>';
-    });
-    h += '</div>';
-    h += '<div class="tts-selector-label" style="font-size:11px;color:#888;margin-bottom:6px">😊 Cảm xúc:</div>';
-    h += '<div class="tts-emotion-btns" style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">';
-    EMOTION_LIST.forEach(function(e){
-      var sel = e.id === autoEmotion ? 'border-color:#5cb87a;background:#1a2a1f' : 'border-color:#333;background:#222';
-      h += '<button class="tts-emotion-btn" data-emotion="'+e.id+'" style="'+sel+';border:1px solid;color:#ccc;padding:4px 8px;border-radius:10px;font-size:10px;cursor:pointer">'+e.label+'</button>';
-    });
-    h += '</div>';
-    h += '<div class="tts-speed-row" style="display:flex;align-items:center;gap:6px;margin-bottom:8px"><span style="font-size:11px;color:#888">⚡ Tốc độ:</span>';
-    h += '<select class="tts-speed" style="background:#222;border:1px solid #333;color:#ccc;padding:3px 8px;border-radius:8px;font-size:10px">';
-    h += '<option value="0.85">0.85x Chậm</option><option value="1.0">1.0x Bình thường</option><option value="1.2" selected>1.2x Nhanh</option><option value="1.35">1.35x Rất nhanh</option>';
-    h += '</select></div>';
-    h += '<button class="tts-create-btn" style="width:100%;background:#2d8659;border:0;color:#fff;padding:8px;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer">🎬 Tạo Short AI</button>';
-    h += '<input type="hidden" class="tts-selected-voice" value="' + autoVoice + '">';
-    h += '<input type="hidden" class="tts-selected-emotion" value="' + autoEmotion + '">';
-    h += '</div>';
-    return h;
-  }
-
-  // Patch readWallPost to include full voice+emotion selector
-  var origReadWallPost = window.readWallPost;
-  window.readWallPost = function(i){
-    var p = _wallPosts[i];
-    if(!p) return;
-    showView('view-article');
-    var images = p.images || [];
-    var imgGallery = '';
-    if(images.length > 0){
-      imgGallery = '<div style="display:flex;gap:4px;flex-wrap:wrap;margin:8px 0">';
-      images.slice(0,6).forEach(function(imgUrl){
-        imgGallery += '<img src="'+esc(imgUrl)+'" style="width:80px;height:60px;object-fit:cover;border-radius:4px" onerror="this.style.display=\'none\'">';
-      });
-      imgGallery += '</div>';
-    }
-    var hasVideo = p.video && p.video.length > 0;
-    var voiceEmotionHtml = '';
-    if(!hasVideo){
-      voiceEmotionHtml = buildVoiceEmotionSelector(p);
-    } else {
-      voiceEmotionHtml = '<div style="margin-top:10px;padding:10px;background:#1a2a1f;border-radius:8px;font-size:11px;color:#5cb87a">🎬 Voice: ' + (p.voice||'hoaimy') + ' | 😊 Emotion: ' + (p.emotion||'neutral') + ' | ⚡ Speed: ' + (p.short_speed||'1.2') + 'x</div>';
-      voiceEmotionHtml += buildVoiceEmotionSelector(p);
-    }
-    
-    document.getElementById('view-article').innerHTML = 
-      '<button class="back-btn" onclick="switchCat(\'home\')">← Quay lại</button>' +
-      '<div class="article-view"><span class="badge badge-ai">AI</span><h1 class="article-title">'+esc(p.title)+'</h1>' +
-      imgGallery +
-      '<p class="article-p" style="white-space:pre-wrap">'+esc(p.text)+'</p>' +
-      (hasVideo ? '<video class="article-img" src="'+esc(p.video)+'" controls playsinline style="max-height:400px"></video>' : '') +
-      '<div class="article-actions">' +
-      (hasVideo ? '<button onclick="openShortAIFeed('+i+')">🎬 Xem Short</button>' : '') +
-      '</div>' +
-      voiceEmotionHtml +
-      '</div>';
-    window.scrollTo(0,0);
-    
-    // Bind voice/emotion selectors
-    setTimeout(function(){
-      var container = document.querySelector('.tts-selector');
-      if(!container) return;
-      
-      container.querySelectorAll('.tts-voice-btn').forEach(function(btn){
-        btn.addEventListener('click', function(){
-          container.querySelectorAll('.tts-voice-btn').forEach(function(b){b.style.borderColor='#333';b.style.background='#222';});
-          this.style.borderColor='#5cb87a';
-          this.style.background='#1a2a1f';
-          container.querySelector('.tts-selected-voice').value = this.dataset.voice;
-        });
-      });
-      container.querySelectorAll('.tts-emotion-btn').forEach(function(btn){
-        btn.addEventListener('click', function(){
-          container.querySelectorAll('.tts-emotion-btn').forEach(function(b){b.style.borderColor='#333';b.style.background='#222';});
-          this.style.borderColor='#5cb87a';
-          this.style.background='#1a2a1f';
-          container.querySelector('.tts-selected-emotion').value = this.dataset.emotion;
-        });
-      });
-      var createBtn = container.querySelector('.tts-create-btn');
-      if(createBtn){
-        createBtn.addEventListener('click', function(){
-          var postId = p.id;
-          var voice = container.querySelector('.tts-selected-voice').value;
-          var emotion = container.querySelector('.tts-selected-emotion').value;
-          var speed = parseFloat(container.querySelector('.tts-speed').value) || 1.2;
-          window.makeShortVideo(postId, this, voice, speed, emotion);
-        });
-      }
-    }, 100);
-  };
-
-  // Patch makeShortVideo to accept emotion parameter
-  var origMakeShortVideo = window.makeShortVideo;
-  window.makeShortVideo = function(postId, btn, voice, speed, emotion){
-    if(!postId) return;
-    var origText = btn ? btn.textContent : '🎬 Tạo Video';
-    if(btn){btn.disabled=true;btn.textContent='⏳ Đang tạo...';}
-    toast('⏳ Đang tạo video shorts...');
-    try{
-      var url = '/api/ai/short/' + encodeURIComponent(postId);
-      var params = [];
-      if(voice) params.push('voice='+encodeURIComponent(voice));
-      if(speed) params.push('speed='+encodeURIComponent(speed));
-      if(emotion) params.push('emotion='+encodeURIComponent(emotion));
-      if(params.length) url += '?' + params.join('&');
-      
-      fetch(url, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({voice:voice||'hoaimy', emotion:emotion||'neutral', speed:speed||1.2})})
-        .then(function(r){return r.json().then(function(j){return {ok:r.ok, j:j};});})
-        .then(function(result){
-          if(!result.ok || result.j.error) throw new Error(result.j.error||'Lỗi tạo video');
-          toast('✅ Đã tạo video shorts!');
-          var p = _wallPosts.find(function(x){return String(x.id)===String(postId);});
-          if(p){
-            p.video = result.j.video;
-            p.voice = result.j.voice;
-            p.emotion = result.j.emotion;
-            var itemId = 'wall-item-'+postId;
-            var el = document.getElementById(itemId);
-            if(el){
-              var idx = _wallPosts.indexOf(p);
-              el.outerHTML = makeWallItem(p, idx);
-              var newEl = document.getElementById(itemId);
-              if(newEl) newEl.className = 'wall-item wall-item-new';
-            }
-          }
-          refreshShortAISlider();
-        })
-        .catch(function(e){
-          toast('❌ '+e.message);
-          if(btn){btn.disabled=false;btn.textContent=origText;}
-        });
-    }catch(e){
-      toast('❌ '+e.message);
-      if(btn){btn.disabled=false;btn.textContent=origText;}
-    }
-  };
-
-  // Also patch rewriteArticle in app_v2.js to use rewrite_share (not rewrite_slide)
-  window.rewriteArticle = async function(){
-    var url = window._currentArticle && window._currentArticle.url;
-    if(!url) return;
-    toast('⏳ Đang tạo bài đăng Tường AI...');
-    try {
-      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) : ''})
-      });
-      var j = await r.json();
-      if (!r.ok || j.error) throw new Error(j.error);
-      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) {
-        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) {
-      toast('❌ ' + e.message);
-    }
-  };
-
-  // Show voice+emotion selector popup (same as in rewrite_fix_v2.js)
-  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 lang = detectLanguage(title + ' ' + text);
-    var autoEmotion = detectEmotion(title + ' ' + text);
-    var h = '<h3 style="color:#5cb87a;margin-bottom:12px;font-size:16px">🎬 Tạo Short AI (ngôn ngữ: '+lang.toUpperCase()+')</h3>';
-    h += '<div style="margin-bottom:12px"><div style="color:#aaa;font-size:11px;margin-bottom:6px">🎙️ Chọn giọng đọc:</div>';
-    VOICE_LIST.forEach(function(v){
-      var sel = v.id === getAutoVoice(lang) ? 'border-color:#5cb87a;background:#1a2a1f' : 'border-color:#333;background:#222';
-      h += '<button class="ve-voice-btn" data-voice="'+v.id+'" style="display:inline-block;'+sel+';border:1px solid;color:#ccc;padding:5px 10px;border-radius:12px;font-size:10px;margin:2px;cursor:pointer">'+v.label+'</button>';
-    });
-    h += '</div>';
-    h += '<div style="margin-bottom:12px"><div style="color:#aaa;font-size:11px;margin-bottom:6px">😊 Chọn cảm xúc:</div>';
-    EMOTION_LIST.forEach(function(e){
-      var sel = e.id === autoEmotion ? 'border-color:#5cb87a;background:#1a2a1f' : 'border-color:#333;background:#222';
-      h += '<button class="ve-emotion-btn" data-emotion="'+e.id+'" style="display:inline-block;'+sel+';border:1px solid;color:#ccc;padding:5px 10px;border-radius:12px;font-size:10px;margin:2px;cursor:pointer">'+e.label+'</button>';
-    });
-    h += '</div>';
-    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><option value="1.0">1.0x Bình thường</option><option value="1.2" selected>1.2x Nhanh</option><option value="1.35">1.35x Rất nhanh</option></select></div>';
-    h += '<div style="display:flex;gap:8px"><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></div>';
-    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 = getAutoVoice(lang);
-    var selectedEmotion = autoEmotion;
-    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;
-      });
-    });
-    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;
-      });
-    });
-    box.querySelector('#ve-cancel-btn').addEventListener('click', function(){overlay.remove();});
-    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...';
-      try {
-        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({voice: selectedVoice, emotion: selectedEmotion, speed: speed})
-        });
-        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();
-        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; }
-        var track = document.getElementById('ai-wall-track');
-        if (track) {
-          var idx = _wallPosts.findIndex(function(x){return String(x.id)===String(postId);});
-          if (idx >= 0 && track.children[idx]) {
-            track.children[idx].outerHTML = makeWallItem(p, idx);
-          }
-        }
-        refreshShortAISlider();
-      } catch(e) {
-        this.disabled = false; this.textContent = '🎬 Tạo Short';
-        box.querySelector('#ve-status').textContent = '❌ ' + e.message;
-      }
-    });
-  };
-
-  // Show slides fullscreen overlay
-  window.showSlidePreview = function(slides, title) {
-    if (!slides || !slides.length) return;
-    var overlay = document.createElement('div');
-    overlay.id = 'slide-preview';
-    overlay.style.cssText = 'position:fixed;inset:0;background:#000;z-index:99999;display:flex;flex-direction:column;overflow:hidden';
-    var currentSlide = 0;
-    function renderSlide(idx) {
-      var s = slides[idx];
-      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>' +
-        '</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;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="nextSlideRip('+idx+')" 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.nextSlideRip = function(currentIdx) { if (currentIdx < slides.length - 1) { currentSlide = currentIdx + 1; renderSlide(currentSlide); } };
-    window.prevSlide = function() { if (currentSlide > 0) { currentSlide--; renderSlide(currentSlide); } };
-    renderSlide(0);
-    document.body.appendChild(overlay);
-    var startX = 0;
-    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) nextSlideRip(currentSlide);
-      else if (diff > 50) prevSlide();
-    });
-  };
+  console.log("[VNEWS] Shorts fix system loaded (built-in)");
 })();