Merge pull request #10373 from DestinyItemManager/samsung-dark

Samsung Internet Dark Mode

config/i18n.json

@@ -42,7 +42,8 @@
  },
  "Browsercheck": {
  "Unsupported": "The DIM team does not support using this browser. Some or all DIM features may not work.",
- "Steam": "It looks like this page is loaded in Steam's browser. Due to its limited features and resources, it may unexpectedly or intermittently fail to run DIM. We cannot provide support for it."
+ "Steam": "The Steam overlay browser is very old and some or all DIM features may not work. We cannot provide support for it.",
+ "Samsung": "Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser."
  },
  "Bucket": {
  "Armor": "Armor",

i18next-scanner.config.cjs

@@ -58,8 +58,7 @@ module.exports = {
  cooldowns: { list: ['Grenade', 'Melee', 'Super'] },
  difficulty: { list: ['Normal', 'Hard'] },
  progress: { list: ['Bounties', 'Items', 'Quests'] },
- sockets: { list: ['Mod', 'Ability', 'Shader', 'Ornament', 'Fragment', 'Aspect', 'Projection', 'Transmat', 'Super'] },
- unsupported: { list: ['Unsupported', 'Steam'] },
+ sockets: { list: ['Mod', 'Ability', 'Shader', 'Ornament', 'Fragment', 'Aspect', 'Projection', 'Transmat', 'Super'] }
  };
  const dimTransformer = (key, options) => {
  if (options.metadata?.context) {

src/browsercheck-utils.js

@@ -33,7 +33,7 @@ export const unsupported = {
 };
 
 export const steamBrowser = {
- en: "It looks like this page is loaded in Steam's browser. Due to its limited features and resources, it may unexpectedly or intermittently fail to run DIM. We cannot provide support for it.",
+ en: 'The Steam overlay browser is very old and some or all DIM features may not work. We cannot provide support for it.',
  de: 'Es sieht so aus, als ob diese Seite im Steam-Browser geladen ist. Aufgrund seiner begrenzten Funktionen und Ressourcen, kann DIM eventuell unerwartet oder zeitweilig nicht laufen. Wir können dafür keinen Support bieten.',
  es: 'Parece ser que esta página está cargada en el navegador de Steam. Debido a sus limitadas caracarísticas y recursos, podría fallar inesperadamente o intermitentemente al ejecutar DIM. No podemos proveer soporte para ello.',
  'es-mx':
@@ -51,3 +51,23 @@ export const steamBrowser = {
  'zh-cht':
  '這個頁面似乎是在Steam的瀏覽器裏打開的。 因為Steam瀏覽器的功能和資源限制，DIM可能會出現問題。 我們無法為此提供支援。',
 };
+
+export const samsungInternet = {
+ en: 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ de: 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ es: 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ 'es-mx':
+ 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ fr: 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ it: 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ ja: 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ ko: 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ pl: 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ 'pt-br':
+ 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ ru: 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ 'zh-chs':
+ 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+ 'zh-cht':
+ 'Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.',
+};

src/browsercheck.js

@@ -1,5 +1,10 @@
 import parser from 'ua-parser-js';
-import { steamBrowser, supportedLanguages, unsupported } from './browsercheck-utils.js';
+import {
+ samsungInternet,
+ steamBrowser,
+ supportedLanguages,
+ unsupported,
+} from './browsercheck-utils.js';
 
 // Adapted from 'is-browser-supported' npm package. Separate from index.js so it'll run even if that fails.
 // This is also intentionally written in es5 and not TypeScript because it should not use any new features.
@@ -53,11 +58,6 @@ function getBrowserVersionFromUserAgent(agent) {
 }
 
 export function isSupported(browsersSupported, userAgent) {
- if (userAgent.includes('Steam')) {
- // https://github.com/DestinyItemManager/DIM/wiki/Figuring-out-why-DIM-doesn't-work-in-Steam
- return false;
- }
-
  if (navigator.standalone) {
  // Assume support if we're installed as an iOS PWA.
  return true;
@@ -110,13 +110,32 @@ export function isSupported(browsersSupported, userAgent) {
 var lang = getUserLocale();
 
 if ($BROWSERS.length && lang) {
- // t(`Browsercheck.${Unsupported}`, { metadata: { keys: 'unsupported' }})
  var supported = isSupported($BROWSERS, navigator.userAgent);
  if (!supported) {
+ // t(`Browsercheck.Unsupported`)
  document.getElementById('browser-warning').innerText = unsupported[lang];
  document.getElementById('browser-warning').style.display = 'block';
- if (navigator.userAgent.includes('Steam')) {
- document.getElementById('browser-warning').innerText = steamBrowser[lang];
- }
+ }
+
+ // Steam is never supported
+ if (navigator.userAgent.includes('Steam')) {
+ // https://guide.dim.gg/Figuring-out-why-DIM-doesn't-work-in-Steam
+ // t(`Browsercheck.Steam`)
+ document.getElementById('browser-warning').innerText = steamBrowser[lang];
+ document.getElementById('browser-warning').style.display = 'block';
+ }
+
+ // Samsung Internet is not supported because of its weird forced dark mode
+ if (
+ navigator.userAgent.includes('SamsungBrowser') &&
+ // When the "Labs" setting to respect websites' dark mode capabilities is
+ // enabled, Samsung Internet will actually set prefers-color-scheme to dark.
+ // Otherwise, it's always "light". This *could* be a user who actually
+ // prefers a light theme - there's no way to tell.
+ window.matchMedia('(prefers-color-scheme: light)').matches
+ ) {
+ // t(`Browsercheck.Samsung`)
+ document.getElementById('browser-warning').innerText = samsungInternet[lang];
+ document.getElementById('browser-warning').style.display = 'block';
  }
 }

src/browsercheck.test.ts

@@ -59,11 +59,12 @@ test.each([
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 Safari/537.36',
  false,
  ],
- [
- 'Steam Overlay',
- 'Mozilla/5.0 (Windows; U; Windows NT 10.0; en-US; Valve Steam GameOverlay/1608507519; ) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36',
- false,
- ],
+ // This isn't actually checked in isSupported anymore, but it's nice to have the example user agent here. It's up to Chrome 85 now though...
+ // [
+ // 'Steam Overlay',
+ // 'Mozilla/5.0 (Windows; U; Windows NT 10.0; en-US; Valve Steam GameOverlay/1608507519; ) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36',
+ // false,
+ // ],
 ])('%s: User agent %s, supported: %s', (_name, userAgent, shouldBeSupported) => {
  expect(isSupported(browsersSupported, userAgent)).toStrictEqual(shouldBeSupported);
 });

src/build-browsercheck-utils.js

@@ -56,6 +56,9 @@ export const unsupported = {
 ${getI18nKey('Browsercheck.Unsupported')}
 
 export const steamBrowser = {
-${getI18nKey('Browsercheck.Steam')}`;
+${getI18nKey('Browsercheck.Steam')}
+
+export const samsungInternet = {
+${getI18nKey('Browsercheck.Samsung')}`;
 
 fs.writeFileSync('src/browsercheck-utils.js', browserCheckUtils);

src/locale/en.json

@@ -40,7 +40,8 @@
  "YourItems": "Your Items"
  },
  "Browsercheck": {
- "Steam": "It looks like this page is loaded in Steam's browser. Due to its limited features and resources, it may unexpectedly or intermittently fail to run DIM. We cannot provide support for it.",
+ "Samsung": "Samsung Internet can make sites look too dark when dark mode is on. Enable Settings > Labs > Use website dark theme or switch to another browser.",
+ "Steam": "The Steam overlay browser is very old and some or all DIM features may not work. We cannot provide support for it.",
  "Unsupported": "The DIM team does not support using this browser. Some or all DIM features may not work."
  },
  "Bucket": {