Details | Discover: Implement mark as watched button

[higorgoulart]

Added "Mark as watched/unwatched" on discover and details.

#989

[kKaskak]

i don't think that the context menu works correctly on discover page 🤔
some considerations:

• can you group library btn and the mark as watched together?
• order the actions like that: trailer - add to lib + mark as watched - ratings - share
• fix builds

thanks for the PR good job overall
ps: i didnt look at the code yet

[higorgoulart]

i don't think that the context menu works correctly on discover page 🤔 some considerations:

• can you group library btn and the mark as watched together?
• order the actions like that: trailer - add to lib + mark as watched - ratings - share
• fix builds

thanks for the PR good job overall ps: i didnt look at the code yet

I fixed the context menu on discover page and ordered as "trailer - lib - watched - ratings - share" (I don't know if this was what you meant with grouping them, but if it wasn't, can you explain more or tell if there's already any example in the codebase?).

[kKaskak]

i don't think that the context menu works correctly on discover page 🤔 some considerations:

• can you group library btn and the mark as watched together?
• order the actions like that: trailer - add to lib + mark as watched - ratings - share
• fix builds

thanks for the PR good job overall ps: i didnt look at the code yet

I fixed the context menu on discover page and ordered as "trailer - lib - watched - ratings - share" (I don't know if this was what you meant with grouping them, but if it wasn't, can you explain more or tell if there's already any example in the codebase?).

You could create a typescript component called Group.tsx and then in the group put n number of Item.tsx components

please for new stuff use typescript

this project modular structure can be seen in new parts of the codebase like ex. the Calendar route

[kKaskak]

hey thanks for the changes

some things to consider next:

• Equal spacing

• Tooltips on the new group does not work
• Maybe we don't need the context menu anymore on the Discover page since we have the button already?
• Please rewrite the DiscItem.js to use typescript if the component is still needed

[kKaskak]

Could you rename the IconsGroup to ActionsGroup?

[kKaskak]

There is more stuff to consider but will add comments after you apply these changes

[kKaskak]

there are some broken styles?

[kKaskak]

Could you rename the IconsGroup to ActionsGroup?

.

[kKaskak]

mark as watched is a separate action and should not be tied to adding to library, we can mark an item as watched without adding to library explicitly

[higorgoulart]

mark as watched is a separate action and should not be tied to adding to library, we can mark an item as watched without adding to library explicitly

No, we can't. The action "LibraryItemMarkAsWatched" doesn't work if the video was never in the library.

For some reason, if the video was added to library and removed later, you can mark as watched, probably because the item is not removed from database but flagged as "deleted" or something like that. But if it was never in the library, the action doesn't work.

[higorgoulart]

mark as watched is a separate action and should not be tied to adding to library, we can mark an item as watched without adding to library explicitly

No, we can't. The action "LibraryItemMarkAsWatched" doesn't work if the video was never in the library.
For some reason, if the video was added to library and removed later, you can mark as watched, probably because the item is not removed from database but flagged as "deleted" or something like that. But if it was never in the library, the action doesn't work.

Then this will need to be changed in core. Not here

I made up here. But I didn't find how to test the changes from stremio-core on my local stremio-web :/

[kKaskak]

so you can just use this instead which will work for all items, note that this work out of the box on the details page, but not on discover since we need to load the model to access the action

        core.transport.dispatch({
            action: 'MetaDetails',
            args: {
                action: 'MarkAsWatched',
                args: !selectedMetaItem.watched
            }
        });

[kKaskak]

you can also remove padding on the trailer button on mobile devices when no label is present to align the design to the share button, so on most of the phones all meta action buttons display in one line

[kKaskak]

so you can just use this instead which will work for all items, note that this work out of the box on the details page, but not on discover since we need to load the model to access the action

        core.transport.dispatch({
            action: 'MetaDetails',
            args: {
                action: 'MarkAsWatched',
                args: !selectedMetaItem.watched
            }
        });

.

[higorgoulart]

so you can just use this instead which will work for all items, note that this work out of the box on the details page, but not on discover since we need to load the model to access the action

        core.transport.dispatch({
            action: 'MetaDetails',
            args: {
                action: 'MarkAsWatched',
                args: !selectedMetaItem.watched
            }
        });

.

But this doesn't work on discover page.

[kKaskak]

so you can just use this instead which will work for all items, note that this work out of the box on the details page, but not on discover since we need to load the model to access the action

But this doesn't work on discover page.

I already told you in the previous response what to do. Read it again pls if you don't understand respond and I will explain again with code sample. Try figuring it out yourself if possible. Key is to use the correct model

[higorgoulart]

so you can just use this instead which will work for all items, note that this work out of the box on the details page, but not on discover since we need to load the model to access the action

But this doesn't work on discover page.

I already told you in the previous response what to do. Read it again pls if you don't understand respond and I will explain again with code sample. Try figuring it out yourself if possible. Key is to use the correct model

I think I figured out!

[kKaskak]

@Botsy can i get additional review on this thank you

[Botsy]

@higorgoulart @kKaskak I reviewed the changes and tested. All looks good to me. One minor thing/inconsistency I noticed on the action buttons in meta details is that not all of them have the tooltip/label on hover. But this is unrelated to the PR.

[kKaskak]

@higorgoulart @kKaskak I reviewed the changes and tested. All looks good to me. One minor thing/inconsistency I noticed on the action buttons in meta details is that not all of them have the tooltip/label on hover. But this is unrelated to the PR.

thanks

[kKaskak]

Functionality wise this is fine, however the issue that we load and unload the model on each item selection is still there which needs to fixed. I will propose a better solution asap