From 99c09a102650d02c26489f45c733c06b5424ee0e Mon Sep 17 00:00:00 2001 From: bp2008 Date: Fri, 7 Apr 2023 11:07:10 -0600 Subject: [PATCH] Version 232: * HTML5 video player errors now include a link to a help dialog that suggests the user try a different H.264 player. * This should help reduce support requests due to the recent iOS change that broke the HTML5 H.264 player on iOS. * Toast messages no longer overlap the top bar. * Toast messages now appear below dialog boxes in the z-index order, but only after UI3 is finished loading so as to keep them above the loading overlay. --- ui3.htm | 5 +++-- ui3/ui3.css | 50 +++++++++++++++++++++++++++++++++++--------- ui3/ui3.js | 60 +++++++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 94 insertions(+), 21 deletions(-) diff --git a/ui3.htm b/ui3.htm index 91c4e8e..6228602 100644 --- a/ui3.htm +++ b/ui3.htm @@ -88,7 +88,7 @@ }; - +
@@ -491,6 +491,7 @@
+
diff --git a/ui3/ui3.css b/ui3/ui3.css index 4e5f649..82cf2fb 100644 --- a/ui3/ui3.css +++ b/ui3/ui3.css @@ -3211,32 +3211,61 @@ div.invisibleLabel left: 0px; } /* Toasts */ -#toast-container +#toast-wrapper { - font-size: 16px; + position: fixed; + max-height: calc(100vh - 64px - 64px); bottom: 64px; + overflow: hidden; + display: flex; + flex-direction: column-reverse; + right: 12px; + z-index: 999; +} + +.uiIsLoading #toast-wrapper +{ + z-index: 999999; } -.sizeMedium #toast-container +.sizeMedium #toast-wrapper { + max-height: calc(100vh - 52px - 48px); bottom: 48px; } -.sizeSmall #toast-container +.sizeSmall #toast-wrapper { + max-height: calc(100vh - 40px - 36px); bottom: 36px; } -#toast-container > .toast-warning > div, -#toast-container > .toast-warning a +#toast-container { - color: #000000; + position: static; + font-size: 16px; + z-index: 0; } -#toast-container > .toast-warning + #toast-container > .toast-warning > div, + #toast-container > .toast-warning a + { + color: #000000; + } + + #toast-container > .toast-warning + { + background-color: #E0E000; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXElEQVRIx+WVoU7DUBSG/y+ZqEBMTFRMTCAgQUwgKhA8AAKJIMHsERATEyQ8AWoCMYFA8ACTExWTiIqJiQkEAjFRMTFxMYfkUrq2GW1CwkmuuOfk/n/P+c85lf6VAaeSLpskiIGlpKAJ8CtJzs6wbvwAeAPmwAuQSgrrJLgDtsCJpBBYA5O6wHvABrj3yjWQ5ICojto/A4ussMAMmP8W/8xEPc+JHVlm1/uCt4BX4NG7T6z2HctiBLxLOtinNAN73PbcX23a80gTX5+q1gY+rPd90tQIOp4vAjYeaaWvHwNxjn9lBFn/EzCtCh4BW0n9nNjSYll/F0izGe8SNvGEzWvZeEdslKPZDxsC64I1EBbUOgBWwLhsYm8LhE9tgg+LFmLuhANTW8WtkoWXAt0CDWdA8g3HY74o26oVhqpvjTCUJCz1haTAOfdQ07/jRlLonDuWieKaOJVn40/bJ5sEYUYnrJHQAAAAAElFTkSuQmCC) !important + } + +.videoPlayerTroubleshootLink { - background-color: #E0E000; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXElEQVRIx+WVoU7DUBSG/y+ZqEBMTFRMTCAgQUwgKhA8AAKJIMHsERATEyQ8AWoCMYFA8ACTExWTiIqJiQkEAjFRMTFxMYfkUrq2GW1CwkmuuOfk/n/P+c85lf6VAaeSLpskiIGlpKAJ8CtJzs6wbvwAeAPmwAuQSgrrJLgDtsCJpBBYA5O6wHvABrj3yjWQ5ICojto/A4ussMAMmP8W/8xEPc+JHVlm1/uCt4BX4NG7T6z2HctiBLxLOtinNAN73PbcX23a80gTX5+q1gY+rPd90tQIOp4vAjYeaaWvHwNxjn9lBFn/EzCtCh4BW0n9nNjSYll/F0izGe8SNvGEzWvZeEdslKPZDxsC64I1EBbUOgBWwLhsYm8LhE9tgg+LFmLuhANTW8WtkoWXAt0CDWdA8g3HY74o26oVhqpvjTCUJCz1haTAOfdQ07/jRlLonDuWieKaOJVn40/bJ5sEYUYnrJHQAAAAAElFTkSuQmCC) !important + font-weight: bold; + font-size: 1.2em; + display: block; + padding-top: 0.5em; + padding-bottom: 0.5em; } /* camimg */ #camimg_wrapper @@ -5779,6 +5808,7 @@ div::-webkit-scrollbar-corner font-size: 20px; padding: 2px 4px; flex: 1 1 auto; + width: 100%; } .uiSettingsButtonBar input[type="button"] diff --git a/ui3/ui3.js b/ui3/ui3.js index 1ba123c..72bf849 100644 --- a/ui3/ui3.js +++ b/ui3/ui3.js @@ -1063,6 +1063,14 @@ var defaultSettings = , preconditionFunc: Precondition_ui3_h264_choice , category: "Video Player" } + , { + key: "ui3_h264_choice_requires_restart" + , value: "" + , inputType: "comment" + , comment: '
Click to apply H.264 Player change
' + , preconditionFunc: Precondition_ui3_h264_choice_requires_restart + , category: "Video Player" + } , { key: "ui3_comment_current_h264_player" , value: "" @@ -1174,7 +1182,7 @@ var defaultSettings = , value: "1" , inputType: "checkbox" , label: 'Picture-in-Picture Button' - , hint: 'Requires a supported browser and H.264 player: HTML5.' + , hint: 'Requires a supported browser and only works with the HTML5 player.' // Do not include "H.264 player" text, for filtering reasons , onChange: OnChange_ui3_show_picture_in_picture_button , category: "Video Player" } @@ -17559,7 +17567,10 @@ function HTML5_MSE_Player(frameRendered, PlaybackReachedNaturalEndCB, playerErro if (player.error.message.indexOf("DEMUXER_ERROR_COULD_NOT_OPEN: MediaSource endOfStream before demuxer initialization completes") === 0) return; // Happens sometimes if the video stream ends very quickly. Some clips may do this if you seek to the very end while they are playing. if (!inputRequiredOverlay.IsActive()) - playerErrorHandler(player.error.message + ": " + GetMediaErrorMessage(player.error.code)); + { + var clickForHelp = '

Click for Help'; + playerErrorHandler(htmlEncode(player.error.message) + ": " + GetMediaErrorMessage(player.error.code) + clickForHelp); + } } var onPlayerPaused = function (e) { @@ -27040,7 +27051,8 @@ function Toaster() "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", - "hideMethod": "fadeOut" + "hideMethod": "fadeOut", + "target": "#toast-wrapper" } var showToastInternal = function (type, message, showTime, closeButton, onClick, extendedTimeOut) { @@ -27670,6 +27682,7 @@ function LoadingHelper() loadingFinished = true; loadingFinishedAtServerTime = GetUtcNow(); $("#loadingmsgwrapper").remove(); + $("body").removeClass("uiIsLoading"); resized(); videoPlayer.Initialize(); ShowIEWarning(); @@ -29831,13 +29844,16 @@ function UISettingsPanel() } } - this.open = function () + this.open = function (initialFilterText) { Initialize(); CloseDialog(); - filterText = ""; + if (isNullOrWhitespace(initialFilterText)) + initialFilterText = ""; + filterText = initialFilterText; $dlg = $('
'); $dlg.append(MakeButtonBar()); + $dlg.find("#uiSettingsFilterInput").val(filterText); $content = $('
'); $dlg.append($content); modal_dialog = $dlg.dialog({ @@ -30312,6 +30328,8 @@ function UISettingsPanel() return true; if (filterFind(s.hint, query)) return true; + if (s.inputType === "comment" && filterFind(s.comment, query)) + return true; return false; } var filterFind = function (field, query) @@ -30328,7 +30346,7 @@ function UISettingsPanel() var MakeButtonBar = function () { var $buttonBar = $('
'); - var $filterInput = $(''); + var $filterInput = $(''); $filterInput.on('input', function (e) { filterText = $filterInput.val(); @@ -30518,6 +30536,10 @@ function Precondition_ui3_h264_choice() { return any_h264_playback_supported; } +function Precondition_ui3_h264_choice_requires_restart() +{ + return Precondition_ui3_h264_choice() && ui3_reload_to_take_effect_toast; +} function Precondition_ui3_edge_fetch_bug_h264_enable() { return fetch_streams_cant_close_bug; @@ -31116,6 +31138,9 @@ function UIHelpTool() case "UI Status Sounds": UI3_UI_Status_Sounds(); break; + case "Video Player Error": + UI3_Video_Player_Error(); + break; } } var Context_Menu_Trigger = function () @@ -31188,15 +31213,15 @@ function UIHelpTool() $('
' + 'UI3 has several H.264 player options. Not all options are available in all browsers.' + '

Automatic (Preferred)

' - + '    When "Automatic" is selected, UI3 will always load the best player available. It is recommended to stay on "Automatic" unless it causes problems.' + + '    When "Automatic" is selected, UI3 will choose which player to load. It is recommended to stay on "Automatic" unless it causes problems.' + '

WebCodecs - ' + (webcodecs_h264_player_supported ? 'Available' : 'Not Available') + '

' - + '    The WebCodecs player directly accesses the browser\'s built-in video codecs to efficiently decode video with the lowest possible latency. WebCodecs is a new feature in browsers as of late 2021, and may not perform as well as HTML5.' + + '    The WebCodecs player directly accesses the browser\'s built-in video codecs to efficiently decode video with the lowest possible latency. WebCodecs is available in Chromium-based browsers since late 2021, and is only avalable on pages loaded via HTTPS.' + '

JavaScript - ' + (h264_js_player_supported ? 'Available' : 'Not Available') + '

' + '    The JavaScript player is the most robust and compatible player option, but also the slowest.' + '

HTML5 - ' + (mse_mp4_h264_supported ? 'Available' : 'Not Available') + '

' + '    The HTML5 player works by converting each frame into a fragmented MP4 which is played using Media Source Extensions. This is usually the fastest option, but has compatibility problems with some browsers.' + '

NaCl - ' + (pnacl_player_supported ? 'Available' : 'Not Available') + '

' - + '    The NaCl player is much faster than the JavaScript player. It is not quite as fast as the HTML5 player, and takes longer to load when you open UI3, but it is more stable. This player is only available in ChromeOS and in the Chrome browser on a desktop OS (such as Windows or Mac). It uses Google\'s "NaCl" or "Native Client" technology, which was expected to be removed from Chrome in 2018 but remained available by entering chrome://flags in the address bar and enabling Native Client.' + + '    The NaCl player is faster than the JavaScript player. It is not quite as fast as the HTML5 player, and takes longer to load when you open UI3, but may be more stable. This player is only available in ChromeOS and in the Chrome browser on a desktop OS (such as Windows or Mac). It uses Google\'s "NaCl" or "Native Client" technology, which was expected to be removed from Chrome in 2018 but remained available by entering chrome://flags in the address bar and enabling Native Client.' + (pnacl_player_supported ? ('

The NaCl player has 3 modes available, each with different behavior regarding Hardware Accelerated Video Decoding.
' + '