Merge branch 'master' into stable
This commit is contained in:
commit
3b0db3fafb
@ -24,7 +24,7 @@
|
||||
* Videos should now be scaled correctly when the display is narrower than video's native aspect ratio ([#118](https://github.com/tamius-han/ultrawidify/issues/118))
|
||||
* Edge users using CWS version of the extension get a very aggressive warning when trying to use the extension with Edge
|
||||
* Fullscreen videos on streamable are aligned correctly ([#116](https://github.com/tamius-han/ultrawidify/issues/118)).
|
||||
|
||||
* **[4.5.1.1]** Streamable fix broke old.reddit + RES on embeds from v.redd.it and streamable.com. We're now using an alternative implementation. ([#128](https://github.com/tamius-han/ultrawidify/issues/128))
|
||||
|
||||
### v4.5.0 (Current)
|
||||
|
||||
|
||||
@ -1,38 +1,65 @@
|
||||
<template>
|
||||
<div v-if="uiVisible" class="uw-hover uv-hover-trigger-region">
|
||||
<div class="flex flex-row pad">
|
||||
<div class="flex flex-column flex-center">
|
||||
<div class="text panel">
|
||||
<h1>Microsoft Edge's DRM implementation is too broken for this extension to work on this site</h1>
|
||||
<p><sup>2020-12-22</sup></p>
|
||||
<h1>Your browser is incompatible with this extension on this site</h1>
|
||||
<!-- <p><sup>2020-12-22</sup></p> -->
|
||||
<p>
|
||||
In October 2020, Microsoft Edge received an update that renders video playback completely broken on sites that utilize DRM. This extension relies on the browser implementing functional video playback,
|
||||
which means that this extension currently cannot work in Edge on sites that utilize DRM (and neither can other 21:9 extensions).
|
||||
</p>
|
||||
<p>
|
||||
<b>Using this extension (and its alternatives) on this site may make things worse</b> — even if you only set aspect ratio manually.
|
||||
In October 2020, Microsoft Edge received an update that breaks video playback on sites that utilize DRM in certain cases.
|
||||
As a result of this bug, cropped videos will be displayed incorrectly. This issue cannot be fixed by any extension, and
|
||||
<b>using this extension (and its alternatives) on this site may make things worse</b> — even if you only set aspect ratio manually.
|
||||
</p>
|
||||
<p>
|
||||
I have attempted all possible workarounds and none of them work.
|
||||
</p>
|
||||
<p><small>Yes I do recognize the irony of getting pissed at Microsoft for their bugs while my extension is basically the Skyrim of CWS, but guys at Microsoft are getting paid for working on MS Edge and I'm not getting paid for writing this extension.</small></p>
|
||||
<p>
|
||||
<b>I am not keeping up with Edge updates as I primarily use Firefox and Chrome. If Edge has already fixed their broken video implementation,
|
||||
please open an issue on <a href="https://github.com/tamius-han/ultrawidify/issues" target="_blank">github</a>, <a href="mailto:tamius.han@gmail.com" target="_blank">shoot me an email</a> or
|
||||
<a href="https://www.reddit.com/message/compose?to=xternal7" target="_blank">PM me on reddit</a>. Please include this string in the message:
|
||||
</b>
|
||||
I would like to ask a couple of favours:
|
||||
</p>
|
||||
<p>
|
||||
<i>{{userAgent}}</i>
|
||||
<ul>
|
||||
<li>
|
||||
<b>Report this issue to Microsoft.</b>
|
||||
I have already done so, however such issues get noticed quicker if more people report them.
|
||||
<div class="vspc"></div>
|
||||
I have prepared a description of the problem — you can find it below (you may need to scroll).
|
||||
</li>
|
||||
<li>
|
||||
<b>Please notify me when Microsoft fixes this issue.</b>
|
||||
I use windows only sporadically and cannot check whether Edge developers have fixed the issue or not.
|
||||
You can contact me by opening an issue on <a href="https://github.com/tamius-han/ultrawidify/issues" target="_blank">github</a> or
|
||||
sending me <a href="mailto:tamius.han@gmail.com" target="_blank">an email</a>. You can also <a href="https://www.reddit.com/message/compose?to=xternal7" target="_blank">PM me on reddit</a>.
|
||||
<div class="vspc"></div>
|
||||
Please include the following text with your message:
|
||||
<div class="vspc"></div>
|
||||
<i>{{userAgent}}</i>
|
||||
<div class="vspc"></div>
|
||||
You can determine whether the issue is fixed by attempting to watch 21:9 movie on netflix and compare what you see to the screenshots I included at the bottom.
|
||||
</li>
|
||||
<li>
|
||||
<small>
|
||||
<b>Avoid leaving one-star reviews on Chrome Web Store.</b> I don't usually whine about one star
|
||||
reviews, but Chrome Web Store is for Google Chrome users. As such, I cannot optimize the extension
|
||||
for Edge in my Chrome Web Store submission. Furthermore, people reading reviews in Chrome
|
||||
Web Store are interested in knowing how extension behaves in Google Chrome. The experience you
|
||||
get in Microsoft Edge is irrelevant to them.
|
||||
<div class="vspc"></div>
|
||||
If you wish the best experience, you should install this addon from Edge Addons store (once I make
|
||||
it available on that store again).
|
||||
<div class="vspc"></div>
|
||||
Thanks for being understanding.
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
<b>Your help is much appreciated.</b>
|
||||
<b>Thanks for your help in advance. It's much appreciated.</b>
|
||||
</p>
|
||||
<p> </p>
|
||||
<p>
|
||||
Further reading: <a href="https://stuff.tamius.net/sacred-texts/2020/12/22/ultrawidify-and-edge-2020-edition/" target="_blank">blog post with extra details</a>.
|
||||
If you're interested in more details about why this happens, you can find more details in <a href="https://stuff.tamius.net/sacred-texts/2020/12/22/ultrawidify-and-edge-2020-edition/" target="_blank">this blogpost</a>.
|
||||
</p>
|
||||
<p>
|
||||
I know better than you: <b><a @click="uiVisible=false">hide this popup</a></b>
|
||||
Finished reading? <b><a @click="uiVisible=false">Hide this popup</a></b>.
|
||||
</p>
|
||||
<p>
|
||||
In order to disable this popup forever, open the ultrawidify popup, click on 'site settings' and disable automatic aspect ratio detection for this site.
|
||||
@ -41,8 +68,6 @@
|
||||
<p>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</p>
|
||||
<h3>Help by reporting this issue to Microsoft</h3>
|
||||
<p><b>Go to the settings menu</b> <small>(upper right corner of the window, three dots)</small> <b>→ Help and feedback</b> <small>(second option from the bottom)</small> <b>→ Send feedback.</b> (Alternatively, press Alt + Shift + I)</p>
|
||||
@ -57,11 +82,10 @@
|
||||
<br/>
|
||||
</p>
|
||||
<p>Or something along these lines. Click 'send' when you're done.</p>
|
||||
<p>Maybe if Edge developer team gets enough reports, they'll fix the problem.</p>
|
||||
<p>It's the squeaky wheel that gets the grease: developers tend to prioritize issues that affect more people. The more people report this issue, the more likely it is for developers to notice it.</p>
|
||||
</div>
|
||||
<div class="image-examples panel">
|
||||
<p>Follow-up questions</p>
|
||||
<h3>How can one tell when Edge has fixed their bugs?</h3>
|
||||
<h3>How can one tell when the Edge bug is fixed?</h3>
|
||||
<p>
|
||||
When 21:9 movies on netflix look like this:
|
||||
</p>
|
||||
@ -88,6 +112,7 @@ import { mapState } from 'vuex';
|
||||
import Icon from '../common/components/Icon';
|
||||
import BrowserDetect from '../ext/conf/BrowserDetect';
|
||||
import Settings from '../ext/lib/Settings';
|
||||
import FontLoader from '../ext/lib/uwui/FontLoader';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -99,6 +124,9 @@ export default {
|
||||
userAgent: window.navigator.userAgent
|
||||
};
|
||||
},
|
||||
created() {
|
||||
FontLoader.loadFonts();
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
@ -140,12 +168,24 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import '../res/css/uwui-base.scss';
|
||||
@import '../res/css/colors.scss';
|
||||
@import '../res/css/font/overpass.css';
|
||||
@import '../res/css/font/overpass-mono.css';
|
||||
// @import '../res/css/font/overpass.css';
|
||||
// @import '../res/css/font/overpass-mono.css';
|
||||
@import '../res/css/common.scss';
|
||||
|
||||
.uw-ultrawidify-container-root {
|
||||
font-family: 'Overpass';
|
||||
|
||||
* {
|
||||
font-family: 'Overpass', 'Segoe UI';
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
pointer-events: auto;
|
||||
|
||||
|
||||
.vspc {
|
||||
height: 0.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.uw-hover {
|
||||
position: absolute;
|
||||
@ -153,11 +193,11 @@ export default {
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
color: #fff;
|
||||
color: #ddd;
|
||||
background-color: rgba(84, 8, 8, 0.786);
|
||||
|
||||
pointer-events: auto;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
p, h1, h2, h3 {
|
||||
margin: 0.75em;
|
||||
@ -165,8 +205,26 @@ export default {
|
||||
// display: inline-block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
color: #fa6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block !important;
|
||||
padding: 4px 8px;
|
||||
font-family: 'Overpass Mono', monospace;
|
||||
background-color: rgba(11,11,11,0.75);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
b {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -188,7 +246,7 @@ export default {
|
||||
.text {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
max-width: 666px;
|
||||
max-width: 960px;
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
@ -201,6 +259,29 @@ export default {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
}
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
list-style-position: inside;
|
||||
}
|
||||
ul ul, ol ul {
|
||||
list-style-type: circle;
|
||||
list-style-position: inside;
|
||||
margin-left: 15px;
|
||||
}
|
||||
ol ol, ul ol {
|
||||
list-style-type: lower-latin;
|
||||
list-style-position: inside;
|
||||
margin-left: 15px;
|
||||
}
|
||||
li {
|
||||
margin-top: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.pad {
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import browser from "vuex-webextensions/dist/browser";
|
||||
|
||||
if (process.env.CHANNEL !== 'stable') {
|
||||
console.info('Loaded BrowserDetect');
|
||||
}
|
||||
@ -9,7 +11,9 @@ const BrowserDetect = {
|
||||
edge: process.env.BROWSER === 'edge',
|
||||
processEnvBrowser: process.env.BROWSER,
|
||||
processEnvChannel: process.env.CHANNEL,
|
||||
isEdgeUA: () => /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent)
|
||||
isEdgeUA: () => /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent),
|
||||
getBrowserObj: () => { return process.env.BROWSER === 'firefox' ? browser : chrome; },
|
||||
getURL: (url) => { console.log('getting file:', url); console.log(process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url)); return process.env.BROWSER === 'firefox' ? browser.runtime.getURL(url) : chrome.runtime.getURL(url); },
|
||||
}
|
||||
|
||||
if (process.env.CHANNEL !== 'stable') {
|
||||
|
||||
@ -418,6 +418,24 @@ const ExtensionConfPatch = [
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
forVersion: '4.5.1.1',
|
||||
updateFn: (userOptions, defaultOptions) => {
|
||||
if (!userOptions.sites['streamable.com']) {
|
||||
userOptions.sites['streamable.com'] = {
|
||||
mode: 3,
|
||||
autoar: 3,
|
||||
type: 'official',
|
||||
stretch: -1,
|
||||
videoAlignment: -1,
|
||||
keyboardShortcutsEnabled: 0,
|
||||
css: ".player {text-align: left}"
|
||||
};
|
||||
}
|
||||
if (!userOptions.sites['streamable.com'].css) {
|
||||
userOptions.sites['streamable.com'].css = '.player {text-align: left}'
|
||||
};
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@ -1086,6 +1086,15 @@ var ExtensionConf = {
|
||||
}
|
||||
}
|
||||
},
|
||||
"streamable.com": {
|
||||
mode: 3,
|
||||
autoar: 3,
|
||||
type: 'official',
|
||||
stretch: -1,
|
||||
videoAlignment: -1,
|
||||
keyboardShortcutsEnabled: 0,
|
||||
css: ".player {text-align: left}"
|
||||
},
|
||||
"vimeo.com": {
|
||||
mode: 3,
|
||||
autoar: 3,
|
||||
|
||||
129
src/ext/lib/uwui/FontLoader.js
Normal file
129
src/ext/lib/uwui/FontLoader.js
Normal file
@ -0,0 +1,129 @@
|
||||
import BrowserDetect from '../../conf/BrowserDetect';
|
||||
|
||||
function url(file) {
|
||||
return BrowserDetect.getURL(file);
|
||||
}
|
||||
|
||||
export default class FontLoader {
|
||||
static loadFonts() {
|
||||
const fontsStyleElement = document.createElement('style');
|
||||
fontsStyleElement.type = 'text/css';
|
||||
|
||||
fontsStyleElement.textContent = `
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-thin.woff2')} format('woff2'); /* Super Modern Browsers */
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-thin-italic.woff2')} format('woff2');
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-extralight.woff2')} format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-extralight-italic.woff2')} format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-light.woff2')} format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-light-italic.woff2')} format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-regular.woff2')} format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-italic.woff2')} format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-semibold.woff2')} format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-semibold-italic.woff2')} format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-bold.woff2')} format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass';
|
||||
src: ${url('res/fonts/overpass-webfont/overpass-bold-italic.woff2')} format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass mono';
|
||||
src: ${url('res/fonts/overpass-mono-webfont/overpass-mono-light.woff2')} format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass mono';
|
||||
src: ${url('res/fonts/overpass-mono-webfont/overpass-mono-regular.woff2')} format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass mono';
|
||||
src: ${url('res/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2')} format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Overpass mono';
|
||||
src: ${url('res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2')} format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(fontsStyleElement);
|
||||
console.log("font loaded!")
|
||||
}
|
||||
}
|
||||
@ -672,7 +672,9 @@ class Resizer {
|
||||
styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor}) !important;`);
|
||||
|
||||
// important — guarantees video will be properly aligned
|
||||
styleArray.push("position: absolute; top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px;");
|
||||
// Note that position:absolute cannot be put here, otherwise old.reddit /w RES breaks — videos embedded
|
||||
// from certain hosts will get a height: 0px. This is bad.
|
||||
styleArray.push("top: 0px !important; left: 0px !important; bottom: 0px !important; right: 0px;");
|
||||
|
||||
// important — some websites (cough reddit redesign cough) may impose some dumb max-width and max-height
|
||||
// restrictions. If site has dumb shit like 'max-width: 100%' and 'max-height: 100vh' in their CSS, that
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"manifest_version": 2,
|
||||
"name": "Ultrawidify",
|
||||
"description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
|
||||
"version": "4.5.1",
|
||||
"version": "4.5.1.1",
|
||||
"applications": {
|
||||
"gecko": {
|
||||
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
|
||||
|
||||
@ -21,6 +21,9 @@
|
||||
<li>
|
||||
Edge users using CWS version of the extension get a very aggressive warning when trying to use the extension with Edge
|
||||
</li>
|
||||
<li>
|
||||
<b>[4.5.1.1]</b> Streamable fix broke old.reddit + RES on embeds from v.redd.it and streamable.com. We're now using an alternative implementation. (<a href="https://github.com/tamius-han/ultrawidify/issues/128">#128</a>)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -43,4 +43,26 @@
|
||||
font-size: 1.42rem;
|
||||
margin: .25rem 0;
|
||||
}
|
||||
ul, ol {
|
||||
display: block;
|
||||
list-style: disc outside none;
|
||||
margin: 1em 0;
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
ul ul, ol ul {
|
||||
list-style-type: circle;
|
||||
// list-style-position: inside;
|
||||
margin-left: 15px;
|
||||
}
|
||||
ol ol, ul ol {
|
||||
list-style-type: lower-latin;
|
||||
// list-style-position: inside;
|
||||
margin-left: 15px;
|
||||
}
|
||||
li {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user