Readied some things for the player selector thing, but in content scripts
This commit is contained in:
parent
5b3ee66066
commit
6d564e2f98
189
src/ext/lib/PlayerPickerHelper.js
Normal file
189
src/ext/lib/PlayerPickerHelper.js
Normal file
@ -0,0 +1,189 @@
|
||||
class PlayerPickerHelper {
|
||||
constructor (settings, callbacks) {
|
||||
this.settings = settings;
|
||||
this.videos = document.selectElementsByTagName('video');
|
||||
this.selectedParentIndex = this.findPlayerForVideos(settings, this.videos)[0];
|
||||
this.savedCss = [];
|
||||
this.markVideos();
|
||||
this.markIndexForAll(index);
|
||||
this.markInitialQuerySelectors();
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* Internal functions
|
||||
*
|
||||
*/
|
||||
saveBorder(element) {
|
||||
if (this.savedCss.findIndex(x => x.element === element) !== -1) {
|
||||
this.savedCss.push({element: element, border: element.style.border});
|
||||
}
|
||||
}
|
||||
restoreBorders() {
|
||||
for (const e of this.savedCss) {
|
||||
e.element.style.border = e.border;
|
||||
}
|
||||
}
|
||||
|
||||
findPlayerForVideos(settings, videos) {
|
||||
const playerIndexes = [];
|
||||
for (const v of videos) {
|
||||
playerIndexes.push(this.findPlayerForVideo(settings, v));
|
||||
}
|
||||
return playerIndexes;
|
||||
}
|
||||
|
||||
findPlayerForVideo(settings, video) {
|
||||
const host = window.location.host;
|
||||
let element = video.parentNode;
|
||||
|
||||
if (this.settings.active.sites[host]
|
||||
&& this.settings.active.sites[host].DOM
|
||||
&& this.settings.active.sites[host].DOM.player
|
||||
&& this.settings.active.sites[host].DOM.player.manual) {
|
||||
if (this.settings.active.sites[host].DOM.player.useRelativeAncestor
|
||||
&& this.settings.active.sites[host].DOM.player.videoAncestor) {
|
||||
|
||||
return this.settings.active.sites[host].DOM.player.videoAncestor;
|
||||
} else if (this.settings.active.sites[host].DOM.player.querySelectors) {
|
||||
const allSelectors = document.querySelectorAll(this.settings.active.sites[host].DOM.player.querySelectors);
|
||||
let elementIndex = 1;
|
||||
while (element && !this.collectionHas(allSelectors, element)) {
|
||||
element = element.parentNode;
|
||||
elementIndex++;
|
||||
}
|
||||
return elementIndex;
|
||||
}
|
||||
}
|
||||
|
||||
let elementIndex = 0;
|
||||
|
||||
var trustCandidateAfterGrows = 2; // if candidate_width or candidate_height increases in either dimensions this many
|
||||
// times, we say we found our player. (This number ignores weird elements)
|
||||
// in case our <video> is bigger than player in one dimension but smaller in the other
|
||||
// if site is coded properly, player can't be wider than that
|
||||
var candidate_width = Math.max(element.offsetWidth, window.innerWidth);
|
||||
var candidate_height = Math.max(element.offsetHeight, window.innerHeight);
|
||||
var playerCandidateNode = element;
|
||||
|
||||
// if we haven't found element using fancy methods, we resort to the good old fashioned way
|
||||
var grows = trustCandidateAfterGrows;
|
||||
while(element != undefined){
|
||||
// odstranimo čudne elemente, ti bi pokvarili zadeve
|
||||
// remove weird elements, those would break our stuff
|
||||
if ( element.offsetWidth == 0 || element.offsetHeight == 0){
|
||||
element = element.parentNode;
|
||||
elementIndex++;
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( element.offsetHeight <= candidate_height &&
|
||||
element.offsetWidth <= candidate_width ){
|
||||
|
||||
// if we're in fullscreen, we only consider elements that are exactly as big as the monitor.
|
||||
if( ! isFullScreen ||
|
||||
(element.offsetWidth == window.innerWidth && element.offsetHeight == window.innerHeight) ){
|
||||
|
||||
playerCandidateNode = element;
|
||||
candidate_width = element.offsetWidth;
|
||||
candidate_height = element.offsetHeight;
|
||||
|
||||
grows = trustCandidateAfterGrows;
|
||||
|
||||
this.logger.log('info', 'debug', "Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
|
||||
}
|
||||
}
|
||||
else if(grows --<= 0){
|
||||
this.logger.log('info', 'playerDetect', "Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
|
||||
break;
|
||||
}
|
||||
|
||||
element = element.parentNode;
|
||||
elementIndex++;
|
||||
}
|
||||
|
||||
return elementIndex;
|
||||
}
|
||||
|
||||
markVideos() {
|
||||
for (const v of this.videos) {
|
||||
this.markVideo(v);
|
||||
}
|
||||
}
|
||||
|
||||
markVideo(video) {
|
||||
this.saveBorder(video);
|
||||
video.style.border = "1px solid #00f";
|
||||
}
|
||||
|
||||
markIndexForAll(index){
|
||||
for (const v of this.videos) {
|
||||
this.markIndex(index, v);
|
||||
}
|
||||
}
|
||||
markIndex(index, video) {
|
||||
el = video.parentNode;
|
||||
while (index --> 1) {
|
||||
el = el.parentNode;
|
||||
}
|
||||
this.saveBorder(el);
|
||||
el.style.border = "1px solid #88f";
|
||||
}
|
||||
markInitialQuerySelectors() {
|
||||
try {
|
||||
if (this.settings.active.sites[host].DOM.player.querySelectors.trim()) {
|
||||
this.markQuerySelectorMatches(this.settings.active.sites[host].DOM.player.querySelectors);
|
||||
}
|
||||
} catch (e) {
|
||||
// nothing to see here. something in that if spaghett is undefined, which causes
|
||||
// everything to fail. Since this means we've got zero query string matches to mark,
|
||||
// we just ignore the failure
|
||||
}
|
||||
}
|
||||
markQuerySelectorMatches(qsString) {
|
||||
const allSelectors = document.querySelectorAll(qsString);
|
||||
for (e of allSelectors) {
|
||||
this.saveBorder(e);
|
||||
e.style.border = "1px dashed fd2";
|
||||
}
|
||||
}
|
||||
markQsPlayerDetection(qsString, index, video) {
|
||||
let element = video.parentNode;
|
||||
let elementIndex = 1;
|
||||
|
||||
const allSelectors = document.querySelectorAll(qsString);
|
||||
while (element && !this.collectionHas(allSelectors, element)) {
|
||||
element = element.parentNode;
|
||||
elementIndex++;
|
||||
}
|
||||
|
||||
this.saveBorder(element)
|
||||
if (elementIndex > index) {
|
||||
element.style.border = "2px solid #f00"
|
||||
} else if (elementIndex === index) {
|
||||
element.style.border = "2px solid #027a5c"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
*
|
||||
* Function that actually interface with playerpicker and do stuff
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
setQuerySelectors(querySelectorString) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default PlayerPickerHelper
|
||||
@ -11,8 +11,10 @@
|
||||
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<div class="pp_video flex flex-nogrow"><code><video></code> element</div>
|
||||
<div class="pp_current flex flex-nogrow">Selected element</div>
|
||||
<div class="pp_matched flex flex-nogrow">Matched by query string</div>
|
||||
<div class="pp_current flex flex-nogrow">Selected and not matched</div>
|
||||
<div class="pp_matched flex flex-nogrow">Elements that match query selector</div>
|
||||
<div class="pp_current_matched">Selected and matched, selector ok</div>
|
||||
<div class="pp_match_children">Selected and matched, selector too vague</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
@ -259,7 +261,7 @@ export default {
|
||||
.pp_video {
|
||||
margin: 2px;
|
||||
padding: 5px;
|
||||
border: 1px solid red;
|
||||
border: 1px solid #00f;
|
||||
}
|
||||
.pp_current {
|
||||
margin: 2px;
|
||||
@ -271,4 +273,14 @@ export default {
|
||||
padding: 5px;
|
||||
border: 1px dashed #fd2;
|
||||
}
|
||||
.pp_current_matched {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
border: 2px solid #027a5c;
|
||||
}
|
||||
.pp_match_children {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
border: 2px solid #f00;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user