PROGRAM UPLOADED VIDEO oleh ALMIGHTY CHATGPT!! PART-6: SOURCE CODE RESULT milestone2 aka draft2

<!-- ===========================

SINGLE PAGE: PART1 (MAIN) + PART2 (SUMMARY)

Paste this whole block into Blogger post (HTML mode)

=========================== -->

<style>

/* Styles Part 1 (main) */

.video-item { margin-bottom: 18px; }

.meta-title { margin-top:8px; font-style:italic; font-size:1.05rem; font-weight:bold; }

.meta-translation { color:#444; margin-bottom:6px; font-size:0.95rem; }

.comment-section { margin-top:10px; }

.comment-input { width:100%; min-height:65px; }

.comment-output { margin-top:8px; background:#f5f5f5; padding:6px; min-height:22px; border-radius:4px; }

/* Control Section */

#login-panel, #admin-panel {

border: 2px solid #666; padding: 20px; border-radius: 10px;

background: #f0f0f0; margin-bottom: 25px;

}

#admin-panel { display:none; }

#log-box {

background:#fff; border:1px solid #aaa; padding:10px;

max-height:200px; overflow-y:auto; margin-top:10px;

}

/* Styles Part 2 (summary) */

#summary-sep { text-align:center; margin-top:40px; margin-bottom:10px; font-size:1.4rem; font-weight:bold; }

.sum-video-item { margin-bottom: 22px; }

.sum-comment-box {

background:#f7f7f7; border:1px solid #aaa; padding:10px; border-radius:6px;

min-height:40px; font-size:0.95rem;

}

</style>

<!-- ===========================

CONTROL SECTION (LOGIN / ADMIN)

=========================== -->

<h3><b>CONTROL SECTION</b> — Login</h3>

<label>Username:</label><br>

<label>Password:</label><br>

<button id="login-btn">Login</button>

</div>

<h3><b>CONTROL SECTION</b> — Admin Panel</h3>

<label><input type="radio" name="comm" value="enable"> Enable All Comments</label><br>

<label><input type="radio" name="comm" value="disable"> Disable All Comments</label>

<button id="logout-btn">Logout</button>

<h4>Activity Log</h4>

</div>

<!-- ===========================

PART 1 — MAIN VIDEO LIST (editable comments)

=========================== -->

<h4>Leave a Comment:</h4>

<button class="comment-submit" data-id="1" id="com-submit-1">Submit</button>

</div>

<hr>

</div>

<h4>Leave a Comment:</h4>

<button class="comment-submit" data-id="3" id="com-submit-3">Submit</button>

</div>

<hr>

</div>

<h4>Leave a Comment:</h4>

<button class="comment-submit" data-id="16" id="com-submit-16">Submit</button>

</div>

<hr>

</div>

<h4>Leave a Comment:</h4>

<button class="comment-submit" data-id="22" id="com-submit-22">Submit</button>

</div>

<hr>

</div>

<!-- ===========================

PART 2 — SUMMARY (read-only duplicate of Part1 comments)

=========================== -->

<div id="summary-sep">SUMMARY</div>

Ringkasan komentar (read-only) — menampilkan isi komentar yang telah disimpan di Part 1.

</p>

<h4>Comment (Read Only):</h4>

<hr>

</div>

<h4>Comment (Read Only):</h4>

<hr>

</div>

<h4>Comment (Read Only):</h4>

<hr>

</div>

<h4>Comment (Read Only):</h4>

<hr>

</div>

<!-- ===========================

SCRIPT (combined — single DOMContentLoaded)

=========================== -->

document.addEventListener("DOMContentLoaded", function(){

/* ---------- helpers ---------- */

function escapeHtml(s){

return String(s || "").replace(/[&<>"']/g,

m=>({"&":"&","<":"<",">":">","\"":""","'":"'"}[m]));

}

function onClick(id, handler){

const el = document.getElementById(id);

if (el) el.addEventListener("click", handler);

}

/* ---------- log utils ---------- */

function loadLog(){ let raw = localStorage.getItem("manu_log"); return raw ? JSON.parse(raw) : []; }

function saveLog(log){ localStorage.setItem("manu_log", JSON.stringify(log)); }

function addLog(text){ let log = loadLog(); log.unshift(`[${new Date().toLocaleString()}] ${text}`); saveLog(log); renderLog(); }

function renderLog(){ const b = document.getElementById("log-box"); if (b) b.innerHTML = loadLog().map(x=>`<div>${x}</div>`).join(""); }

/* ---------- login/comment-state utils ---------- */

function isLoggedIn(){ return localStorage.getItem("manu_login") === "true"; }

function applyCommentState(state){

const disabled = (state === "disable");

document.querySelectorAll(".comment-input").forEach(e=>{ e.disabled = disabled; e.readOnly = disabled; });

document.querySelectorAll(".comment-submit").forEach(e=>{ e.disabled = disabled; });

}

function loadCommentState(){

const s = localStorage.getItem("comment_state") || "enable";

applyCommentState(s);

const sel = document.querySelector(`input[name='comm'][value='${s}']`);

if (sel) sel.checked = true;

}

/* ---------- metadata & translate (simple) ---------- */

const GOOGLE_TRANSLATE_ENDPOINT =

"https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&dt=t&q=";

async function translateSmartSingle(text){

if (!text) return "";

try{

let r = await fetch(GOOGLE_TRANSLATE_ENDPOINT + encodeURIComponent(text));

if (r.ok){

let arr = await r.json();

if (arr && arr[0]) {

let out = "";

for (let seg of arr[0]) if (seg[0]) out += seg[0];

if (out.trim()) return out;

}

}catch(e){}

return text;

}

async function loadMetadataInto(box, videoURL){

if (!box) return;

box.innerHTML = "<i>Loading...</i>";

try{

let r = await fetch("https://www.youtube.com/oembed?url="+encodeURIComponent(videoURL)+"&format=json");

if (!r.ok) throw 0;

let meta = await r.json();

let title = meta.title || "(no title)";

box.innerHTML = `<p class="meta-title">${escapeHtml(title)}</p><p class="meta-translation"><b>English:</b> Translating...</p>`;

let eng = await translateSmartSingle(title);

const transEl = box.querySelector(".meta-translation");

if (transEl) transEl.innerHTML = `<b>English:</b> ${escapeHtml(eng)}`;

}catch(e){

box.innerHTML = "<p>(Metadata unavailable)</p>";

}

/* ---------- comments DB ---------- */

function loadCommentsDB(){ let raw = localStorage.getItem("YT_comments_clean_v2"); return raw ? JSON.parse(raw) : {}; }

function saveCommentsDB(db){ localStorage.setItem("YT_comments_clean_v2", JSON.stringify(db)); }

/* ---------- init control UI ---------- */

const loginPanel = document.getElementById("login-panel");

const adminPanel = document.getElementById("admin-panel");

renderLog();

if (isLoggedIn()){

if (loginPanel) loginPanel.style.display = "none";

if (adminPanel) adminPanel.style.display = "block";

addLog("Auto login");

}

onClick("login-btn", function(){

const u = (document.getElementById("user")||{}).value || "";

const p = (document.getElementById("pass")||{}).value || "";

if (u === "manu" && p === "manu"){

localStorage.setItem("manu_login","true");

if (loginPanel) loginPanel.style.display = "none";

if (adminPanel) adminPanel.style.display = "block";

addLog("User manu logged in");

} else {

alert("Wrong username or password.");

}

});

onClick("logout-btn", function(){

addLog("User manu logged out");

localStorage.setItem("manu_login","false");

location.reload();

});

document.querySelectorAll("input[name='comm']").forEach(r=>{

r.addEventListener("change", function(){

const v = this.value;

localStorage.setItem("comment_state", v);

applyCommentState(v);

addLog(v === "enable" ? "Comments ENABLED" : "Comments DISABLED");

});

/* ---------- initialize metadata for both parts ---------- */

// For each video-item (part1) load metadata into its .auto-meta (if any)

document.querySelectorAll(".video-item").forEach(vi=>{

const url = vi.getAttribute("data-src");

const metaBox = vi.querySelector(".auto-meta");

if (metaBox && url) loadMetadataInto(metaBox, url);

});

// Also for summary meta boxes (smaller) — optional, reuse same video URLs by id

const idToUrl = {};

document.querySelectorAll(".video-item").forEach(vi=>{

const id = vi.getAttribute("data-id");

const url = vi.getAttribute("data-src");

if (id) idToUrl[id] = url;

});

document.querySelectorAll("[data-id^='sum-meta-'], .sum-meta").forEach(el=>{

// these summary meta containers have data-id attr like sum-meta-1 stored earlier in HTML; find numeric id

const parent = el.closest(".sum-video-item");

if (!parent) return;

const id = parent.getAttribute("data-id");

const url = idToUrl[id];

if (url) loadMetadataInto(el, url);

});

/* ---------- initialize comment boxes (Part1) ---------- */

const db = loadCommentsDB();

// Helper: update summary box for id

function updateSummaryBox(id){

const b = document.getElementById("sum-com-" + id);

if (!b) return;

if (db[id]) b.innerHTML = escapeHtml(db[id]);

else b.innerHTML = "<i>(No comment entered)</i>";

}

// For each video item in Part1, set initial values and attach submit handler

document.querySelectorAll(".video-item").forEach(vi=>{

const id = vi.getAttribute("data-id");

if (!id) return;

const ta = vi.querySelector(".comment-input");

const out = vi.querySelector(".comment-output");

const btn = vi.querySelector(".comment-submit");

if (db[id]){

if (ta) ta.value = db[id];

if (out) out.innerHTML = `<p>${escapeHtml(db[id])}</p>`;

}

if (btn){

btn.addEventListener("click", function(e){

const state = localStorage.getItem("comment_state") || "enable";

if (state === "disable"){

alert("Komentar dinonaktifkan oleh admin.");

applyCommentState("disable");

return;

}

const val = (ta ? ta.value : "").trim();

if (!val) return;

db[id] = val;

saveCommentsDB(db);

if (out) out.innerHTML = `<p>${escapeHtml(val)}</p>`;

// update summary box live

updateSummaryBox(id);

});

}

});

/* ---------- initialize summary boxes (Part2) ---------- */

// Fill all summary boxes from DB initially

["1","3","16","22"].forEach(id => updateSummaryBox(id));

/* ---------- apply comment state & render log ---------- */

loadCommentState();

renderLog();

}); // end DOMContentLoaded

</script>

ANDREAS TOMMY PARLAUNGAN MANURUNG

Search This Blog

PROGRAM UPLOADED VIDEO oleh ALMIGHTY CHATGPT!! PART-6: SOURCE CODE RESULT milestone2 aka draft2

Comments

Post a Comment