dogfather-universe/workspace/assets/js/teilen.js

/* =====================================================================
   AUS „TEILEN" WIRD EIN TIPP (17.09.2026) — Schritt 4 des Video-Plans

   Filipe: „damit meine videos auch da auf der app rein kommen … sobald
   ich ein video poste erscheint es sofort in der app."

   Diese Seite ist das Ziel des Teilen-Menüs auf dem Handy. Sie liest,
   was angekommen ist, zeigt es und trägt es auf Tipp ein.

   ---------------------------------------------------------------------
   DER STOLPERSTEIN, DEN JEDE ANLEITUNG VERSCHWEIGT

   Das Teilen-Ziel im Manifest kennt drei Felder: `title`, `text`,
   `url`. Man erwartet, dass der Link in `url` steht.

   TUT ER MEISTENS NICHT. Android-Apps – TikTok eingeschlossen – teilen
   in aller Regel als reinen Text: `text` enthält dann einen Satz, in
   dem die Adresse irgendwo drinsteht („Sieh dir das an!
   https://vm.tiktok.com/xyz/"), und `url` ist leer. Wer nur `url`
   liest, bekommt eine leere Seite und weiß nicht, warum.

   Deshalb wird in ALLEN drei Feldern gesucht, und zwar nach einem
   Muster, nicht nach einem Feldnamen.

   ---------------------------------------------------------------------
   UND SIE TRÄGT NICHT VON SELBST EIN

   Sie kann nicht wissen, ob der Griff in die Tasche gemeint war. Ein
   Video, das ungefragt in den Highlights landet, muss jemand wieder
   löschen — und das ist mehr Arbeit als ein Tipp auf „Übernehmen".
   ===================================================================== */
(() => {
  'use strict';
  const $ = (id) => document.getElementById(id);
  const el = (art, klasse, text) => {
    const n = document.createElement(art);
    if (klasse) n.className = klasse;
    if (text !== undefined) n.textContent = text;
    return n;
  };

  const melde = (t) => { const f = $('fehler'); if (f) f.textContent = t || ''; };

  /* WOHIN ES GEHEN KANN. Highlights zuerst und vorausgewählt – dort
     gehören Videos hin. Die beiden anderen sind die Fälle, in denen
     ein Clip etwas anderes ist: eine Antwort auf einen Wunsch oder
     eine Ansage. */
  const BRETTER = [
    { wert: 'highlight', name: 'Highlights', satz: 'Die Videos der Community.' },
    { wert: 'treff', name: 'Das Rudel', satz: 'Wenn es eher ein Gesprächsanlass ist.' },
    { wert: 'anschlag', name: 'Anschlagbrett', satz: 'Wenn es eine Ansage ist.' },
  ];
  let brett = 'highlight';

  /* ---------------------------------------------------------------------
     DEN LINK FINDEN
     ------------------------------------------------------------------- */

  /** Die erste Adresse in einem Text. Ohne abschliessende Satzzeichen —
   *  „… https://vm.tiktok.com/xyz/." endet nicht auf einen Punkt. */
  function adresseAus(text) {
    const treffer = String(text || '').match(/https?:\/\/[^\s<>"']+/i);
    if (!treffer) return '';
    return treffer[0].replace(/[.,;:!?)\]]+$/, '');
  }

  /** Aus dem, was das Teilen-Menü geschickt hat. */
  function geteilterLink() {
    const p = new URLSearchParams(location.search);
    /* IN DIESER REIHENFOLGE: `url` ist das saubere Feld, wenn es
       gefüllt ist. `text` ist der Normalfall bei Android. `title`
       enthält bei manchen Apps den Link, wenn sonst nichts da ist. */
    for (const feld of ['url', 'text', 'title']) {
      const a = adresseAus(p.get(feld));
      if (a) return a;
    }
    return '';
  }

  /* ---------------------------------------------------------------------
     DIE SEITE
     ------------------------------------------------------------------- */
  function brettwahlBauen() {
    const ziel = $('bretter');
    ziel.textContent = '';
    for (const b of BRETTER) {
      const k = el('button', 'tl-brett');
      k.type = 'button';
      k.dataset.brett = b.wert;
      k.setAttribute('aria-pressed', String(brett === b.wert));
      k.append(el('span', 'tl-brett-name', b.name));
      k.append(el('span', 'tl-brett-satz', b.satz));
      k.addEventListener('click', () => {
        brett = b.wert;
        for (const x of ziel.querySelectorAll('.tl-brett')) {
          x.setAttribute('aria-pressed', String(x.dataset.brett === brett));
        }
      });
      ziel.append(k);
    }
  }

  async function uebernehmen(url) {
    const knopf = $('uebernehmen');
    knopf.disabled = true;
    const alterText = knopf.textContent;
    knopf.textContent = 'wird geholt …';
    melde('');
    try {
      const a = await fetch(`/workspace/api/bereich/${brett}/video`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url }),
      });
      const daten = await a.json().catch(() => null);
      if (!a.ok) {
        melde(sagWas(daten?.fehler, 'Das hat nicht geklappt.'));
        knopf.disabled = false;
        knopf.textContent = alterText;
        return;
      }
      /* FERTIG. Der Weg dorthin steht als Knopf da – wer teilt, will
         meistens gleich sehen, wie es aussieht. */
      $('fund').hidden = true;
      $('wahl').hidden = true;
      $('knoepfe').hidden = true;
      $('haendisch').hidden = true;
      const name = BRETTER.find((b) => b.wert === brett)?.name || brett;
      $('fertig-satz').textContent = daten?.schon
        ? `Das Video lag schon bei „${name}“ – es wurde kein zweites angelegt.`
        : `Angekommen bei „${name}“.`
          + (daten?.titel ? ` Titel: „${daten.titel}“` : '');
      $('hin').href = `bereich.html?b=${encodeURIComponent(brett)}`;
      $('fertig').hidden = false;
    } catch {
      melde('Keine Verbindung. Versuch es gleich noch einmal.');
      knopf.disabled = false;
      knopf.textContent = alterText;
    }
  }

  function los() {
    const teilen = $('teilen');
    const link = geteilterLink();
    $('ladezeile').hidden = true;
    teilen.setAttribute('aria-busy', 'false');
    brettwahlBauen();
    $('wahl').hidden = false;
    $('knoepfe').hidden = false;

    if (link) {
      $('url-text').textContent = link;
      $('fund').hidden = false;
    } else {
      /* KEIN LINK DABEI. Das ist kein Fehler – manche Apps teilen nur
         einen Text ohne Adresse, und manchmal kommt jemand einfach so
         auf diese Seite. Ein Feld zum Einfügen ist die freundlichere
         Antwort als eine Meldung. */
      $('haendisch').hidden = false;
      $('eingabe').focus();
    }

    $('uebernehmen').addEventListener('click', () => {
      const url = link || $('eingabe')?.value?.trim();
      if (!url) { melde('Da fehlt noch der Link zum Video.'); $('eingabe')?.focus(); return; }
      uebernehmen(url);
    });

    /* Enter im Feld tut dasselbe wie der Knopf. Wer auf dem Handy
       tippt, drückt die grüne Taste und nicht daneben. */
    $('eingabe')?.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') { e.preventDefault(); $('uebernehmen').click(); }
    });
  }

  /* ==== STUMM HAENGEN IST DER SCHLIMMSTE AUSGANG (05.10.2026) =====

     Filipe: "ich lade video hoch und es erscheint immer noch nicht",
     auf Nachfrage: die Seite bleibt haengen, es kommt KEINE Meldung.

     `los()` baut die Seite auf und macht dabei keine einzige
     Netzanfrage -- es kann also nur stolpern, nicht warten. Und wenn
     es stolpert, passiert genau das, was er beschreibt: Die erste
     Zeile wirft, `ladezeile.hidden = true` wird nie erreicht, und die
     Seite steht fuer immer auf "wird geladen". Kein Fehler, kein
     Hinweis, nichts zum Weitermelden -- und von aussen nicht zu
     unterscheiden von "der Server antwortet nicht".

     DAS IST EIN EIGENER MANGEL, unabhaengig von der Ursache: Eine
     Seite, die nicht sagen kann, dass sie kaputt ist, kostet jeden
     Fehler doppelt -- einmal den Fehler und einmal die Suche danach.
     Ich habe heute Stunden gebraucht, um von aussen auszuschliessen,
     was diese drei Zeilen in einer Sekunde gesagt haetten.

     Die Meldung nennt den Grund im Klartext. Sie ist nicht schoen,
     aber sie ist da -- und der Weg zum Brett steht daneben, damit das
     Video trotzdem hineinkommt. */
  function losSicher() {
    try {
      los();
    } catch (fehler) {
      const z = (id) => document.getElementById(id);
      if (z('ladezeile')) z('ladezeile').hidden = true;
      if (z('teilen')) z('teilen').setAttribute('aria-busy', 'false');
      /* Das Einfuegefeld aufmachen: Auch wenn das Erkennen des Links
         misslungen ist, kann man ihn von Hand einsetzen. */
      if (z('haendisch')) z('haendisch').hidden = false;
      if (z('wahl')) z('wahl').hidden = false;
      if (z('knoepfe')) z('knoepfe').hidden = false;
      melde('Beim Aufbau der Seite ist etwas schiefgegangen: '
        + String(fehler?.message || fehler)
        + ' — füg den Link unten von Hand ein, das geht trotzdem.');
      /* Und der Knopf muss trotzdem gehen, sonst ist die Meldung ein
         Trost ohne Ausweg. */
      const k = z('uebernehmen');
      if (k && !k.dataset.bereit) {
        k.dataset.bereit = 'ja';
        k.addEventListener('click', () => {
          const url = z('eingabe')?.value?.trim();
          if (!url) { melde('Da fehlt noch der Link zum Video.'); return; }
          uebernehmen(url);
        });
      }
      console.error('[teilen]', fehler);
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', losSicher);
  } else { losSicher(); }
})();