[live] Weiterentwicklung v3.3.x

Quote from MarkusE

Schau mal in tntconfig.cpp, ab Zeile 199:

Hmm, da kann/muss man also URLs auf Pfade mappen und gleichzeitig den ContentType festlegen.

Ein Curl auf eine beispielhafte SVG-Datei sieht bei mir so aus wie unten.

Die liegt im selben Ordner, nur die Dateiendung ist anders.

Ich verstehe trotzdem nicht, weshalb Firefox da mit einem Download-Fenster kommt (kein Content-Disposition: attachment).

> GET /themes/marine/img/search.svg HTTP/1.1
> Host: 192.168.178.22:8008
> User-Agent: curl/7.81.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Date: Fri, 24 Nov 2023 10:35:55 GMT
< Server: Tntnet/2.2.1
< Content-Length: 1287
< Keep-Alive: timeout=15000, max=999
< Connection: Keep-Alive
< Content-Type: image/svg
< Last-Modified: Thu, 23 Nov 2023 13:30:56 GMT
< Set-Cookie: tntnet=aaefbc1fed0daf254619724fc60c8c3a; Path=/;Version=1

Wenn ich mir Seiten mit funktionierender Inline-Darstellung von SVG-Dateien anschaue, dann werden diese als image/svg+xml ausgeliefert:

< HTTP/2 200
< date: Fri, 24 Nov 2023 10:42:43 GMT
< content-type: image/svg+xml
< content-length: 869
< last-modified: Mon, 10 May 2021 13:21:28 GMT
< etag: "e220953b911e92d6fd9540724d0cae19"
< accept-ranges: bytes
< x-cache: Hit from cloudfront
< via: 1.1 a0a81637cc76d6981e4e29044a73b7f6.cloudfront.net (CloudFront)
< x-amz-cf-pop: FRA6-C1
< x-amz-cf-id: Lk4_NptY0i9yrxVBsf78JUUfDjgoFA-MBlLHs-ohUJ0kkwkGQdU7Iw==
< age: 188591
< cf-cache-status: DYNAMIC

Könnte das den Unterschied ausmachen?

Bin allerdings vollkommen hilflos, wie ich dafür eine spezielle MapUrl-RegEx-Regel erstellen oder die bestehende anpassen könnte.

Das hier

//SVG-Fix
        MapUrl(app,
               "^/themes/([^/]*)/img.*/(.+)\\.svg",
               "content",
               GetResourcePath(),
               "/themes/$1/img/$2.svg",
               "image/svg+xml");

führt bei mir immer noch zu image/svg.

Das Kompilat hat aber auch die gleiche Dateigröße wie vorher.

Edit: Im MapUrl davor evtl. ein Conditional bei image/$3 im Sinne von if ($3 == 'svg') noch '+xml' anconcatenaten?

Bin leider auch bekennender RegEx-Legastheniker...

So, ich hab jetzt den folgenden SVG-Fix an erste Stelle gestellt...

// the following rules provide a search scheme for images. The first
// rule where a image is found, terminates the search.
// 1. /themes/<theme>/img/<imgname>.<ext>
// 2. /img/<imgname>.<ext>
// deprecated: 3. <imgname>.<ext> (builtin images)
// inserted by 'tadi' -- verified with above, but not counterchecked yet!
//SVG-Fix
MapUrl(app,
"^/themes/([^/]*)/img.*/(.+)\\.svg",
"content",
GetResourcePath(),
"/img/$2.svg",
"image/svg+xml");

...und bekomme jetzt genau eine SVG-Datei (nämlich die search.svg-Lupe) erfolgreich mit image/svg+xml serviert und angezeigt. Rest der SVG-Dateien weiterhin image/svg.

Vermutlich ein Zusammenhang mit The first rule where a image is found, terminates the search..

Aber mir erschließt sich das Konzept dahinter immer noch nicht - von den PNG-Dateien wird ja auch mehr als eine angezeigt.

Kann mich mal jemand retten?

Hätte nicht gedacht, dass es so schwierig sein kann simple SVG-Dateien korrekt von einem Webserver ausrollen zu lassen.

Quote from MarkusE

I welchem Verzeichnis sind die svg Dateien?

In /usr/share/vdr/plugins/live/themes/*/img ?

Oder in usr/share/vdr/plugins/live/img ?

/usr/share/vdr/plugins/live/img, da wo auch die PNG-Geschwister liegen.

Edit: Der Server mappt die img ja aber irgendwie noch in die einzelnen themes-Pfade rein.

Ich find es halt komplett strange, dass er mir ausgerechnet die search.svg mit image/svg+xml rausjaucht und beim Rest auf image/svg bleibt.

Quote from MarkusE

So funktionieren diese Regeln: wenn themes/*/img die Datei ist, wird diese genommen.

Falls nicht, zieht die 2. Regel, und er nimmt die Datei aus img .

D.h. man müsste...

        MapUrl(app,
               "^/themes/([^/]*)/img.*/(.+)\\.(.+)",
               "content",
               GetResourcePath(),
               "/themes/$1/img/$2.$3",
               "image/$3");

...jeweils als separaten MapUrl-Call nach PNG, GIF und SVG geregext ausführen?

[Hier stand Quatsch]

Uff. Wie lange kann man auf dem Schlauch stehen. Habe es hinbekommen.

Die zwei MapUrl-Calls können vor den bisherigen zusätzlich eingegittet werden, dann wird der spezielle SVG-Contenttype vorher abgefangen:

        // the following rules provide a search scheme for images. The first
        // rule where a image is found, terminates the search.
        // 1. /themes/<theme>/img/<imgname>.<ext>
        // 2. /img/<imgname>.<ext>
        // deprecated: 3. <imgname>.<ext> (builtin images)
        // inserted by 'tadi' -- verified with above, but not counterchecked yet!
        MapUrl(app,
               "^/themes/([^/]*)/img.*/(.+)\\.svg",
               "content",
               GetResourcePath(),
               "/themes/$1/img/$2.svg",
               "image/svg+xml");

        MapUrl(app,
               "^/themes/([^/]*)/img.*/(.+)\\.svg",
               "content",
               GetResourcePath(),
               "/img/$2.svg",
               "image/svg+xml");

Kleine Preview.

Ist noch einiges an Detailarbeit nötig, da es leider keine gemeinsame Klasse für die ganzen Icons gibt und man sich über die divs runterhangeln muss.

Auf den Screenshots sieht man mal 20px statt den 16 wie bisher.

IMHO sowohl am Desktop als auch mobil ein Usability-Zugewinn.

> Und wenn du die alten Namen der Images (so wie im Code "hart" definiert) beibehältst, und die neuen Images umbenennst und in ein neues theme packst?

Weiß nicht, ob sich nicht der ein oder andere Browser verschluckt, wenn bei .png eine SVG-Datei kommt.

Edit: gerade getestet, Firefox mag das nicht und zeigt den Fehlerplatzhalter an.

Wäre auch etwas unsauber. Davon ab könnte man die bestehenden Bitmaps auch verlustfrei in SVG einbetten.

Zudem besteht evtl. noch die Möglichkeit, dass die Originalicons noch als Vektordateien vorliegen (Anfrage läuft).

Problem ist auch gar nicht mal sehr das Umbennen der Dateiendungen im Quelltext, sonder die fehlenden width und/oder height-Angaben.

Bei den Bitmaps konnte sich darauf verlassen, dass da immer 16x16px kommen (oder auch nicht, wie bei den letztens eingeführten HD-Icons).

Bei SVGs müssen aber Angaben zur Skalierung vorliegen, sonst erhält man mitunter bildschirmfüllende Icons.

Das kann man aber gut über CSS lösen und dann auch später nach persönlichem Gusto dort anpassen.

Ist das hier mit data-src statt src eigentlich Absicht?

<img data-src="img/transparent.png" height="10px" />

Firefox mosert da bei mir auch mit Fehler-Platzhalter.

Nov 25 18:19:38 user.err        VDR-2204        vdr: [9516] live: DH: ------ RecordingsTree::RecordingsTree() --------, required time:   0,06098
Nov 25 18:19:38 user.err        VDR-2204        vdr: [9516] live: timeMd5Hash num =  2063, time =   0,00227, average 0,000001, max = 0,001706
Nov 25 18:19:38 user.err        VDR-2204        vdr: [9516] live: timeRecs    num =  2063, time =   0,05886, average 0,000029, max = 0,001799
Nov 25 18:19:38 user.err        VDR-2204        vdr: [9516] live: Identify    num =  2063, time =   0,00054, average 0,000000, max = 0,000015
Nov 25 18:19:43 user.err        VDR-2204        vdr: [9516] live: DH: ------ RecordingsTree::RecordingsTree() --------, required time:   0,05831
Nov 25 18:19:43 user.err        VDR-2204        vdr: [9516] live: timeMd5Hash num =  2062, time =   0,00054, average 0,000000, max = 0,000015
Nov 25 18:19:43 user.err        VDR-2204        vdr: [9516] live: timeRecs    num =  2062, time =   0,05697, average 0,000028, max = 0,000301
Nov 25 18:19:43 user.err        VDR-2204        vdr: [9516] live: Identify    num =  2062, time =   0,00055, average 0,000000, max = 0,000015

MarkusE

kannst du bitte o.g. Meldungen in einen höheren syslog severity level ändern, das sind ja wohl keine Fehler Meldungen, sondern Debug Meldungen.

Quote from MarkusE

Ja, das ist Absicht. Die Bilder werden erst geladen, wenn der Rest fertig ist.

Andererseits: bei den Icons könnte man das natürlich auch anders machen, und die sofort laden.

Ich hatte SVG-bedingt den img in der div eine Breite zugewiesen:

div.epg_content div.epg_tools img {
width: 20px;
}

Dann wird das Teil sichtbar - wenn es nur um den horizontalen 10px-Abstand zum HD-Symbol geht, sollte man bei dem stattdessen ein padding-top reinfrickeln und die transparent.png da komplett rausjäten.

Hi, beim LiveProgramm gibt es den Button "Diesen Kanel im Browser ansehen". Einen äqivalenten Button zur direkt Wiedergabe im Broser gibt es bei den Aufnahmen nicht. Kann man diesen Button bei den Aufnahmen auch einbauen?