'+esc((d.standings && (typeof d.standings==='string'?d.standings:JSON.stringify(d.standings)))||'Bảng xếp hạng đang cập nhật')+'
';
- } else if(tab === 'highlights'){
- el.innerHTML = ''+esc((d.highlights && (typeof d.highlights==='string'?d.highlights:JSON.stringify(d.highlights)))||'Highlight đang cập nhật')+'
';
- } else if(tab === 'stats'){
- el.innerHTML = ''+esc((d.stats && (typeof d.stats==='string'?d.stats:JSON.stringify(d.stats)))||'Thống kê đang cập nhật')+'
';
- } else {
- var news = (d.news) || [];
- var nh = 'Đang tải tin World Cup 2026...
';
- }
- // update active tab styling
- try {
- document.querySelectorAll('.wc-tab').forEach(function(t){
- var want = (tab==='news') ? 'news' : tab;
- t.classList.toggle('active', t.getAttribute('onclick') && t.getAttribute('onclick').indexOf("'"+want+"'")>=0);
- });
- } catch(e){}
- } catch(e){
- var el2 = document.getElementById('wc-content');
- if(el2) el2.innerHTML = '';
- h += '
'+(hotMode?'🔥 Thêm Short HOT':'🎬 Tạo Short AI')+(hasPrev?' (Tạo lại)':'')+' ✕ ';
- if(hotMode){
- h += '
📝 Tiêu đề bài đăng (hiển thị trên Tường AI, cũng là nội dung giọng đọc nếu không chọn video): ';
- h += '
';
- }
-
- /* 0. Recreate mode (designed slides only, no text) */
- if(hasSlides){
- h += '
';
- h += '
';
- h += '
Dùng ảnh slide đã thiết kế làm nền + giữ nguyên audio của Short trước đó. Chữ KHÔNG xuất hiện trong video.
';
- h += '
';
- h += '
Chọn slide muốn đưa vào Short (tích = dùng):
';
- }
-
- /* 1. Background: image (default) / uploaded video / scraped video link */
- h += '
🖼️ Nền video: ';
- h += '
';
- h += '🖼️ Ảnh ';
- h += '🎞️ Video tải lên ';
- h += '🔗 Video từ link ';
- h += '
';
- h += '
';
- h += '
';
- h += '
';
- /* danh sách ảnh của bài rewrite để chọn 1 ảnh cho nhiều slide */
- var allImgs = [];
- if(p.images && p.images.length) allImgs = allImgs.concat(p.images);
- if(p.img && p.img && allImgs.indexOf(p.img) < 0) allImgs.push(p.img);
- if(p.slides && p.slides.length) p.slides.forEach(s=>{ if(s.image && allImgs.indexOf(s.image)<0) allImgs.push(s.image); });
- var _defaultPick = (p.short_images && p.short_images[0]) || p.img || "";
- if(!allImgs.includes(_defaultPick)) _defaultPick = "";
- h += '
';
- h += '
📋 Ảnh trong bài (bấm để chọn 1 ảnh cố định cho nhiều slide):
';
- h += '
';
- if(allImgs.length){
- allImgs.forEach(function(u){
- var sel = (u === _defaultPick);
- h += 'Chưa có ảnh trong bài. Tải lên hoặc nhập URL. ';
- }
- h += '
';
- h += '
✅ ảnh được chọn (vàng) áp dụng cho tất cả slide trong short. Để trống = dùng ảnh từng slide.
';
- h += '
';
- h += '
';
- h += '
';
- h += '
';
- h += '
';
- h += '
';
- h += '📥 Lấy video ';
- h += '
';
- h += '
Dán link YouTube / TikTok / video tin tức, bấm "Lấy video" để xem trước.
';
- h += '
';
- h += '
';
- h += '
';
- h += '
Short sẽ chạy video này. Bỏ trống nếu muốn giữ ảnh làm nền.
';
- h += '
';
- h += '
';
- h += '
';
-
- /* 2. Audio + 3. Voice — SKIPPED in HOT mode (video keeps its own audio) */
- if(!hotMode){
- /* 2. Audio: previous short audio / TikTok music / uploaded audio */
- h += '
🎵 Âm thanh: ';
- h += '
';
- if(hasPrev && p.video){
- h += '🔁 Giữ nguyên audio Short trước ';
- }
- h += '🎙️ Đọc lại bằng giọng AI (TTS) ';
- h += '🎵 Nhạc nền TikTok có sẵn (thêm vào) ';
- h += '📤 Tải audio lên ';
- h += '🔇 Không âm thanh ';
- h += ' ';
- /* Music chooser — luôn hiển thị để người dùng NGHE THỬ trước khi chọn */
- h += '
';
- h += '
';
- (music||[]).forEach(m=>{ h += ''+m.name+' '; });
- h += ' ';
- h += '▶ Nghe thử
';
- h += '
';
- h += '
▶ Nghe thử nhạc nền TikTok trước khi chọn. Nhạc sẽ được trộn vào video (nền) khi tạo.
';
- h += '
';
- h += '
';
- h += '
';
-
- /* 3. Voice + emotion + speed (TTS) */
- h += '
🎙️ Giọng đọc: ';
- h += '';
- VOICE_LIST.forEach(v=>{ h += ''+v.label+' '; });
- h += '
';
- h += '
';
- h += '
😊 Cảm xúc: ';
- EMOTION_LIST.forEach(e=>{ h += ''+e.label+' '; });
- h += '
';
- h += '
⚡ Tốc độ: ';
- ['0.85','1.0','1.2','1.35'].forEach(s=>{ h += ''+s+'x '; });
- h += '
';
- }
-
- h += '
';
- h += ''+(hotMode?'🔥 Đăng Short HOT':'🎬 Tạo Short AI')+' ';
- h += 'Hủy ';
- h += '
';
- h += '
';
- overlay.innerHTML=h; document.body.appendChild(overlay);
- // Cleanup HLS preview instance whenever the modal is removed (✕ / Hủy / success)
- (function(){
- const obs = new MutationObserver(function(muts){
- if(document.getElementById('sc-scrape-video')){
- const p = document.getElementById('sc-scrape-video');
- if(p._hls){ try{ p._hls.destroy(); }catch(e){} p._hls = null; }
- }
- });
- obs.observe(document.body, {childList:true, subtree:false});
- // stop after this overlay is gone
- setTimeout(()=>obs.disconnect(), 60*1000);
- })();
-
- // ---- mode toggles ----
- let bgMode = hotMode ? 'link' : 'img';
- function setBgMode(m){
- bgMode = m;
- document.getElementById('sc-bg-mode-img').style.background = m==='img' ? '#2d8659' : '#333';
- document.getElementById('sc-bg-mode-img').style.color = m==='img' ? '#fff' : '#ccc';
- document.getElementById('sc-bg-mode-video').style.background = m==='video' ? '#2d8659' : '#333';
- document.getElementById('sc-bg-mode-video').style.color = m==='video' ? '#fff' : '#ccc';
- document.getElementById('sc-bg-mode-link').style.background = m==='link' ? '#2d8659' : '#333';
- document.getElementById('sc-bg-mode-link').style.color = m==='link' ? '#fff' : '#ccc';
- document.getElementById('sc-bg-img-wrap').style.display = (m==='img' || m==='link') ? 'block' : 'none';
- document.getElementById('sc-bg-video-wrap').style.display = m==='video' ? 'block' : 'none';
- document.getElementById('sc-bg-link-wrap').style.display = m==='link' ? 'block' : 'none';
- }
- if(hotMode){
- // HOT mode: only video-from-link is offered; hide ảnh/upload-video buttons
- document.getElementById('sc-bg-mode-img').style.display = 'none';
- document.getElementById('sc-bg-mode-video').style.display = 'none';
- document.getElementById('sc-bg-mode-link').style.background = '#2d8659';
- document.getElementById('sc-bg-mode-link').style.color = '#fff';
- } else {
- document.getElementById('sc-bg-mode-img').addEventListener('click', ()=>setBgMode('img'));
- document.getElementById('sc-bg-mode-video').addEventListener('click', ()=>setBgMode('video'));
- document.getElementById('sc-bg-mode-link').addEventListener('click', ()=>setBgMode('link'));
- }
-
- // ---- scraped video link: fetch preview ----
- const scLinkInput = document.getElementById('sc-video-link');
- const scScrapeBtn = document.getElementById('sc-video-scrape');
- if(scScrapeBtn && scLinkInput){
- scScrapeBtn.addEventListener('click', async ()=>{
- const url = scLinkInput.value.trim();
- const st = document.getElementById('sc-video-scrape-status');
- const preview = document.getElementById('sc-video-preview');
- const meta = document.getElementById('sc-video-meta');
- if(!url){
- st.textContent = '⚠️ Dán link video trước.';
- st.style.color = '#e0a030';
- return;
- }
- st.textContent = '⏳ Đang lấy thông tin video...';
- st.style.color = '#888';
- try{
- const r = await fetch('/api/ai-short/scrape?url=' + encodeURIComponent(url));
- const j = await r.json();
- if(!r.ok || j.error) throw new Error(j.error || 'Không lấy được video');
- // metadata
- let metaHtml = '';
- if(j.title) metaHtml += '
' + esc(j.title) + '
';
- if(j.duration) metaHtml += '
⏱️ ' + Math.round(j.duration) + 's
';
- if(j.extractor) metaHtml += '
Nguồn: ' + esc(j.extractor) + '
';
- if(j.note) metaHtml += '
⚠️ ' + esc(j.note) + '
';
- meta.innerHTML = metaHtml;
- meta.style.display = 'block';
- // direct URL for the short
- const scDirect = j.direct_url || '';
- meta.setAttribute('data-title', j.title || '');
- meta.setAttribute('data-direct', scDirect || '');
- document.getElementById('sc-scrape-direct').value = scDirect;
- document.getElementById('sc-scrape-duration').value = j.duration ? String(j.duration) : '';
- if(j.previewable && scDirect){
- const isHls = !!j.is_hls || /\.m3u8/i.test(scDirect);
- const streamUrl = isHls
- ? '/api/ai-short/scrape/hls?url=' + encodeURIComponent(scDirect)
- : '/api/ai-short/scrape/preview?url=' + encodeURIComponent(scDirect);
- preview.style.display = 'block';
- preview.setAttribute('data-ishls', isHls ? '1' : '0');
- preview.innerHTML = '
';
- const v = preview.querySelector('#sc-scrape-video');
- if(isHls && v && typeof Hls !== 'undefined' && Hls.isSupported()){
- const hls = new Hls();
- hls.loadSource(streamUrl);
- hls.attachMedia(v);
- hls.on(Hls.Events.MANIFEST_PARSED, ()=>{ v.play().catch(()=>{}); });
- v._hls = hls;
- } else if(isHls && v && v.canPlayType('application/vnd.apple.mpegurl')){
- v.src = streamUrl; // native Safari HLS
- }
- st.textContent = '✅ Đã lấy video. Bấm play để xem trước.';
- st.style.color = '#8f8';
- } else {
- preview.style.display = 'none';
- if(j.note){
- st.textContent = '⚠️ ' + j.note;
- st.style.color = '#e0a030';
- } else {
- st.textContent = '❌ Không phát trước được (có thể do nguồn chặn). Bạn vẫn có thể thử tạo short.';
- st.style.color = '#e05555';
- }
- }
- }catch(e){
- st.textContent = '❌ ' + e.message;
- st.style.color = '#e05555';
- preview.style.display = 'none';
- document.getElementById('sc-scrape-direct').value = '';
- document.getElementById('sc-scrape-duration').value = '';
- }
- });
- }
-
- // ---- rewrite image picker (chọn 1 ảnh cho nhiều slide) ----
- let _scChosenImg = '';
- document.getElementById('sc-rewrite-list').addEventListener('click', e=>{
- const btn = e.target.closest('.sc-rw-img');
- if(!btn) return;
- document.querySelectorAll('.sc-rw-img').forEach(b=>{ b.style.borderColor='#333'; b.dataset.sel='0'; });
- btn.style.borderColor='#ffd700'; btn.dataset.sel='1';
- _scChosenImg = btn.dataset.img || '';
- const hidden = document.getElementById('sc-chosen-img');
- if(hidden) hidden.value = _scChosenImg;
- });
-
- // ---- audio source toggles (skipped in HOT mode) ----
- if(!hotMode){
- function setAudioSrc(v){
- // nhạc nền TikTok luôn hiển thị để nghe thử; ẩn khi chọn "Không âm thanh"
- document.getElementById('sc-music-wrap').style.display = v==='none' ? 'none' : 'block';
- document.getElementById('sc-upload-wrap').style.display = v==='upload' ? 'block' : 'none';
- }
- document.getElementById('sc-audio-src').addEventListener('change', e=>setAudioSrc(e.target.value));
- if(hasPrev && p.video) setAudioSrc('prev'); else setAudioSrc('tts');
- }
-
- // ---- recreate slides: show/hide slide picker ----
- const scReuse = document.getElementById('sc-reuse-slides');
- if(scReuse){
- scReuse.addEventListener('change', function(){
- const pk = document.getElementById('sc-slide-picker');
- if(pk) pk.style.display = this.checked ? 'block' : 'none';
- });
- }
-
- // ---- music preview player (skipped in HOT mode) ----
- let _scAudio = null;
- const listenBtn = hotMode ? null : document.getElementById('sc-music-listen');
- const musicSel = hotMode ? null : document.getElementById('sc-music');
- const playerBox = hotMode ? null : document.getElementById('sc-music-playerbox');
- if(listenBtn && musicSel){
- listenBtn.addEventListener('click', function(){
- const opt = musicSel.options[musicSel.selectedIndex];
- const aurl = opt ? (opt.dataset.aurl || '') : '';
- if(!aurl){
- alert('Không có link nhạc cho lựa chọn này.');
- return;
- }
- // proxy để tránh CORS khi phát thử trong trình duyệt
- const streamUrl = '/api/ai-short/music/stream?url=' + encodeURIComponent(aurl);
- if(_scAudio && _scAudio.dataset.src === aurl && !_scAudio.paused){
- _scAudio.pause(); listenBtn.textContent = '▶ Nghe thử';
- return;
- }
- if(_scAudio) _scAudio.pause();
- if(playerBox) playerBox.style.display = 'block';
- if(playerBox) playerBox.innerHTML = '
🎧 '+esc(opt.text)+'
';
- _scAudio = playerBox ? playerBox.querySelector('audio') : null;
- if(_scAudio){
- _scAudio.dataset.src = aurl;
- _scAudio.addEventListener('ended', function(){ listenBtn.textContent = '▶ Nghe thử'; });
- _scAudio.addEventListener('error', function(){
- listenBtn.textContent = '▶ Nghe thử';
- toast('❌ Không phát được nhạc thử (mạng/vùng chặn). Bạn vẫn có thể chọn để trộn vào video.');
- });
- listenBtn.textContent = '⏹ Dừng';
- }
- });
- }
-
- // ---- create ----
- document.getElementById('sc-create-btn').addEventListener('click', async ()=>{
- const btn = document.getElementById('sc-create-btn');
- const st = document.getElementById('sc-status');
- btn.disabled = true; btn.textContent = '⏳ Đang tạo...';
- st.textContent = 'Đang chuẩn bị...';
-
- // upload files first
- try{
- // image file (not in HOT mode)
- let imgUrl = '';
- const imgUrlInput = document.getElementById('sc-img-url');
- if(imgUrlInput) imgUrl = imgUrlInput.value.trim() || '';
- const imgFile = hotMode ? null : document.getElementById('sc-img-file').files[0];
- if(imgFile){
- st.textContent = '⏳ Đang tải ảnh lên...';
- const fd = new FormData(); fd.append('file', imgFile, imgFile.name);
- const r = await fetch('/api/ai-short/upload', {method:'POST', body:fd});
- const j = await r.json();
- if(!r.ok || j.error) throw new Error(j.error || 'Lỗi upload ảnh');
- imgUrl = j.url;
- }
- // video file (not in HOT mode)
- let videoUrl = '';
- const videoFile = hotMode ? null : document.getElementById('sc-video-file').files[0];
- if(videoFile){
- st.textContent = '⏳ Đang tải video lên...';
- const fd = new FormData(); fd.append('file', videoFile, videoFile.name);
- const r = await fetch('/api/ai-short/upload', {method:'POST', body:fd});
- const j = await r.json();
- if(!r.ok || j.error) throw new Error(j.error || 'Lỗi upload video');
- videoUrl = j.url;
- }
- // audio file (not in HOT mode)
- let uploadAudioUrl = '';
- const audioFile = hotMode ? null : document.getElementById('sc-audio-file').files[0];
- if(audioFile){
- st.textContent = '⏳ Đang tải audio lên...';
- const fd = new FormData(); fd.append('file', audioFile, audioFile.name);
- const r = await fetch('/api/ai-short/upload', {method:'POST', body:fd});
- const j = await r.json();
- if(!r.ok || j.error) throw new Error(j.error || 'Lỗi upload audio');
- uploadAudioUrl = j.url;
- }
-
- const audioSrc = hotMode ? 'video' : (document.getElementById('sc-audio-src').value);
- const useSlides = hotMode ? false : (document.getElementById('sc-reuse-slides') ? document.getElementById('sc-reuse-slides').checked : false);
- // nhạc nền TikTok: giá trị != none được trộn vào video (kể cả tạo lại)
- let musicId = '';
- const musicSel = hotMode ? null : document.getElementById('sc-music');
- if(musicSel && musicSel.value && musicSel.value !== 'none' && audioSrc !== 'none'){
- musicId = musicSel.value;
- }
- if(audioSrc === 'music') musicId = musicSel ? musicSel.value : '';
- let audioUrl = '';
- if(hotMode){ audioUrl = ''; }
- else if(audioSrc==='upload') audioUrl = uploadAudioUrl;
- else if(audioSrc==='prev' && p.video){ audioUrl = p.short_audio_url || ''; }
- // reuse_audio explicitly: only when user chose "giữ nguyên audio short trước"
- const reuseAudio = hotMode ? false : (audioSrc === 'prev');
- // collect selected slide indices (recreate mode)
- let slideIndices = [];
- if(useSlides){
- document.querySelectorAll('#sc-slide-picker .sc-slide-chk:checked').forEach(chk=>{
- slideIndices.push(parseInt(chk.dataset.idx));
- });
- if(!slideIndices.length){
- st.textContent = '⚠️ Chọn ít nhất 1 slide để tạo lại.';
- throw new Error('Chọn ít nhất 1 slide');
- }
- }
- // reuse_audio is sent explicitly above; music (audio_music) is overlaid by the backend
- const body = {
- post_id: p.id,
- use_slides: useSlides,
- slide_indices: slideIndices,
- reuse_audio: reuseAudio,
- voice: hotMode ? 'vi-VN-HoaiMyNeural' : document.getElementById('sc-voice').value,
- emotion: hotMode ? 'neutral' : document.getElementById('sc-emotion').value,
- speed: hotMode ? 1.0 : (parseFloat(document.getElementById('sc-speed').value) || 1.2),
- audio_music: musicId,
- audio_url: audioUrl,
- };
- if(hotMode){
- // create a brand-new wall post on the AI wall
- body.create_new = true;
- const hotTitleEl = document.getElementById('sc-hot-title');
- body.title = hotTitleEl ? hotTitleEl.value.trim() : '';
- // scraped video title as fallback wall title
- if(!body.title){
- const meta = document.getElementById('sc-video-meta');
- body.title = (meta && meta.dataset.title) ? meta.dataset.title : '🔥 Short HOT';
- }
- body.text = '';
- body.language = 'vi';
- const srcEl = document.getElementById('sc-video-link');
- if(srcEl && srcEl.value.trim()) body.url = srcEl.value.trim();
- }
- // if uploaded video selected -> use it as background via images? No:
- if(bgMode==='video' && videoUrl){
- body.video_url = videoUrl; // backend handles
- const vmute = document.getElementById('sc-video-mute');
- if(vmute && vmute.checked) body.video_muted = true;
- } else if(bgMode==='link'){
- // scraped video from link: video-first + image tail completion
- const scDirect = document.getElementById('sc-scrape-direct') ? document.getElementById('sc-scrape-direct').value : '';
- if(scDirect){
- body.video_url = scDirect;
- body.scrape_mode = true; // video-first assembly
- const vdur = document.getElementById('sc-scrape-duration') ? document.getElementById('sc-scrape-duration').value : '';
- if(vdur) body.video_dur = parseFloat(vdur) || undefined;
- const lmute = document.getElementById('sc-link-mute');
- if(lmute && lmute.checked) body.video_muted = true;
- // still send the chosen images (they complete the short if the
- // video is shorter than the voice)
- const chosen = document.getElementById('sc-chosen-img') ? document.getElementById('sc-chosen-img').value : '';
- const imgs = [];
- if(chosen) imgs.push(chosen);
- if(imgUrl) imgs.push(imgUrl);
- if(imgs.length) body.images = imgs;
- if(chosen) body.fixed_image = chosen;
- } else {
- st.textContent = '⚠️ Bấm "📥 Lấy video" để lấy video từ link trước khi tạo.';
- throw new Error('Chưa lấy được video từ link');
- }
- } else {
- // 1. ảnh chọn từ danh sách rewrite (áp dụng cho nhiều slide, fix nền cho cả short)
- // 2. ảnh URL nhập tay / tải lên
- const chosen = document.getElementById('sc-chosen-img') ? document.getElementById('sc-chosen-img').value : '';
- const imgs = [];
- if(chosen) imgs.push(chosen);
- if(imgUrl) imgs.push(imgUrl);
- if(imgs.length) body.images = imgs; // backend: first = fixed bg (normal mode)
- if(chosen) body.fixed_image = chosen; // applies to slides mode too (1 ảnh cho nhiều slide)
- }
- st.textContent = '⏳ Đang tạo video short (có thể mất 1-2 phút)...';
- const r2 = await fetch('/api/ai-short', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)});
- const j2 = await r2.json();
- if(!r2.ok || j2.error) throw new Error(j2.error || 'Lỗi tạo video');
- toast('✅ Đã tạo Short AI!');
- const pp = _wallPosts.find(x => String(x.id) === String(p.id));
- if(pp){
- pp.video = j2.video;
- pp.voice = j2.voice; pp.emotion = j2.emotion; pp.short_speed = j2.speed;
- pp.short_music = j2.music; pp.short_audio_url = audioUrl; pp.short_use_slides = j2.use_slides;
- pp.short_images = j2.images;
- }
- if(hotMode && j2.post){
- // 🆕 brand-new wall post created by the backend -> prepend on the AI wall
- prependWallPost(j2.post);
- } else {
- const itemId = 'wall-item-'+p.id;
- const el = document.getElementById(itemId);
- if(el){
- const idx = _wallPosts.indexOf(pp);
- el.insertAdjacentHTML('afterend', makeWallItem(pp, idx));
- el.remove();
- }
- }
- document.getElementById('short-creator-overlay').remove();
- }catch(e){
- st.textContent = '❌ ' + e.message;
- btn.disabled = false; btn.textContent = hotMode ? '🔥 Thêm Short HOT' : '🎬 Tạo Short AI';
- toast('❌ ' + e.message);
- }
- });
- });
-}
-
-/* legacy fast path — used by any remaining tts-create-btn handlers */
-async function makeShortVideo(postId, btn, voice, speed, emotion){
- openShortCreator(postId);
- return;
-}
-
-var VOICE_LIST = [
- {id:'vi-VN-HoaiMyNeural', label:'🎙️ Hoài My (VI)', lang:'vi'},
- {id:'vi-VN-NamMinhNeural', label:'🎙️ Nam Minh (VI)', lang:'vi'},
- {id:'en-US-AndrewMultilingualNeural', label:'🎙️ Andrew (EN)', lang:'en'},
- {id:'en-AU-WilliamMultilingualNeural', label:'🎙️ William (EN)', lang:'en'},
- {id:'pt-BR-ThalitaMultilingualNeural', label:'🎙️ Thalita (PT)', lang:'pt'},
- {id:'fr-FR-VivienneMultilingualNeural', label:'🎙️ Vivienne (FR)', lang:'fr'},
- {id:'fr-FR-RemyMultilingualNeural', label:'🎙️ Rémy (FR)', lang:'fr'},
- {id:'de-DE-SeraphinaMultilingualNeural', label:'🎙️ Seraphina (DE)', lang:'de'},
- {id:'de-DE-FlorianMultilingualNeural', label:'🎙️ Florian (DE)', lang:'de'},
- {id:'ko-KR-HyunsuMultilingualNeural', label:'🎙️ Hyunsu (KO)', lang:'ko'},
- {id:'it-IT-GiuseppeMultilingualNeural', label:'🎙️ Giuseppe (IT)', lang:'it'},
-];
-var 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'},
-];
-
-document.addEventListener('click',function(e){
- var btn = e.target.closest('.tts-voice-btn');
- if(btn){
- var container = btn.closest('.tts-selector');
- if(container){
- var selKey = 'inline-'+container.dataset.postId;
- if(!_ttsSelections[selKey]) _ttsSelections[selKey]={voice:btn.dataset.voice,emotion:'neutral'};
- var allBtns = container.querySelectorAll('.tts-voice-btn');
- for(var i=0;i
=2) return 'vi';
- if(chars.has('ñ')||chars.has('¿')||chars.has('¡')) return 'es';
- if(chars.has('ã')||chars.has('õ')) return 'pt';
- 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';
-}
-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']
- };
- var bestScore=0, 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;
-}
-function getAutoVoice(lang){var map={vi:'vi-VN-HoaiMyNeural',pt:'pt-BR-ThalitaMultilingualNeural',en:'en-US-AndrewMultilingualNeural',fr:'fr-FR-VivienneMultilingualNeural',de:'de-DE-SeraphinaMultilingualNeural',ko:'ko-KR-HyunsuMultilingualNeural',it:'it-IT-GiuseppeMultilingualNeural'};return map[lang]||'vi-VN-HoaiMyNeural';}
-function buildVoiceEmotionSelector(post){
- var lang=post.language||detectLanguage(post.title+' '+(post.text||''));
- var _oldVoiceMap = {'hoaimy':'vi-VN-HoaiMyNeural','namminh':'vi-VN-NamMinhNeural','andrew':'en-US-AndrewMultilingualNeural','jenny':'en-US-AndrewMultilingualNeural','thalita':'pt-BR-ThalitaMultilingualNeural','pt_thalita':'pt-BR-ThalitaMultilingualNeural','vivienne':'fr-FR-VivienneMultilingualNeural','remy':'fr-FR-RemyMultilingualNeural','seraphina':'de-DE-SeraphinaMultilingualNeural','florian':'de-DE-FlorianMultilingualNeural','sunhee':'ko-KR-HyunsuMultilingualNeural','hyunsu':'ko-KR-HyunsuMultilingualNeural','giuseppe':'it-IT-GiuseppeMultilingualNeural','ela':'en-US-AndrewMultilingualNeural','denise':'fr-FR-VivienneMultilingualNeural','katja':'de-DE-SeraphinaMultilingualNeural','nanami':'en-US-AndrewMultilingualNeural','xiaochen':'en-US-AndrewMultilingualNeural','es_carlos':'en-US-AndrewMultilingualNeural','pt_francisco':'pt-BR-ThalitaMultilingualNeural'};
- var _postVoice = post.voice ? (_oldVoiceMap[post.voice] || post.voice) : '';
- var autoVoice= _postVoice || getAutoVoice(lang);
- var autoEmotion=post.emotion||detectEmotion(post.title+' '+(post.text||''));
- var selKey = 'inline-'+post.id;
- if(!_ttsSelections[selKey]){_ttsSelections[selKey] = {voice: autoVoice, emotion: autoEmotion};}
- var h='';
- h+='
🎙️ Giọng đọc (ngôn ngữ: '+lang.toUpperCase()+'):
';
- VOICE_LIST.forEach(function(v){var sel=v.id===_ttsSelections[selKey].voice?'border-color:#5cb87a;background:#1a2a1f':'border-color:#333;background:#222';h+=''+v.label+' ';});
- h+='
😊 Cảm xúc:
';
- EMOTION_LIST.forEach(function(e){var sel=e.id===_ttsSelections[selKey].emotion?'border-color:#5cb87a;background:#1a2a1f':'border-color:#333;background:#222';h+=''+e.label+' ';});
- h+='
⚡ Tốc độ: ';
- h+='0.85x Chậm 1.0x Bình thường 1.2x Nhanh 1.35x Rất nhanh
';
- h+='
🎬 Tạo Short AI 🎬 Tạo Short AI (ngôn ngữ: '+lang.toUpperCase()+') ';
- h+='🎙️ Chọn giọng đọc:
';
- VOICE_LIST.forEach(function(v){var sel=v.id===getAutoVoice(lang)?'border-color:#5cb87a;background:#1a2a1f':'border-color:#333;background:#222';h+='
'+v.label+' ';});
- h+='
😊 Chọn cảm xúc:
';
- EMOTION_LIST.forEach(function(e){var sel=e.id===autoEmotion?'border-color:#5cb87a;background:#1a2a1f':'border-color:#333;background:#222';h+='
'+e.label+' ';});
- h+='
⚡ Tốc độ:
';
- h+='
0.85x Chậm 1.0x Bình thường 1.2x Nhanh 1.35x Rất nhanh 🎬 Tạo Short ';
- h+='✕
';
- h+='
';
- box.innerHTML=h;overlay.appendChild(box);document.body.appendChild(overlay);
- var selectedVoice=getAutoVoice(lang),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;
- if(!_ttsSelections["inline-"+postId]) _ttsSelections["inline-"+postId]={voice:"vi-VN-HoaiMyNeural",emotion:"neutral"};
- _ttsSelections["inline-"+postId].voice=selectedVoice;_ttsSelections["inline-"+postId].emotion=selectedEmotion;
- 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;}
- }catch(e){this.disabled=false;this.textContent='🎬 Tạo Short';box.querySelector('#ve-status').textContent='❌ '+e.message;}
- });
-};
-
-function prependWallPost(post){
- _wallPosts.unshift(post);
- const track=document.getElementById('ai-wall-track');
- const wrap=document.getElementById('ai-wall-wrap');
- const target=document.getElementById('ai-wall-under-compose');
- if(target && (!track||!wrap)){
- const newWrap=document.createElement('div');
- newWrap.className='slider-wrap';newWrap.id='ai-wall-wrap';
- newWrap.innerHTML=`${makeWallItem(post,0)}
`;
- target.appendChild(newWrap);
- const firstItem=newWrap.querySelector('.wall-item');
- if(firstItem)firstItem.className='wall-item wall-item-new';
- return;
- }
- if(track){
- track.insertAdjacentHTML('afterbegin', makeWallItem(post, 0));
- track.scrollTo({left:0,behavior:'smooth'});
- }
-}
-
-let _wallPosts=[];
-let _currentView='home';
-let _currentEventId=null;
-let _currentMatchUrl=null;
-let _htPage=0,_htTopic='';
-async function loadHotTopics(){let j=null;try{j=await _fetchWithTimeout('/api/hot_topics',8000);}catch(e){j={topics:[]};}const el=document.getElementById('hot-topics');if(!el)return;el.innerHTML=(j.topics||[]).slice(0,18).map(t=>{const topicText=t.topic||t.label.replace(/^#/,'');return`${esc(t.label)} `;}).join('');}
-function searchTopic(topic){if(!topic){topic=document.getElementById('topic-input')?.value.trim();if(!topic){alert('Nhập chủ đề');return;}}document.getElementById('topic-input').value='';_htTopic=topic;_htPage=0;showHashtagSources(topic,0);}
-async function showHashtagSources(topic,page){const box=document.getElementById('hashtag-box');if(!box)return;if(page===0)box.innerHTML=``;try{const r=await fetch(`/api/hashtag/sources?topic=${encodeURIComponent(topic)}&page=${page}`);const j=await r.json();const sources=j.sources||[];if(!sources.length&&page===0){box.innerHTML=`🔍 ${esc(topic)} Không tìm được bài viết liên quan
🔍 ${esc(topic)} (${j.total} bài từ 8 nguồn) `;sources.forEach((s,i)=>{const idx=page*8+i;h+=`
${esc(s.title)}
${esc(s.via||'')}
`;});if(page===0){h+=`
🤖 Rewrite AI tổng hợp & đăng tường `;if(j.has_more)h+=`
Tải thêm ▼ `;h+=`
🔍 ${esc(topic)} Lỗi: ${esc(e.message)}
Đang tải...
';let ep='/api/livescore/'+tab;if(tab.startsWith('bxh_'))ep='/api/livescore/standings/'+tab.replace('bxh_','');try{const d=await _fetchWithTimeout(ep,12000);el.innerHTML=d.html&&d.html.length>50?d.html:'Không có dữ liệu
';bindMatchClicks(el);}catch(e){el.innerHTML='Lỗi tải hoặc hết thời gian
';}}
-function bindMatchClicks(el){el.querySelectorAll('.match-detail').forEach(md=>{md.style.cursor='pointer';md.addEventListener('click',function(e){const statusA=this.querySelector('.status a');const teamA=this.querySelector('.teams a[href*="/tran-dau/"]');const a = statusA || teamA;if(a){e.preventDefault();e.stopPropagation();const href=a.getAttribute('href')||'';const m=href.match(/\/tran-dau\/(\d+)\//);if(m){const fullUrl=href.startsWith('http')?href:'https://bongda.com.vn'+href;openMatch(m[1],fullUrl);}}});});el.querySelectorAll('a').forEach(a=>{a.addEventListener('click',e=>{e.preventDefault();e.stopPropagation()});});}
-function openMatch(id,url){if(!id)return;_currentEventId=id;if(url)_currentMatchUrl=url;document.getElementById('match-overlay').classList.add('active');document.body.style.overflow='hidden';loadMatchTab('detail')}
-function closeMatch(){document.getElementById('match-overlay').classList.remove('active');document.body.style.overflow=''}
-async function loadMatchTab(tab){document.querySelectorAll('.mo-tab').forEach(t=>t.classList.remove('active'));document.querySelectorAll('.mo-tab').forEach(t=>{if((tab==='comm'&&t.textContent==='Diễn biến')||(tab==='stats'&&t.textContent==='Thống kê')||(tab==='detail'&&t.textContent.includes('Chi tiết')))t.classList.add('active')});const el=document.getElementById('mo-body');if(!el)return;el.innerHTML='Đang tải...
';try{let apiUrl;if(tab==='stats')apiUrl=`/api/match/${_currentEventId}/stats`;else if(tab==='comm')apiUrl=`/api/match/${_currentEventId}/commentaries`;else{apiUrl=`/api/match/${_currentEventId}/detail`;if(_currentMatchUrl)apiUrl+='?url='+encodeURIComponent(_currentMatchUrl)}const r=await fetch(apiUrl);if(!r.ok){el.innerHTML='Lỗi máy chủ ('+r.status+')
';return}const d=await r.json();if(d.error){el.innerHTML=''+esc(d.error)+'
';return}if(tab==='detail'&&typeof renderMatchDetail==='function'){renderMatchDetail(el,d);return}el.innerHTML=d.html||'Không có dữ liệu
'}catch(e){el.innerHTML='Lỗi
'}}
-function esc(s){return String(s||'').replace(/[&<>"']/g,m=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m]))}
-function showView(id){document.querySelectorAll('.view').forEach(v=>v.classList.remove('active'));document.getElementById(id)?.classList.add('active')}
-function switchCat(id){document.querySelectorAll('.cat').forEach(c=>c.classList.remove('active'));document.querySelector(`[data-cat="${id}"]`)?.classList.add('active');document.querySelectorAll('.view').forEach(v=>v.classList.remove('active'));document.querySelectorAll('video').forEach(v=>{v.pause();if(v._hls){v._hls.destroy();v._hls=null}});document.querySelectorAll('iframe[data-yt-src]').forEach(f=>{f.src=''});if(id==='home')document.getElementById('view-home').classList.add('active');else if(id==='news-all'){document.getElementById('view-cat').classList.add('active');loadNewsTab()}else{document.getElementById('view-cat').classList.add('active');loadCat(id)}}
-function toast(msg){let t=document.getElementById('progress-toast');if(t){t.textContent=msg;t.style.display='block';setTimeout(()=>{t.style.display='none'},3500)}}
-
-// ===== doShare: COPY link to clipboard, then try native share as bonus =====
- function doShare(title,url,img,postId){
- var shareUrl;
- var _base = (typeof SPACE!=='undefined' && SPACE) ? SPACE : location.origin;
- if(postId){
- shareUrl = _base+'/s?post_id='+encodeURIComponent(postId)+'&title='+encodeURIComponent(title);
- } else {
- shareUrl = _base+'/s?url='+encodeURIComponent(url)+'&title='+encodeURIComponent(title)+'&img='+encodeURIComponent(img||'');
- }
- // Try clipboard API first (modern, works on HTTPS)
- if(navigator.clipboard && navigator.clipboard.writeText){
- navigator.clipboard.writeText(shareUrl).then(function(){
- toast('📋 Đã sao chép link!');
- try{if(navigator.share)navigator.share({title:title||'',url:shareUrl}).catch(function(){});}catch(e){}
- }).catch(function(){
- // Fallback: execCommand (deprecated but works on some browsers)
- try{
- var ta=document.createElement('textarea');
- ta.value=shareUrl;ta.style.position='fixed';ta.style.left='-9999px';ta.style.top='-9999px';ta.style.opacity='0';
- document.body.appendChild(ta);ta.select();ta.setSelectionRange(0,99999);
- if(document.execCommand('copy')){toast('📋 Đã sao chép link!');}
- else{prompt('📋 Sao chép link:', shareUrl);}
- document.body.removeChild(ta);
- }catch(e){prompt('📋 Sao chép link:', shareUrl);}
- try{if(navigator.share)navigator.share({title:title||'',url:shareUrl}).catch(function(){});}catch(e){}
- });
- } else {
- // execCommand approach
- try{
- var ta=document.createElement('textarea');
- ta.value=shareUrl;ta.style.position='fixed';ta.style.left='-9999px';ta.style.top='-9999px';ta.style.opacity='0';
- document.body.appendChild(ta);ta.select();ta.setSelectionRange(0,99999);
- if(document.execCommand('copy')){toast('📋 Đã sao chép link!');}
- else{prompt('📋 Sao chép link:', shareUrl);}
- document.body.removeChild(ta);
- }catch(e){prompt('📋 Sao chép link:', shareUrl);}
- try{if(navigator.share)navigator.share({title:title||'',url:shareUrl}).catch(function(){});}catch(e){}
- }
-}
-
-async function doInteract(videoId,type){try{const r=await fetch('/api/v2/interact',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id:videoId,type})});return await r.json();}catch(e){return null;}}
-async function getInteractions(videoId){try{return await fetch('/api/v2/interactions?id='+encodeURIComponent(videoId)).then(r=>r.json());}catch(e){return{views:0,likes:0,comments:0};}}
-async function getComments(videoId){try{const j=await fetch('/api/v2/comments?id='+encodeURIComponent(videoId)).then(r=>r.json());return j.comments||[];}catch(e){return[];}}
-async function postComment(videoId,text){try{const j=await fetch('/api/v2/comment',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({id:videoId,text})}).then(r=>r.json());return j.comments||[];}catch(e){return[];}}
-function buildTikTokSlide(opts){return`${opts.vtag}
${opts.badge||''} ${esc(opts.title)}
👁
0
❤️
0
💬
0
📤
🖥️
${opts.extraBtn||''}
${opts.idx+1}/${opts.total} Đang tải... =0)act(best)},150)});setTimeout(()=>act(0),400);slides.forEach(sl=>{const v=sl.querySelector('video');if(v)v.addEventListener('click',e=>{e.preventDefault();v.paused?v.play().catch(()=>{}):v.pause()})});const ids=[...slides].map(sl=>sl.dataset.vid||'');loadCounters(ids)}
-async function openHighlightFeed(league,idx,forceUrl){showView('view-tiktok');const el=document.getElementById('view-tiktok');el.innerHTML='Đang tải...
';let articles=(_hlLeagueData||{})[league]||[];if(!articles.length){try{articles=await fetch('/api/highlights/'+league).then(r=>r.json())}catch(e){articles=[]}}if(!articles.length){el.innerHTML='Không có video
';return}const vids=[];const results=await Promise.all(articles.map(async(a,i)=>{try{const r=await fetch('/api/video_url?url='+encodeURIComponent(a.link)+'&img='+encodeURIComponent(a.img||''));const v=await r.json();if(v&&v.src){return{_idx:i,title:a.title||v.title||'',link:a.link||'',img:a.img||v.poster||'',src:v.src,type:v.type||'',poster:v.poster||a.img||''}}return null}catch(e){}return null}));results.forEach(r=>{if(r)vids.push(r)});vids.sort((a,b)=>a._idx-b._idx);if(!vids.length){el.innerHTML='Không tìm thấy video
';return}let ti=vids.findIndex(v=>v._idx===idx);if(ti<0)ti=0;const ordered=ti>0?[...vids.slice(ti),...vids.slice(0,ti)]:vids;let h=`← Highlight `;ordered.forEach((v,i)=>{const isYT=v.type==='youtube',isHLS=!isYT&&v.src?.includes('.m3u8'),poster=v.poster?` poster="${esc(v.poster)}"`:'';const vtag=isYT?`
`:isHLS?`
`:`
`;const videoId='hl-'+league+'-'+v._idx;h+=buildTikTokSlide({vtag,title:v.title,badge:'HL',badgeClass:'badge-fpt',videoId,idx:i,total:ordered.length,shareUrl:v.link||'',postId:'',extraBtn:`
⏭️
`})});h+='
Đã xóa Shorts Dân trí/SKĐS
';}
-async function openShortAIFeed(idx){showView('view-tiktok');const el=document.getElementById('view-tiktok');if(!_wallPosts||!_wallPosts.length){el.innerHTML='Không có Short AI
';return}const aiPosts=_wallPosts.filter(p=>p.video);if(!aiPosts.length||idx>=aiPosts.length){el.innerHTML='Không có Short AI
';return}const ordered=aiPosts.slice(idx).concat(aiPosts.slice(0,idx));let h=`← Tường AI `;ordered.forEach((p,i)=>{const baseIdx=_wallPosts.indexOf(p);const vtag=p.video?`
`:'';h+=buildTikTokSlide({vtag,title:p.title,badge:'Short AI',badgeClass:'badge-ai',videoId:p.id||'ai-'+i,idx:i,total:ordered.length,shareUrl:p.video||'',postId:p.id||'',extraBtn:`
📥
`})});h+='
← Tường AI `;p.slides.forEach((s,i)=>{h+=`
Slide ${s.index||i+1}/${p.slides.length}
${s.image?`
`:''}
${esc(s.text)}
`;});h+=`
📤 Chia sẻ bài viết này 🎨 Thiết kế ảnh
`;el.innerHTML=h;}
-
-/** Slide Designer Modal - design a slide image with high-contrast text on background */
-function designerGetRatio(){const v=document.getElementById('designer-ratio')?.value||'3:4';const m=v.split(':');return m.length===2?{w:parseInt(m[0]),h:parseInt(m[1])}:1;}
-function designerGetLayout(){return document.getElementById('designer-layout')?.value||'solid';}
-function designerDebounce(fn,d){clearTimeout(fn._t);fn._t=setTimeout(fn,d);}
-function openSlideDesigner(idx){
- designerSlideIdx=idx;
- const p=_wallPosts[idx];if(!p||!p.slides)return;
- const overlay=document.createElement('div');overlay.id='slide-designer-overlay';overlay.style.cssText='position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto';
- let h='';
- h+='
🎨 Thiết kế ảnh slide ✕ ';
- h+='
Chọn slide: ';
- p.slides.forEach((s,i)=>{h+=`Slide ${s.index||i+1}: ${(s.text||'').slice(0,60)}... `;});
- h+='
';
- h+='
Nội dung trên ảnh:
';
- h+='
Tỉ lệ cắt ảnh nền: ';
- h+='📐 3:4 (dọc) 📐 1:1 (vuông) 📐 4:3 (ngang) ';
- h+='
';
- h+='
Bố cục nền: ';
- h+='🎨 Nền đẳng (phủ màu) ';
- h+='🌙 Vignette (viền tối dần) ';
- h+='✂️ Chia đôi (trên mờ, dưới rõ) ';
- h+='🎯 Spotlight (ánh sáng giữa) ';
- h+='↘️ Đường chéo (góc trái-trên→phải-dưới) ';
- h+='
';
- h+='
Màu chữ: ';
- ['#ffffff','#000000','#ff4444','#44ff44','#4444ff','#ffff00','#ff00ff','#00ffff','#ff8800','#88ff00'].forEach(c=>{h+=`
';
- h+='
Ảnh nền (URL hoặc upload):
';
- h+='
👁 Xem trưởng 💾 Lưu ảnh đăng tường
';
- h+='
';
- h+='
';
- overlay.innerHTML=h;document.body.appendChild(overlay);
- document.getElementById('designer-slide-select').addEventListener('change',function(){updateDesignerText(this.value);previewDesignerSlide();});
- document.getElementById('designer-preview-btn').addEventListener('click',function(){previewDesignerSlide();});
- document.getElementById('designer-save-btn').addEventListener('click',function(){saveDesignerSlide(p.title,(p.id||''),idx);});
- ['change','input'].forEach(function(evt){
- const txt=document.getElementById('designer-text');if(txt)txt.addEventListener(evt,function(){designerDebounce(previewDesignerSlide,150);});
- const bg=document.getElementById('designer-bg-url');if(bg)bg.addEventListener(evt,function(){designerDebounce(previewDesignerSlide,150);});
- const ratio=document.getElementById('designer-ratio');if(ratio)ratio.addEventListener(evt,function(){previewDesignerSlide();});
- const layout=document.getElementById('designer-layout');if(layout)layout.addEventListener(evt,function(){previewDesignerSlide();});
- });
- previewDesignerSlide();
-}
-function updateDesignerText(slideIdx){const p=_wallPosts[designerSlideIdx];if(!p||!p.slides)return;const s=p.slides[parseInt(slideIdx)];if(s)document.getElementById('designer-text').value=s.text||'';document.getElementById('designer-bg-url').value=s.image||p.img||'';designerBgDataUrl=null;}
-function handleDesignerBgFile(input){
- const file=input.files&&input.files[0];if(!file)return;
- const reader=new FileReader();
- reader.onload=function(e){designerBgDataUrl=e.target.result;document.getElementById('designer-bg-url').value='[uploaded]';};
- reader.readAsDataURL(file);
-}
-function previewDesignerSlide(){
- const slideIdx=parseInt(document.getElementById('designer-slide-select')?.value||'0');
- const p=_wallPosts[designerSlideIdx];if(!p||!p.slides)return;
- const s=p.slides[slideIdx];if(!s)return;
- const text=document.getElementById('designer-text')?.value||s.text||'';
- const bgUrlInput=document.getElementById('designer-bg-url')?.value||'';
- const bgUrl=designerBgDataUrl||bgUrlInput||s.image||p.img||'';
- const textColor=document.getElementById('designer-text')?.style.color||'#ffffff';
- const ratio=designerGetRatio();
- const layout=designerGetLayout();
- const previewArea=document.getElementById('designer-preview-area');if(!previewArea)return;
- previewArea.style.display='block';previewArea.innerHTML='
⏳ Đang tạo xem trưởng...
';
- const canvas=document.createElement('canvas');
- const vw=Math.max(document.documentElement.clientWidth||540, document.body.clientWidth||540);
- const maxW=Math.min(540, Math.floor(vw*0.9));
- canvas.width=maxW;canvas.height=Math.round(maxW*ratio.h/ratio.w);
- canvas.style.maxWidth='100%';canvas.style.width='100%';canvas.style.height='auto';
- canvas.style.borderRadius='12px';canvas.style.boxShadow='0 8px 24px rgba(0,0,0,.5)';
- canvas.style.display='block';canvas.style.margin='0 auto';
- const ctx=canvas.getContext('2d');const img=new Image();img.crossOrigin='anonymous';
- function drawLayout(){
- if(layout==='vignette'){const g=ctx.createRadialGradient(canvas.width/2,canvas.height/2,0,canvas.width/2,canvas.height/2,Math.max(canvas.width,canvas.height)*0.6);g.addColorStop(0,'rgba(0,0,0,0)');g.addColorStop(1,'rgba(0,0,0,0.7)');ctx.fillStyle=g;ctx.fillRect(0,0,canvas.width,canvas.height);}
- else if(layout==='split'){ctx.fillStyle='rgba(0,0,0,0)';ctx.fillRect(0,0,canvas.width,canvas.height/2);ctx.fillStyle='rgba(0,0,0,0.7)';ctx.fillRect(0,canvas.height/2,canvas.width,canvas.height/2);}
- else if(layout==='spotlight'){const cx=canvas.width/2,cy=canvas.height/2,r=Math.max(canvas.width,canvas.height)*0.35;ctx.save();ctx.fillStyle='rgba(0,0,0,0.7)';ctx.fillRect(0,0,canvas.width,canvas.height);ctx.globalCompositeOperation='destination-out';ctx.fillStyle='white';ctx.beginPath();ctx.arc(cx,cy,r,0,Math.PI*2);ctx.fill();ctx.globalCompositeOperation='source-over';}
- else if(layout==='diagonal'){ctx.fillStyle='rgba(0,0,0,0.55)';ctx.fillRect(0,0,canvas.width,canvas.height);ctx.fillStyle='rgba(0,0,0,0.75)';ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(canvas.width,0);ctx.lineTo(0,canvas.height);ctx.closePath();ctx.fill();}
- else {ctx.fillStyle='rgba(0,0,0,0.55)';ctx.fillRect(0,0,canvas.width,canvas.height);}
- }
- function drawText(){
- ctx.fillStyle=textColor;ctx.font='bold '+Math.round(canvas.width*28/540)+'px sans-serif';
- ctx.textAlign='center';ctx.textBaseline='middle';
- const maxW=Math.round(canvas.width*0.82);
- const words=text.split(' ');let line='';let y=Math.round(canvas.height/2);
- const fontSize=Math.round(canvas.width*28/540);const lineHeight=Math.round(fontSize*1.3);
- for(let i=0;i
maxW&&i>0){ctx.fillText(line.trim(),canvas.width/2,y);y+=lineHeight;line=words[i];}else{line=test;}}
- ctx.fillText(line.trim(),canvas.width/2,y);
- }
- function renderAll(){
- ctx.fillStyle='#1a1a1a';ctx.fillRect(0,0,canvas.width,canvas.height);
- drawLayout();
- drawText();
- previewArea.innerHTML='';previewArea.appendChild(canvas);
- }
- img.onload=function(){
- const iw=img.naturalWidth||1,ih=img.naturalHeight||1;
- const scale=Math.max(canvas.width/iw,canvas.height/ih);
- const dw=iw*scale,dh=ih*scale;
- const dx=(canvas.width-dw)/2,dy=(canvas.height-dh)/2;
- ctx.drawImage(img,0,0,iw,ih,dx,dy,dw,dh);
- drawLayout();drawText();
- previewArea.innerHTML='';previewArea.appendChild(canvas);
- };
- img.onerror=function(){renderAll();};
- if(bgUrl){img.src=bgUrl.startsWith('/api/')?bgUrl:bgUrl.startsWith('data:')?bgUrl:'/api/proxy/img?url='+encodeURIComponent(bgUrl);}else{renderAll();}
-}
-async function saveDesignerSlide(title,postId,idx){
- const slideIdx=parseInt(document.getElementById('designer-slide-select')?.value||'0');
- const p=_wallPosts[idx];if(!p||!p.slides)return;
- const s=p.slides[slideIdx];if(!s)return;
- const text=document.getElementById('designer-text')?.value||s.text||'';
- const bgUrlInput=document.getElementById('designer-bg-url')?.value||'';
- const bgUrl=designerBgDataUrl||bgUrlInput||s.image||p.img||'';
- const textColor=document.getElementById('designer-text')?.style.color||'#ffffff';
- const ratio=designerGetRatio();
- const layout=designerGetLayout();
- const statusEl=document.getElementById('designer-status');if(statusEl)statusEl.textContent='⏳ Đang tạo ảnh...';
- const FINAL_W=ratio.w>=ratio.h?1800:1350;
- const FINAL_H=Math.round(FINAL_W*ratio.h/ratio.w);
- const canvas=document.createElement('canvas');canvas.width=FINAL_W;canvas.height=FINAL_H;
- const ctx=canvas.getContext('2d');
- const img=new Image();img.crossOrigin='anonymous';
- function drawLayoutF(){
- if(layout==='vignette'){const g=ctx.createRadialGradient(FINAL_W/2,FINAL_H/2,0,FINAL_W/2,FINAL_H/2,Math.max(FINAL_W,FINAL_H)*0.6);g.addColorStop(0,'rgba(0,0,0,0)');g.addColorStop(1,'rgba(0,0,0,0.7)');ctx.fillStyle=g;ctx.fillRect(0,0,FINAL_W,FINAL_H);}
- else if(layout==='split'){ctx.fillStyle='rgba(0,0,0,0)';ctx.fillRect(0,0,FINAL_W,FINAL_H/2);ctx.fillStyle='rgba(0,0,0,0.7)';ctx.fillRect(0,FINAL_H/2,FINAL_W,FINAL_H/2);}
- else if(layout==='spotlight'){const cx=FINAL_W/2,cy=FINAL_H/2,r=Math.max(FINAL_W,FINAL_H)*0.35;ctx.save();ctx.fillStyle='rgba(0,0,0,0.7)';ctx.fillRect(0,0,FINAL_W,FINAL_H);ctx.globalCompositeOperation='destination-out';ctx.fillStyle='white';ctx.beginPath();ctx.arc(cx,cy,r,0,Math.PI*2);ctx.fill();ctx.globalCompositeOperation='source-over';}
- else if(layout==='diagonal'){ctx.fillStyle='rgba(0,0,0,0.55)';ctx.fillRect(0,0,FINAL_W,FINAL_H);ctx.fillStyle='rgba(0,0,0,0.75)';ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(FINAL_W,0);ctx.lineTo(0,FINAL_H);ctx.closePath();ctx.fill();}
- else {ctx.fillStyle='rgba(0,0,0,0.55)';ctx.fillRect(0,0,FINAL_W,FINAL_H);}
- }
- function drawTextF(){
- ctx.fillStyle=textColor;ctx.font='bold '+Math.round(FINAL_W*48/1080)+'px sans-serif';
- ctx.textAlign='center';ctx.textBaseline='middle';
- const maxW=Math.round(FINAL_W*0.82);const words=text.split(' ');let line='';let y=Math.round(FINAL_H/2);
- const fontSize=Math.round(FINAL_W*48/1080);const lineHeight=Math.round(fontSize*1.3);
- for(let i=0;imaxW&&i>0){ctx.fillText(line.trim(),FINAL_W/2,y);y+=lineHeight;line=words[i];}else{line=test;}}ctx.fillText(line.trim(),FINAL_W/2,y);
- }
- function render(){
- ctx.fillStyle='#1a1a1a';ctx.fillRect(0,0,FINAL_W,FINAL_H);
- drawLayoutF();drawTextF();
- canvas.toBlob(async function(blob){
- const formData=new FormData();formData.append('file',blob,'slide_'+slideIdx+'.png');formData.append('post_id',postId||p.id||'');
- try{const r=await fetch('/api/wall/img',{method:'POST',body:formData});const j=await r.json();if(!r.ok||j.error)throw new Error(j.error||'Lỗi upload');
- s.image=j.url;
- const post={id:p.id,title:title||p.title,text:p.text,img:j.url,url:p.url,slides:p.slides,images:p.images,voice:p.voice,emotion:p.emotion,language:p.language,ts:p.ts,kind:p.kind||'slide_summary'};
- const wr=await fetch('/api/wall',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(post)});
- const wj=await wr.json();if(wr.ok&&wj.post){prependWallPost(wj.post);toast('✅ Đã lưu ảnh đăng lên Tường AI!');}else{toast('✅ Đã lưu ảnh slide!');}
- document.getElementById('slide-designer-overlay').remove();
- }catch(e){if(statusEl)statusEl.textContent='❌ '+e.message;toast('❌ '+e.message);}
- },'image/png');
- }
- img.onload=function(){
- const iw=img.naturalWidth||1,ih=img.naturalHeight||1;
- const scale=Math.max(FINAL_W/iw,FINAL_H/ih);
- const dw=iw*scale,dh=ih*scale;
- const dx=(FINAL_W-dw)/2,dy=(FINAL_H-dh)/2;
- ctx.drawImage(img,0,0,iw,ih,dx,dy,dw,dh);
- drawLayoutF();drawTextF();
- canvas.toBlob(async function(blob){
- const formData=new FormData();formData.append('file',blob,'slide_'+slideIdx+'.png');formData.append('post_id',postId||p.id||'');
- try{const r=await fetch('/api/wall/img',{method:'POST',body:formData});const j=await r.json();if(!r.ok||j.error)throw new Error(j.error||'Lỗi upload');
- s.image=j.url;
- const post={id:p.id,title:title||p.title,text:p.text,img:j.url,url:p.url,slides:p.slides,images:p.images,voice:p.voice,emotion:p.emotion,language:p.language,ts:p.ts,kind:p.kind||'slide_summary'};
- const wr=await fetch('/api/wall',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(post)});
- const wj=await wr.json();if(wr.ok&&wj.post){prependWallPost(wj.post);toast('✅ Đã lưu ảnh đăng lên Tường AI!');}else{toast('✅ Đã lưu ảnh slide!');}
- document.getElementById('slide-designer-overlay').remove();
- }catch(e){if(statusEl)statusEl.textContent='❌ '+e.message;toast('❌ '+e.message);}
- },'image/png');
- };
- img.onerror=function(){if(statusEl)statusEl.textContent='⚠️ Không tải được ảnh nền, dùng nền mặc định';ctx.fillStyle='#1a1a1a';ctx.fillRect(0,0,FINAL_W,FINAL_H);drawLayoutF();drawTextF();canvas.toBlob(function(blob){
- const formData=new FormData();formData.append('file',blob,'slide_'+slideIdx+'.png');formData.append('post_id',postId||p.id||'');
- fetch('/api/wall/img',{method:'POST',body:formData}).then(r=>r.json()).then(j=>{
- if(j.ok){s.image=j.url;const post={id:p.id,title:title||p.title,text:p.text,img:j.url,url:p.url,slides:p.slides,images:p.images,voice:p.voice,emotion:p.emotion,language:p.language,ts:p.ts,kind:p.kind||'slide_summary'};
- fetch('/api/wall',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(post)}).then(r=>r.json()).then(wj=>{if(wj.post)prependWallPost(wj.post);toast('✅ Đã lưu ảnh đăng lên Tường AI!');document.getElementById('slide-designer-overlay').remove();});}
- }).catch(e=>{if(statusEl)statusEl.textContent='❌ '+e.message;toast('❌ '+e.message);});
- },'image/png');};
- if(bgUrl){img.src=bgUrl.startsWith('/api/')?bgUrl:bgUrl.startsWith('data:')?bgUrl:'/api/proxy/img?url='+encodeURIComponent(bgUrl);}else{render();}
-}
-
-function readNewsTab(tab){loadNewsTab();}
-function loadNewsTab(){const el=document.getElementById('view-cat');if(!el)return;el.innerHTML='Đang tải tin tức...
';fetch('/api/homepage').then(r=>r.json()).then(articles=>{if(!articles||!articles.length){el.innerHTML='Không có tin
';return}let h='';articles.forEach(a=>{const src=a.source||'vne';const badge=a.group||a.source||'';h+=`
${a.img?`
`:''}
${esc(badge)} ${esc(a.title)}
`;});h+='
Lỗi tải
';});}
-
-function readArticle(url,title,img,presetTitle,presetText){showView('view-article');const el=document.getElementById('view-article');el.innerHTML='Đang tải...
← Quay lại ';if(presetTitle){el.innerHTML=`← Quay lại ${esc(presetTitle)} ${presetText?`
${esc(presetText)}
`:''}
📤 Chia sẻ
`;return;}if(!url)return;fetch('/api/article?url='+encodeURIComponent(url)).then(r=>r.json()).then(d=>{let h=`← Quay lại `;if(d.title)h+=`
${esc(d.title)} `;if(d.summary)h+=`
${esc(d.summary)}
`;if(d.body)d.body.forEach(b=>{if(b.type==='p')h+=`
${esc(b.text)}
`;else if(b.type==='heading')h+=`
${esc(b.text)} `;else if(b.type==='img'&&b.src)h+=`
`;});h+=`
📤 Chia sẻ 🤖 Slide Rewrite AI
`;el.innerHTML=h;}).catch(()=>{el.innerHTML=`← Quay lại `;});}
-async function rewriteSlide(url){if(!url)return;const btn=document.querySelector('.article-actions .primary')||event?.target;if(btn){btn.disabled=true;btn.textContent='⏳ Đang tạo slides...';}toast('⏳ Đang tạo slide rewrite...');try{const r=await fetch('/api/rewrite_share',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url})});const j=await r.json();if(!r.ok||j.error)throw new Error(j.error||'Lỗi');toast('✅ Đã tạo slide! Đang tạo Short AI...');if(btn)btn.textContent='✅ Đang tạo Short AI...';if(j.post){j.post.slides=j.slides||[];prependWallPost(j.post);}// Show slides immediately if available
-if(j.slides && j.slides.length){showView('view-article');const el=document.getElementById('view-article');let h=`← Tường AI `;j.slides.forEach(s=>{h+=`
Slide ${s.index}/${j.slides.length}
${s.image?`
`:''}
${esc(s.text)}
`;});h+=`
🎨 Thiết kế ảnh ⏳ Đang tạo video Short AI...
▶ Xem ngay ';}},500);}if(btn)btn.textContent='✅ Hoàn tất';}catch(e){toast('❌ '+e.message);if(btn){btn.disabled=false;btn.textContent='🤖 Slide Rewrite AI';}}}
-
-function downloadVideo(url, title){
- var a = document.createElement('a');
- a.href = url;
- a.download = (title||'video').toString().replace(/[^a-zA-Z0-9_\-\p{L}]/gu,'_').substring(0,60)+'.mp4';
- a.target = '_blank';
- a.rel = 'noopener';
- a.style.display = 'none';
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- toast('📥 Đang tải video xuống...');
-}
-
-// ===== PERSONAL OPINION POST: Viết bài dựa trên quan điểm cá nhân + tin HOT =====
-async function openPersonalPostPreview() {
- const opinion = document.getElementById('opinion-input')?.value.trim();
- if (!opinion || opinion.length < 10) {
- alert('Vui lòng nhập quan điểm cá nhân (ít nhất 10 ký tự)');
- return;
- }
-
- // Get selected hot topics from UI (if any)
- const selectedTopics = [];
- if (window._htTopic) {
- selectedTopics.push(window._htTopic);
- }
-
- // Get selected sources from hashtag view
- const selectedSources = [];
- document.querySelectorAll('.hashtag-src-item.selected').forEach(el => {
- const idx = parseInt(el.dataset.idx || '0');
- // Would need source tracking
- });
-
- const btn = event?.target;
- const origText = btn ? btn.textContent : '';
- if (btn) { btn.disabled = true; btn.textContent = '⏳ Đang tạo preview...'; }
-
- try {
- const resp = await fetch('/api/personal_post/preview', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- opinion: opinion,
- selected_topics: selectedTopics,
- selected_sources: selectedSources
- })
- });
- const data = await resp.json();
- if (!resp.ok || data.error) throw new Error(data.error || 'Lỗi tạo preview');
-
- showPersonalPostModal(data.preview, opinion, selectedTopics, selectedSources);
- } catch (e) {
- toast('❌ ' + e.message);
- } finally {
- if (btn) { btn.disabled = false; btn.textContent = origText; }
- }
-}
-
-function showPersonalPostModal(preview, originalOpinion, selectedTopics, selectedSources) {
- // Remove existing modal
- const existing = document.getElementById('personal-post-modal');
- if (existing) existing.remove();
-
- const modal = document.createElement('div');
- modal.id = 'personal-post-modal';
- modal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto';
-
- // Each slide renders EXACTLY like the designer's final PNG (same ratio,
- // same bg draw, same text draw) — preview = pixel-identical to wall post image.
- const slidesHtml = (preview.slides || []).map((s, i) => {
- const ratio = {w:3, h:4}; // preview always 3:4 (same as designer final)
- const slideStyle = 'width:100%;max-width:280px;margin:0 auto;display:block;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.5)';
- return ''
- + '
Slide ' + (i+1) + '
'
- + '
'
- + '
'
- + '
'
- + '
'
- + (imgSrc ? '
' : '')
- + '
'
- + '
' + (s.title || '') + '
'
- + '
'
- + '
'
- + '
'
- + '
📝 Xem trước bài quan điểm cá nhân '
- + '✕ '
- + ''
- + '
'
- + 'Tiêu đề: '
- + '
'
- + '
'
- + 'Quan điểm gốc: '
- + ''
- + '
'
- + '
'
- + '
🖼️ Các slide — bản xem trước hiển thị ĐÚNG 100% như ảnh thiết kế (chữ + nền): '
- + '
'
- + '🎨 Thiết kế ảnh (canvas) '
- + '🔄 Vẽ lại '
- + '
'
- + '
' + slidesHtml + '
'
- + '
'
- + '
'
- + '
Nguồn tin tham khảo (bỏ chọn để loại): '
- + '
'
- + (sourcesHtml || '
Không có nguồn tin
')
- + '
'
- + '
'
- + '✅ Đăng lên Tường AI '
- + 'Hủy '
- + '
?s.image:'/api/proxy/img?url='+encodeURIComponent(s.image)})
`:''}