tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start working on applying extra css to player and video elements

Browse Source
This commit is contained in:
Tamius Han 2019-06-11 01:34:02 +02:00
parent 08c257ec00
commit 26610f2e00
3 changed files with 67 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/ext/conf/ExtensionConf.js
View File

@ -931,13 +931,14 @@ var ExtensionConf = {
video: {
manual: false,
querySelectors: '',
additionalCss: '',
},
player: {
manual: true,
useRelativeAncestor: true,
querySelectors: '',
videoAncestor: 1,
playerNodeCss: '',
additionalCss: '',
}
}
// videoElement: { // extra stuff for video tag

43
src/ext/lib/video-transform/Resizer.js
View File

@ -511,7 +511,7 @@ class Resizer {
}
}
// if(Debug.debug) {
if(Debug.debug) {
console.log("[Resizer::_res_computeOffsets] <rid:"+this.resizerId+"> calculated offsets:\n\n",
'---- data in ----\n',
'player dimensions:', {w: this.conf.player.dimensions.width, h: this.conf.player.dimensions.height},
@ -520,13 +520,14 @@ class Resizer {
'pan & zoom: ', this.pan, this.zoom,
'\n\n---- data out ----\n',
'translate:', translate);
// }
}
return translate;
}
applyCss(stretchFactors, translate){
// apply extra CSS here. In case of duplicated properties, extraCss overrides
// default styleString
if (! this.video) {
if(Debug.debug) {
console.log("[Resizer::applyCss] <rid:"+this.resizerId+"> Video went missing, doing nothing.");
@ -545,13 +546,34 @@ class Resizer {
}
var styleArrayStr = this.video.getAttribute('style');
var styleArrayObj = window.getComputedStyle(this.video);
if (styleArrayStr) {
var styleArray = styleArrayStr.split(";");
for(var i in styleArray){
try {
const extraCss = this.settings.active.sites[window.location.host].DOM.video.additionalCss.split(';');
let dup = false;
for (const ecss of extraCss) {
for (let i in styleString) {
if (ecss.split(':')[0].trim() === styleString[i].split(':')[0].trim()) {
dup = true;
styleString[i] = ecss;
}
if (dup) {
dup = false;
continue;
}
styleString.push(ecss);
}
}
} catch (e) {
// do nothing. We just want to catch cases where things like that aren't defined
// for the current video
}
for (var i in styleArray) {
styleArray[i] = styleArray[i].trim();
// some sites do 'top: 50%; left: 50%; transform: <transform>' to center videos.
@ -568,19 +590,20 @@ class Resizer {
var styleArray = [];
}
// add remaining elements
if(stretchFactors){
if (stretchFactors) {
styleArray.push(`transform: translate(${translate.x}px, ${translate.y}px) scale(${stretchFactors.xFactor}, ${stretchFactors.yFactor})`);
styleArray.push("top: 0px; left: 0px; bottom: 0px; right: 0px");
}
// build style string back
var styleString = "";
for(var i in styleArray)
if(styleArray[i])
for(var i in styleArray) {
if(styleArray[i]) {
styleString += styleArray[i] + "; ";
}
}
this.setStyleString(styleString);
}

32
src/popup/panels/SiteDetailsPanel.vue
View File

@ -20,6 +20,15 @@
@blur="updateVideoQuerySelector"
/>
</div>
<div class="flex flex-column">
<div class="flex label-secondary form-label">Additional css</div>
<input type="text"
v-model="videoCss"
@change="updateVideoCss"
@blur="updateVideoCss"
/>
</div>
</div>
<div class="label">
@ -63,6 +72,14 @@
type="number"
/>
</div>
<div class="flex flex-column">
<div class="flex label-secondary form-label">Additional css</div>
<input type="text"
v-model="playerCss"
@change="updatePlayerCss"
@blur="updatePlayerCss"
/>
</div>
</div>
</div>
</template>
@ -80,8 +97,10 @@ export default {
return {
videoManualQs: false,
videoQs: '',
videoCss: '',
playerManualQs: false,
playerQs: '',
playerCss: '',
playerByNodeIndex: false,
playerParentNodeIndex: undefined,
};
@ -94,6 +113,7 @@ export default {
try {
this.videoManualQs = settings.active.sites[this.site].DOM.video.manual || this.videoManualQs;
this.videoQs = settings.active.sites[this.site].DOM.video.querySelectors;
this.videoCss = settings.active.sites[this.site].DOM.video.additionalCss;
} catch (e) {
// that's here just in case relevant settings for this site don't exist yet
}
@ -101,6 +121,7 @@ export default {
try {
this.playerManualQs = settings.active.sites[this.site].DOM.player.manual || this.playerManualQs;
this.playerQs = settings.active.sites[this.site].DOM.player.querySelectors;
this.playerCss = settings.active.sites[this.site].DOM.player.additionalCss;
this.playerByNodeIndex = settings.active.sites[this.site].DOM.player.useRelativeAncestor;
this.playerParentNodeIndex = settings.active.sites[this.site].DOM.player.videoAncestor;
} catch (e) {
@ -126,6 +147,7 @@ export default {
this.settings.active.sites[this.site].DOM[scope] = {
manual: false,
querySelectors: '',
additionalCss: '',
useRelativeAncestor: scope === 'player' ? false : undefined,
videoAncestor: undefined,
playerNodeCss: scope === 'player' ? '' : undefined,
@ -137,11 +159,21 @@ export default {
this.settings.active.sites[this.site].DOM.video.querySelectors = this.videoQs;
this.settings.save();
},
updateVideoCss() {
this.ensureSettings('video');
this.settings.active.sites[this.site].DOM.video.additionalCss = this.videoCss;
this.settings.save();
},
updatePlayerQuerySelector() {
this.ensureSettings('player');
this.settings.active.sites[this.site].DOM.player.querySelectors = this.playerQs;
this.settings.save();
},
updateVideoCss() {
this.ensureSettings('player');
this.settings.active.sites[this.site].DOM.player.additionalCss = this.playerCss;
this.settings.save();
},
updatePlayerParentNodeIndex() {
this.ensureSettings('player');
this.settings.active.sites[this.site].DOM.player.videoAncestor = this.playerParentNodeIndex;