Re-enable TV styles

LycheeOrg · Sep 21, 2022 · a6eea57 · a6eea57
1 parent c5b0e01
commit a6eea57
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 124 deletions.
diff --git a/gulpfile.js b/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"

diff --git a/html/frontend.html b/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">

diff --git a/scripts/3rd-party/backend.js b/scripts/3rd-party/backend.js
@@ -328,28 +328,6 @@ const SmartAlbumID = Object.freeze({
  * @property {string} version - actually a number
  */
 
-/**
- * @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.

diff --git a/scripts/main/header.js b/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 {

diff --git a/scripts/main/init.js b/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;

diff --git a/scripts/main/leftMenu.js b/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);

diff --git a/scripts/main/lychee.js b/scripts/main/lychee.js
@@ -230,7 +230,6 @@ const lychee = {
  enable_tabindex: false,
  enable_contextmenu_header: true,
  hide_content_during_imgview: false,
- device_type: "desktop",
 
  checkForUpdates: true,
  /**
@@ -540,23 +539,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;
 };
 
 /**
@@ -1233,16 +1233,6 @@ lychee.loadDropbox = function (callback) {
  }
 };
 
-/**
- * @returns {string}
- */
-lychee.getEventName = function () {
- if (lychee.device_type === "mobile") {
- return "touchend";
- }
- return "click";
-};
-
 /**
  * DON'T USE THIS METHOD.
  *

diff --git a/scripts/main/photo.js b/scripts/main/photo.js
@@ -1102,7 +1102,7 @@ photo.getArchive = function (photoIDs, kind = null) {
  },
  });
 
- $(".downloads .basicModal__button").on(lychee.getEventName(), function () {
+ $(".downloads .basicModal__button").on("click touchend", function () {
  const kind = this.id;
  basicModal.close();
  photo.getArchive(photoIDs, kind);
@@ -1273,7 +1273,7 @@ photo.showDirectLinks = function (photoID) {
  // Ensure that no input line is selected on opening.
  $(".basicModal input:focus").blur();
 
- $(".directLinks .basicModal__button").on(lychee.getEventName(), function () {
+ $(".directLinks .basicModal__button").on("click touchend", function () {
  navigator.clipboard.writeText($(this).prev().val()).then(() => loadingBar.show("success", lychee.locale["URL_COPIED_TO_CLIPBOARD"]));
  });
 };
diff --git a/scripts/main/settings.js b/scripts/main/settings.js
@@ -530,11 +530,11 @@ settings.openTokenDialog = function () {
  const initTokenDialog = function () {
  updateTokenDialog();
 
- $("#button_copy_token").on(lychee.getEventName(), function () {
+ $("#button_copy_token").on("click touchend", function () {
  navigator.clipboard.writeText(token);
  });
 
- $("#button_reset_token").on(lychee.getEventName(), function () {
+ $("#button_reset_token").on("click touchend", function () {
  $("#apiToken").text(lychee.locale["TOKEN_WAIT"]);
  api.post(
  "User::resetToken",
@@ -551,7 +551,7 @@ settings.openTokenDialog = function () {
  );
  });
 
- $("#button_disable_token").on(lychee.getEventName(), function () {
+ $("#button_disable_token").on("click touchend", function () {
  $("#apiToken").text(lychee.locale["TOKEN_WAIT"]);
  api.post("User::unsetToken", {}, function () {
  token = "";

diff --git a/scripts/main/sidebar.js b/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")

diff --git a/styles/devices/TV.scss b/styles/devices/TV.scss
diff --git a/styles/main/_tv.scss b/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;
+ }
+}
diff --git a/styles/main/main.scss b/styles/main/main.scss
@@ -103,3 +103,4 @@ textarea {
 @import "footer";
 @import "social-footer";
 @import "photo-links";
+@import "tv";