Content refactoring start - checkStatus POC#155
Conversation
| isInstalled() { | ||
| if (window.location.host.replace('www.', '') == 'stoplay_page.dev' | ||
| || window.location.host.replace('www.', '') == 'stoplay.github.io') { | ||
| document.querySelector("body").className = document.querySelector("body").className + " m_installed"; | ||
| } | ||
| } | ||
|
|
| console.log('providercheckStatus', this); | ||
| let status, p, selector, selectorQuery; | ||
|
|
||
| switch(this.host) { |
There was a problem hiding this comment.
Moved out of index.js without changes
| export class ProviderCheckStatus { | ||
| constructor() { | ||
| this.host = null; | ||
| this.customLastPlayerSelector = null; |
There was a problem hiding this comment.
Since you moved customLastPlayerSelector into a separate class it won't work anymore.
There was a problem hiding this comment.
I wanted to pass it as a param to provider methods
| /* A shared mixin for when there is a video tag on page */ | ||
| import { Status } from '../Status.Types.js'; | ||
|
|
||
| export const checkStatus = () => { |
There was a problem hiding this comment.
I like the idea to have mixins, as most of the status/pause/play functions can be grouped into few mixins, like:
status:
document.querySelector(PROVIDER_SPECIFIC_QUERY).classList.contains(PROVIDER_SPECIFIC_CLASS)play/pause:
document.querySelector(PROVIDER_SPECIFIC_QUERY).click();But, what I don't like is creating a separate class for each provider.
Previously, I thought that this is ok, but now it seems to me that that's a lot of redundant classes.
I'm thinking about a Strategy pattern, which may fix this:
class Service {
constructor(statusStrategy, controlStrategy, titleStrategy) {
}
getStatus() {
return this.statusStrategy.getStatus();
}
play() {
this.controlStrategy.play();
}
pause() {
this.controlStrategy.pause();
}
}
const servicesRegistry = [
{
hostPattern: "audible.**", // we can add support fields, like `host: string`, `hosts: Array<string>`
statusStrategy: oneOfeTheVideos.getCheckStatusStrategy(".path .to .player"),
controlStrategy: someOtherType.getControlStrategy("#player"),
},
];
function getService(domain) {
const matchedService = servicesRegistry.find(serviceConfig => {
return serviceConfig.host === domain
|| serviceConfig.hosts.include(domain)
|| serviceConfig.hostPattern.match(domain);
});
if (!matchedService) {
return;
}
return new Service(matchedService.statusStrategy, matchedService.controlStrategy);
}Not sure about registry.
@beshur What do you think?
|
Clean branch #157 |
Refactoring based on functions:
checkStatusinto classstartinto classpauseinto classgetTitleinto class