[[Vorlage(Archiviert)]]

{{{#!vorlage Wissen
[:Editor: Einen Editor öffnen]
[:Menüeditor: Programme zum Menü hinzufügen]
}}}
[[Inhaltsverzeichnis(1)]]

[[Bild(zattoo_logo_normal.png, 130, align=left)]] Der [http://zattoo.com/ Zattoo Web Player] {en} soll in diesem Artikel für die Desktop-Nutzung optimiert werden. Da Zattoo auf [:Archiv/Adobe_Flash:Flash] basiert, ist dieses zwingende Voraussetzung für die Nutzung in Kombination mit einem Webbrowser.

= Mit Prism =
{{{#!vorlage Hinweis
[:Archiv/Prism:Mozilla Prism] befindet sich nicht mehr in den offiziellen Paketquellen. Daher ist die unter [#Chromium Chromium] beschriebene Vorgehensweise derzeit der einzige Weg, Zattoo in einem Browser zu nutzen.
}}}
== Installation von Prism ==
[[Bild(Prism.png, 200 right)]] 
Zuerst muss [:Archiv/Prism:] wie im dazugehörigen Artikel beschrieben installiert werden. Nun erstellt man über ''"Internet -> Prism"'' die Zattoo-Webanwendung. Hier müssen folgende Zeilen eingetragen werden:

Unter ''"Web Application"'': 

URL: 
{{{#!code
http://zattoo.com/view/DasErste
}}}
Name:
{{{#!code
Zattoo
}}}

Unter  ''"Create Shortcuts"'':
Hier sollte die Option ''"Desktop"'' aktiviert werden.

== Optimierung ==
Um nun die Darstellung von möglicherweise störenden Elementen zu säubern, haben die User [user:Roughtrade:] und [user:Linux-Fan:] Skripte erstellt. 

{{{#!vorlage Hinweis
Entwicklung, Instandhaltung und Bandbreite einer Webapplikation verursachen Kosten. Diese gedenkt Zattoo durch Werbeeinblendungen zu erwirtschaften. Wenn dem Benutzer etwas an der Fortführung des Services liegt, sollte in Erwägung gezogen werden, diese Bemühungen nicht zu behindern.

Deshalb blenden die folgenden "Optimierungen" das Werbefenster im Gegensatz zu vorhergehenden Versionen nicht mehr aus. Sollte dies auch in Anbetracht obiger Argumente dennoch gewünscht sein, so muss in der Zeile, die auf "@-moz-document url-prefix("http://zattoo.com/") {" folgt, in der durch Kommata getrennten Aufzählung "#tv-frame-ad-iframe" ergänzt werden.
}}}

===Variante 1 ===
Mit feststehender Seitenleiste, aber ohne ChannelsHeader. Man erstellt mit einem Editor die Datei '''~/.webapps/zattoo.tv@prism.app/webapp.css''' und fügt Folgendes ein[1]:

{{{#!code css
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("zattoo.com") {
#landing-video-content, #landing-ad-blocking-div, #companion {
 display: none !important;
}
#channels {
 height: 100% !important;
}
#mosaic-wrap {
 top: 0 !important;
}
}

@-moz-document url-prefix("http://zattoo.com/") {
#headerpane, #companion, #sidebaradpane, #channels-header, #title {
 display: none !important;
}

#zingspane {
 padding-top: -30px !important;
 margin-top: -30px !important;
 height: 100% !important;
}

#bodypane {
 top: 0 !important;
}

#body, #wrapper {
 top: 0 !important;
}

#mainpane {
 left: 300px !important;
}

.promo {
 display: none !important;
}
}}}

[[Vorlage(Bildersammlung, 200
zattoo_normal.png, "Vorher"
zattoo_optimiert.png, "Nachher"
)]]

===Variante 2 ===
Mit flexibler Kopfleiste und Seitenleiste sowie ChannelsHeader. Man erstellt mit einem Editor die Datei '''~/.webapps/zattoo.tv@prism.app/webapp.css''' und fügt Folgendes ein[1]:

{{{#!code css
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("zattoo.com") {
#landing-video-content, #landing-ad-blocking-div {
 display: none !important;
}
#mosaic-wrap {
 top: 0 !important;
}
}

@-moz-document url-prefix("http://zattoo.com/") {
#companion, #title, #sidebaradpane, #channels-header {
 display: none !important;
}
#body, #wrapper {
 top: 0 !important;
}
#headerpane {
 z-index: 2 !important;
 position: absolute !important;
 width: 100% !important;
 background: #000 !important;
 top: -47px !important;
}
#headerpane:hover {
 top: 0 !important;
}
#channels {
 height: 100% !important;
}
#zingspane {
 z-index: 1 !important;
 left: -296px !important;
 background: #000 !important;
}
#zingspane:hover {
 left: 0 !important;
}
#controlpane {
 z-index: 99 !important;
 height: 90% !important;
 border-right: 8px solid #222 !important;
 -moz-border-radius-topright: 3px;
 -moz-border-radius-bottomright: 3px;
 border-top-right-radius: 3px;
 border-bottom-right-radius: 3px;
 left: -305px !important;
 background: #000 !important;
 }
#controlpane:hover {
 left: 0 !important;
 }
#mainpane {
 left: 0 !important;
 z-index: 0 !important;
}
.promo {
 display: none !important;
}
}
}}}

=== Variante 3 ===
Mit einblendbarer Senderwahl, ansonsten reduziert auf das wesentliche (gültig ab Zattoo Layout vom 10.12.2012). Man erstellt mit einem Editor die Datei '''~/.webapps/zattoo.tv@prism.app/webapp.css''' und fügt Folgendes ein[1]:

{{{#!code css
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://zattoo.com/") {
	#header {
	top: 0 !important;
	height: 0 !important;
	}
	#headerpane {
	background: none !important;
	background-image: none !important;
	height: 22px !important;
	}
	#tabs #list_tabs {
	display: none !important;
	}
	#logo, #auxlinks span.tab,
	.listheader, .zapper_promo {
	display: none !important;
	}
	#identity, #main_tabs, #main_tabs li, #header a {
	color: #555 !important;
	}
	#main_tabs, #main_tabs li {
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	top: 2px !important;
	}
	#main_tabs li a[href*="subscribe"] {
	display: none !important;
	}
	#controlpane {
	z-index: 99 !important;
	height: 100% !important;
	border-right: 8px solid #222 !important;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	left: -305px !important;
	background: #000 !important;
	}
	#controlpane:hover {
	left: 0 !important;
	}
	#zingspane, .scrollwrap.llContainer {
	top: 0 !important;
	height: 100% !important;
	}
	
	#sidebaradpane, #social {
	display: none !important;
	}
	#mainpane, #mainpane {
	z-index: 1 !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	}
}
}}}

[[Vorlage(Bildersammlung, 150
zattoo_vollbild_sidebar_aus.png "Vollbild ohne Kopf- und Seitenleiste"
zattoo_vollbild_sidebar_an.png "Vollbild mit Seitenleiste"
zattoo_vollbilld_headerbar_an.png "Vollbild mit Kopfleiste"
)]]

== Menüeintrag ==
Zur "Perfektion" kann man nun noch einen Menüeintrag erstellen[3]. 

=== Icon herunterladen ===
Das dafür nötige Icon [[Bild(zattoo.png, 30)]] kann in den Ordner '''/usr/share/pixmaps''' heruntergeladen werden.

=== Eintrag in das Feld "Befehl:" ===

Befehl: 
{{{#!code
"prism" -override "~/.webapps/zattoo@prism.app/override.ini" -webapp zattoo@prism.app
}}}

= Mit Chromium =
Mit [:Chromium:] kann man auf sehr einfache Weise einen Webplayer für Zattoo realisieren. Zuerst installiert man die Erweiterung [https://chrome.google.com/webstore/detail/auto-login/oeoibdmcpaofjgcdncagknlmlmngkgfm Auto Login] {en}. Dann ruft man einmal [http://zattoo.com/ zattoo.com] {en} auf, speichert das Passwort und erlaubt die automatische Anmeldung auf der Webseite.

Dann erstellt man mit einem Editor die Datei '''~/.local/share/applications/Zattoo.desktop''' im [:Homeverzeichnis:]. Der Pfad zur Symbol- bzw. Bilddatei muss noch angepasst werden [2].

{{{#!code
[Desktop Entry]
Type=Application
Name=Zattoo Webplayer
Comment=Zattoo with Chromium
Exec=/usr/bin/chromium-browser --app=http://zattoo.com/#preview
Icon=/PFAD/ZU/Zattoo.png
NoDisplay=false
Path[$e]=
StartupNotify=true
Terminal=false
TerminalOptions=
Categories=AudioVideo;
}}}
Nun sollte bei Ubuntu-Varianten mit einem Anwendungsmenü unter ''"Multimedia -> Zattoo Webplayer"'' ein neuer Eintrag zu finden sein, über den man Zattoo bequem mit Chromium aufrufen kann (getestet unter Ubuntu 12.10).

= Links =
 * [wikipedia:Zattoo:] - Wikipedia
 * [:Internet-TV:] {Übersicht} Übersichtsartikel

# tag: Internet, TV