Skip to content

Content refactoring start - checkStatus POC#155

Closed
beshur wants to merge 2 commits intodevelopfrom
content-refactoring
Closed

Content refactoring start - checkStatus POC#155
beshur wants to merge 2 commits intodevelopfrom
content-refactoring

Conversation

@beshur
Copy link
Member

@beshur beshur commented Dec 2, 2019

Refactoring based on functions:

  • Move checkStatus into class
  • Move start into class
  • Move pause into class
  • Move getTitle into class
  • index.js cleanup

@beshur beshur requested a review from endway December 2, 2019 20:53
Comment on lines -133 to -139
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";
}
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is obsolete

console.log('providercheckStatus', this);
let status, p, selector, selectorQuery;

switch(this.host) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved out of index.js without changes

export class ProviderCheckStatus {
constructor() {
this.host = null;
this.customLastPlayerSelector = null;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you moved customLastPlayerSelector into a separate class it won't work anymore.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

@beshur
Copy link
Member Author

beshur commented Dec 4, 2019

Clean branch #157

@beshur beshur closed this Dec 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants