Re-enable TV styles

gulpfile.js

@@ -156,22 +156,6 @@ gulp.task("landing--styles", function () {
 	);
 });
 
-/* TVCSS -----------------------------------------  */
-
-paths.TVCSS = {
-	src: ["./styles/devices/TV.scss"],
-};
-
-gulp.task("TVCSS--styles", function () {
-	return gulp
-		.src(paths.TVCSS.src)
-		.on("error", catchError)
-		.pipe(plugins.concat("TV.css", { newLine: "\n" }))
-		.pipe(plugins.autoprefixer("last 4 versions", "> 5%"))
-		.pipe(chmod({execute: false}))
-		.pipe(gulp.dest("../dist/"));
-});
-
 /* Images ----------------------------------------- */
 
 paths.images = {
@@ -217,7 +201,6 @@ gulp.task(
 			"frontend--html",
 			"landing--scripts",
 			"landing--styles",
-			"TVCSS--styles",
 			"images--copy",
 			"leafletMarkerclusterMapFile--copy",
 			"leafletMarkerclusterSourceFiles--copy"

html/frontend.html

@@ -5,7 +5,6 @@
 	<title></title>
 	<link type="text/css" rel="stylesheet" href="dist/frontend.css">
 	<link type="text/css" rel="stylesheet" href="dist/user.css">
-	<!-- TODO: Re-enable CSS for TV -->
 	<link rel="shortcut icon" href="favicon.ico">
 	<link rel="apple-touch-icon" href="img/apple-touch-icon-ipad.png" sizes="120x120">
 	<link rel="apple-touch-icon" href="img/apple-touch-icon-iphone.png" sizes="152x152">

scripts/3rd-party/backend.js

@@ -328,28 +328,6 @@ const SmartAlbumID = Object.freeze({
  * @property {string}   version                 - a string of 6 digits without separating dots, i.e. version 4.6.3 is reported as `'040603'`
  */
 
-/**
- * @typedef DeviceConfiguration
- *
- * @property {string}  device_type
- * @property {boolean} header_auto_hide
- * @property {boolean} active_focus_on_page_load
- * @property {boolean} enable_button_visibility
- * @property {boolean} enable_button_share
- * @property {boolean} enable_button_archive
- * @property {boolean} enable_button_move
- * @property {boolean} enable_button_trash
- * @property {boolean} enable_button_fullscreen
- * @property {boolean} enable_button_download
- * @property {boolean} enable_button_add
- * @property {boolean} enable_button_more
- * @property {boolean} enable_button_rotate
- * @property {boolean} enable_close_tab_on_esc
- * @property {boolean} enable_contextmenu_header
- * @property {boolean} hide_content_during_imgview
- * @property {boolean} enable_tabindex
- */
-
 /**
  * The JSON object for incremental reports sent by the
  * back-end within a streamed response.

scripts/main/header.js

@@ -24,7 +24,7 @@ header.dom = function (selector) {
  */
 header.bind = function () {
 	// Event Name
-	let eventName = lychee.getEventName();
+	const eventName = "click touchend";
 
 	header.dom(".header__title").on(eventName, function (e) {
 		if ($(this).hasClass("header__title--editable") === false) return false;
@@ -154,10 +154,7 @@ header.bind = function () {
  * @returns {void}
  */
 header.bind_back = function () {
-	// Event Name
-	const eventName = lychee.getEventName();
-
-	header.dom(".header__title").on(eventName, function () {
+	header.dom(".header__title").on("click touchend", function () {
 		if (lychee.landing_page_enable && visible.albums()) {
 			window.location.href = ".";
 		} else {

scripts/main/init.js

@@ -4,7 +4,7 @@
 
 $(document).ready(function () {
 	// Event Name
-	const eventName = lychee.getEventName();
+	const eventName = "click touchend";
 
 	// Set API error handler
 	api.onError = lychee.handleAPIError;

scripts/main/leftMenu.js

@@ -98,7 +98,7 @@ leftMenu.close = function () {
  */
 leftMenu.bind = function () {
 	// Event Name
-	let eventName = lychee.getEventName();
+	const eventName = "click touchend";
 
 	leftMenu.dom("#button_settings_close").on(eventName, leftMenu.close);
 	leftMenu.dom("#text_settings_close").on(eventName, leftMenu.close);

scripts/main/lychee.js

@@ -238,7 +238,6 @@ const lychee = {
 	enable_tabindex: false,
 	enable_contextmenu_header: true,
 	hide_content_during_imgview: false,
-	device_type: "desktop",
 
 	checkForUpdates: true,
 	/**
@@ -580,23 +579,24 @@ lychee.parsePublicInitializationData = function (data) {
 	lychee.mod_frame_enabled = data.config.mod_frame_enabled === "1";
 	lychee.mod_frame_refresh = Number.parseInt(data.config.mod_frame_refresh, 10) || 30;
 
-	lychee.header_auto_hide = data.config_device.header_auto_hide;
-	lychee.active_focus_on_page_load = data.config_device.active_focus_on_page_load;
-	lychee.enable_button_visibility = data.config_device.enable_button_visibility;
-	lychee.enable_button_share = data.config_device.enable_button_share;
-	lychee.enable_button_archive = data.config_device.enable_button_archive;
-	lychee.enable_button_move = data.config_device.enable_button_move;
-	lychee.enable_button_trash = data.config_device.enable_button_trash;
-	lychee.enable_button_fullscreen = data.config_device.enable_button_fullscreen;
-	lychee.enable_button_download = data.config_device.enable_button_download;
-	lychee.enable_button_add = data.config_device.enable_button_add;
-	lychee.enable_button_more = data.config_device.enable_button_more;
-	lychee.enable_button_rotate = data.config_device.enable_button_rotate;
-	lychee.enable_close_tab_on_esc = data.config_device.enable_close_tab_on_esc;
-	lychee.enable_tabindex = data.config_device.enable_tabindex;
-	lychee.enable_contextmenu_header = data.config_device.enable_contextmenu_header;
-	lychee.hide_content_during_imgview = data.config_device.hide_content_during_imgview;
-	lychee.device_type = data.config_device.device_type || "desktop"; // we set default as Desktop
+	const isTv = window.matchMedia("tv").matches;
+
+	lychee.header_auto_hide = !isTv;
+	lychee.active_focus_on_page_load = isTv;
+	lychee.enable_button_visibility = !isTv;
+	lychee.enable_button_share = !isTv;
+	lychee.enable_button_archive = !isTv;
+	lychee.enable_button_move = !isTv;
+	lychee.enable_button_trash = !isTv;
+	lychee.enable_button_fullscreen = !isTv;
+	lychee.enable_button_download = !isTv;
+	lychee.enable_button_add = !isTv;
+	lychee.enable_button_more = !isTv;
+	lychee.enable_button_rotate = !isTv;
+	lychee.enable_close_tab_on_esc = isTv;
+	lychee.enable_tabindex = isTv;
+	lychee.enable_contextmenu_header = !isTv;
+	lychee.hide_content_during_imgview = isTv;
 };
 
 /**
@@ -1259,16 +1259,6 @@ lychee.loadDropbox = function (callback) {
 	}
 };
 
-/**
- * @returns {string}
- */
-lychee.getEventName = function () {
-	if (lychee.device_type === "mobile") {
-		return "touchend";
-	}
-	return "click";
-};
-
 /**
  * DON'T USE THIS METHOD.
  *

scripts/main/photo.js

@@ -1073,7 +1073,8 @@ photo.getArchive = function (photoIDs, kind = null) {
 			const sv = myPhoto.size_variants[variant];
 			if (sv) {
 				button.title = lychee.locale["DOWNLOAD"];
-				button.addEventListener(lychee.getEventName(), onClickOrTouch);
+				button.addEventListener("click", onClickOrTouch);
+				button.addEventListener("touchend", onClickOrTouch);
 				button.lastElementChild.textContent =
 					lLabel + "(" + sv.width + "×" + sv.height + ", " + lychee.locale.printFilesizeLocalized(sv.filesize) + ")";
 			} else {
@@ -1084,7 +1085,8 @@ photo.getArchive = function (photoIDs, kind = null) {
 		const liveButton = dialog.querySelector('a[data-photo-kind="LIVEPHOTOVIDEO"]');
 		if (myPhoto.live_photo_url !== null) {
 			liveButton.title = lychee.locale["DOWNLOAD"];
-			liveButton.addEventListener(lychee.getEventName(), onClickOrTouch);
+			liveButton.addEventListener("click", onClickOrTouch);
+			liveButton.addEventListener("touchend", onClickOrTouch);
 			liveButton.lastElementChild.textContent = lychee.locale["PHOTO_LIVE_VIDEO"];
 		} else {
 			liveButton.remove();
@@ -1244,7 +1246,8 @@ photo.showDirectLinks = function (photoID) {
 			ev.stopPropagation();
 		};
 		dialog.querySelectorAll("a.button").forEach(function (a) {
-			a.addEventListener(lychee.getEventName(), onClickOrTouch);
+			a.addEventListener("click", onClickOrTouch);
+			a.addEventListener("touchend", onClickOrTouch);
 		});
 	};
 

scripts/main/settings.js

@@ -606,9 +606,12 @@ settings.openTokenDialog = function () {
 
 		updateTokenDialog();
 
-		copyTokenButton.addEventListener(lychee.getEventName(), onCopyToken);
-		resetTokenButton.addEventListener(lychee.getEventName(), onResetToken);
-		disableTokenButton.addEventListener(lychee.getEventName(), onDisableToken);
+		copyTokenButton.addEventListener("click", onCopyToken);
+		copyTokenButton.addEventListener("touchend", onCopyToken);
+		resetTokenButton.addEventListener("click", onResetToken);
+		resetTokenButton.addEventListener("touchend", onResetToken);
+		disableTokenButton.addEventListener("click", onDisableToken);
+		disableTokenButton.addEventListener("touchend", onDisableToken);
 	};
 
 	basicModal.show({

scripts/main/sidebar.js

@@ -33,7 +33,7 @@ sidebar.dom = function (selector) {
  * @returns {void}
  */
 sidebar.bind = function () {
-	const eventName = lychee.getEventName();
+	const eventName = "click touchend";
 
 	sidebar
 		.dom("#edit_title")

styles/main/_tv.scss

@@ -0,0 +1,45 @@
+@media tv {
+	.basicModal__button:focus {
+		background: #2293ec;
+		color: #ffffff;
+		cursor: pointer;
+		outline-style: none;
+	}
+
+	.basicModal__button#basicModal__action:focus {
+		color: #ffffff;
+	}
+
+	.content .photo:focus {
+		outline-style: solid;
+		outline-color: #ffffff;
+		outline-width: 10px;
+	}
+
+	.content .album:focus {
+		outline-width: 0;
+	}
+
+	.header .button:focus {
+		outline-width: 0;
+		background-color: #ffffff;
+	}
+
+	.header__title:focus {
+		outline-width: 0;
+		background-color: #ffffff;
+		color: #000000;
+	}
+
+	.header .button:focus .iconic {
+		fill: #000000;
+	}
+
+	#imageview {
+		background-color: #000000;
+	}
+	#imageview #image,
+	#imageview #livephoto {
+		outline-width: 0;
+	}
+}

styles/main/main.scss

@@ -126,3 +126,4 @@ textarea {
 @import "justified_layout";
 @import "footer";
 @import "social-footer";
+@import "tv";