Improve support for old browsers (#9515)

* FEATURE: Improve crawler view

* FIX: Make lazyYT crawler-friendly

* DEV: Rename discourse-internet-explorer to discourse-unsupported-browser

* DEV: Detect more unsupported browsers

Follow-up to 4eebbd221239eaa3fc7e6f1bd6a9dcf0239b8444.

* FIX: Hide browser update notice in print view

plugins/discourse-internet-explorer/config/locales/server.en.yml

@@ -1,4 +0,0 @@
-en:
-  site_settings:
-    discourse_internet_explorer_enabled: "Enable temporary Internet Explorer support. This plugin is an effort to maintain compatibility with older browsers and will be completely removed in the near future."
-    discourse_internet_explorer_deprecation_warning: "Show an Internet Explorer deprecation warning"

plugins/discourse-internet-explorer/config/settings.yml

@@ -1,6 +0,0 @@
-plugins:
-  discourse_internet_explorer_enabled:
-    default: true
-  discourse_internet_explorer_deprecation_warning:
-    default: true
-    client: true

plugins/discourse-unsupported-browser/assets/javascripts/initializers/discourse-unsupported-browser.js.es6

@@ -2,12 +2,12 @@ import { withPluginApi } from "discourse/lib/plugin-api";
 
 function initializeInternetExplorerDeprecation(api) {
   const siteSettings = api.container.lookup("site-settings:main");
-  if (siteSettings.discourse_internet_explorer_deprecation_warning) {
+  if (siteSettings.browser_deprecation_warning) {
     const { isIE11 } = api.container.lookup("capabilities:main");
     if (isIE11) {
       api.addGlobalNotice(
-        I18n.t("discourse_internet_explorer.deprecation_warning"),
-        "deprecate-internet-explorer",
+        I18n.t("discourse_unsupported_browser.deprecation_warning"),
+        "browser-deprecation-warning",
         { dismissable: true, dismissDuration: moment.duration(1, "week") }
       );
     }
@@ -15,7 +15,7 @@ function initializeInternetExplorerDeprecation(api) {
 }
 
 export default {
-  name: "discourse-internet-explorer",
+  name: "discourse-unsupported-browser",
 
   initialize() {
     withPluginApi("0.8.37", initializeInternetExplorerDeprecation);

plugins/discourse-unsupported-browser/config/locales/client.en.yml

@@ -1,4 +1,4 @@
 en:
   js:
-    discourse_internet_explorer:
+    discourse_unsupported_browser:
       deprecation_warning: This site will soon remove support for Internet Explorer 11 - please update your browser

plugins/discourse-unsupported-browser/config/locales/server.en.yml

@@ -0,0 +1,4 @@
+en:
+  site_settings:
+    discourse_unsupported_browser_enabled: "Enable temporary support for old browsers. This plugin is an effort to maintain compatibility with older browsers and will be completely removed in the near future."
+    browser_deprecation_warning: "Show a warning to deprecated browsers"

plugins/discourse-unsupported-browser/config/settings.yml

@@ -0,0 +1,6 @@
+plugins:
+  discourse_unsupported_browser_enabled:
+    default: true
+  browser_deprecation_warning:
+    default: true
+    client: true

plugins/discourse-unsupported-browser/plugin.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
-# name: discourse-internet-explorer
-# about: Attempts to provide backward support for internt explorer
+# name: discourse-unsupported-browser
+# about: Attempts to provide support for old and unsupported browser through polyfills
 # version: 1.0
 # authors: Joffrey Jaffeux, David Taylor, Daniel Waterworth, Robin Ward
-# url: https://github.com/discourse/discourse/tree/master/plugins/discourse-internet-explorer
+# url: https://github.com/discourse/discourse/tree/master/plugins/discourse-unsupported-browser
 
-enabled_site_setting :discourse_internet_explorer_enabled
+enabled_site_setting :discourse_unsupported_browser_enabled
 hide_plugin if self.respond_to?(:hide_plugin)
 
 register_asset 'stylesheets/ie.scss'
@@ -15,8 +15,8 @@ register_asset 'stylesheets/ie.scss'
 # been activated so it can be uploaded to CDNs.
 DiscourseEvent.on(:after_plugin_activation) do ||
   polyfill_path = "#{Plugin::Instance.js_path}/#{self.directory_name}-optional.js"
-  FileUtils.cp("#{Rails.root}/public/plugins/discourse-internet-explorer/js/ie.js", polyfill_path)
-  Rails.configuration.assets.precompile << "plugins/discourse-internet-explorer-optional.js"
+  FileUtils.cp("#{Rails.root}/public/plugins/discourse-unsupported-browser/js/ie.js", polyfill_path)
+  Rails.configuration.assets.precompile << "plugins/discourse-unsupported-browser-optional.js"
 end
 
 after_initialize do
@@ -42,7 +42,7 @@ after_initialize do
   # to be loaded before other files
   register_html_builder('server:before-script-load') do |controller|
     if BrowserDetection.browser(controller.request.env['HTTP_USER_AGENT']) == :ie
-      path = controller.helpers.script_asset_path('plugins/discourse-internet-explorer-optional')
+      path = controller.helpers.script_asset_path('plugins/discourse-unsupported-browser-optional')
 
       <<~JAVASCRIPT
         <script src="#{path}"></script>

plugins/discourse-unsupported-browser/spec/requests/bootstrap_request_spec.rb

@@ -7,31 +7,31 @@ describe 'Bootstrapping the Discourse App' do
 
   context "when disabled" do
     before do
-      SiteSetting.discourse_internet_explorer_enabled = false
+      SiteSetting.discourse_unsupported_browser_enabled = false
     end
 
     it "does not include the IE stylesheet or Javascript" do
       get "/categories", headers: { "HTTP_USER_AGENT" => ie_agent }
-      expect(response.body).not_to match(/discourse-internet-explorer-optional.js/)
-      expect(response.body).not_to match(/stylesheets\/discourse-internet-explorer/)
+      expect(response.body).not_to match(/discourse-unsupported-browser-optional.js/)
+      expect(response.body).not_to match(/stylesheets\/discourse-unsupported-browser/)
     end
   end
 
   context "when enabled" do
     before do
-      SiteSetting.discourse_internet_explorer_enabled = true
+      SiteSetting.discourse_unsupported_browser_enabled = true
     end
 
     it "includes the IE js and css" do
       get "/categories", headers: { "HTTP_USER_AGENT" => ie_agent }
-      expect(response.body).to match(/discourse-internet-explorer-optional.js/)
-      expect(response.body).to match(/stylesheets\/discourse-internet-explorer/)
+      expect(response.body).to match(/discourse-unsupported-browser-optional.js/)
+      expect(response.body).to match(/stylesheets\/discourse-unsupported-browser/)
     end
 
     it "doesn't include IE stuff for non-IE browsers" do
       get "/categories", headers: { "HTTP_USER_AGENT" => "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36" }
-      expect(response.body).not_to match(/discourse-internet-explorer-optional.js/)
-      expect(response.body).not_to match(/stylesheets\/discourse-internet-explorer/)
+      expect(response.body).not_to match(/discourse-unsupported-browser-optional.js/)
+      expect(response.body).not_to match(/stylesheets\/discourse-unsupported-browser/)
     end
   end
 end

plugins/lazy-yt/plugin.rb

@@ -27,7 +27,19 @@ class Onebox::Engine::YoutubeOnebox
 
       # Put in the LazyYT div instead of the iframe
       escaped_title = ERB::Util.html_escape(video_title)
-      "<div class=\"lazyYT\" data-youtube-id=\"#{video_id}\" data-youtube-title=\"#{escaped_title}\" data-width=\"#{video_width}\" data-height=\"#{video_height}\" data-parameters=\"#{embed_params}\"></div>"
+
+      <<~EOF
+      <div class="lazyYT"
+           data-youtube-id="#{video_id}"
+           data-youtube-title="#{escaped_title}"
+           data-width="#{video_width}"
+           data-height="#{video_height}"
+           data-parameters="#{embed_params}">
+        <a href="https://www.youtube.com/watch?v=#{video_id}" target="_blank">
+          <img src="https://img.youtube.com/vi/#{video_id}/hqdefault.jpg" width="#{video_width}" height="#{video_height}" title="#{escaped_title}">
+        </a>
+      </div>
+      EOF
     else
       yt_onebox_to_html
     end