diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index bccb3822..02e28df1 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -1293,12 +1293,21 @@ function play(tid, is_ev, seek, call_depth) { var url = mp.tracks[tid]; if (need_ogv_for(url)) { + var m = /.* Version\/([0-9]+)\.[0-9\.]+ Mobile\/[^ ]+ Safari\/[0-9\.]+$/.exec(navigator.userAgent), + safari = m ? parseInt(m[1]) : 99; + if (mp.au_ogvjs) { mp.au = mp.au_ogvjs; } else if (window['OGVPlayer']) { mp.loading = true; - mp.au = mp.au_ogvjs = new OGVPlayer(); + try { + mp.au = mp.au_ogvjs = new OGVPlayer(); + } + catch (ex) { + return toast.err(30, 'your browser cannot play ogg/vorbis/opus\n\n' + ex + + '\n\nclick here for a full crash report'); + } attempt_play = is_ev; mp.au.onerror = evau_error; mp.au.onprogress = pbar.drawpos; @@ -1308,6 +1317,9 @@ function play(tid, is_ev, seek, call_depth) { }; widget.open(); } + else if (safari < 14) { + return toast.err(0, 'because this is an apple device,\nsafari 14 or newer is required to play ogg/vorbis/opus files\n\nyou are using safari ' + safari + '\n(every iOS browser is actually safari)'); + } else { if (call_depth !== undefined) return toast.err(0, 'failed to load ogv.js:\ncannot play ogg/opus in this browser\n(try a non-apple device)'); @@ -1317,10 +1329,6 @@ function play(tid, is_ev, seek, call_depth) { import_js('/.cpr/deps/ogv.js', function () { toast.hide(); play(tid, false, seek, 1); - - var m = /.* Version\/([0-9]+)\.[0-9\.]+ Mobile\/[^ ]+ Safari\/[0-9\.]+$/.exec(navigator.userAgent); - if (m && parseInt(m[1]) < 14) - toast.err(0, 'because this is an apple device,\nsafari 14 or newer is required\n\nyou are using safari version ' + m[1] + ', so playback of ogg/vorbis/opus files will be buggy\n\nnote: every iOS browser is safari'); }); return; diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css index 4c7aca08..0e877bbc 100644 --- a/copyparty/web/ui.css +++ b/copyparty/web/ui.css @@ -26,7 +26,9 @@ html { right: -1em; line-height: 1.5em; padding: 1em 1.3em; + margin-left: 3em; border-width: .4em 0; + overflow-wrap: break-word; transform: translateX(100%); transition: transform .4s cubic-bezier(.2, 1.2, .5, 1), @@ -34,7 +36,14 @@ html { text-shadow: 1px 1px 0 #000; color: #fff; } -#toastc { +#toast a { + color: inherit; + text-shadow: inherit; + background: rgba(0, 0, 0, 0.4); + border-radius: .3em; + padding: .2em .3em; +} +#toast a#toastc { display: inline-block; position: absolute; overflow: hidden;