I have a TVML screen with a collection list. The screen shows a number of buttons with a checkmark on the corner that marks if the user has watched that particular video or not.
<stackTemplate>
<collectionList>
<grid>
<section>
{{#lessons}}
<lockup
template="lesson.tvml"
presentation="push"
id="{{lsnm}}"
data='......'>
<img src="https://my.s.ite.com/{{lesson_num}}.png" width="304" height="304"/>
<title>Day {{lesson_num}}</title>
<overlay>
{{#watched}}
<img src="https://yoga365.online/tvapp/check_{{suffix}}.png" class="seenmark" alt="Lesson {{lesson_num}}" width="30" height="30"/>
{{/watched}}
</overlay>
</lockup>
{{/lessons}}
</section>
</grid>
</collectionList>
</stackTemplate>
Data is obtained from an API call which returns all the available videos, including which have been watched by the user.
When the user selects a button, the lesson.tvml appears. This is a productTemplate with a play button.
When the video plays, a progress handler monitors whether the video has been watched at least until 15 secs before the end and marks it as watched in the database. When the video ends, the screen returns to lesson.tvml. When the user presses MENU, the app goes back to the collection list screen. At this point I'd like the screen to refresh so that the call to the API is made again and the watched mark for the video the user just watched is rendered accordingly.
I have been able to refresh screens upon selecting a different item in the menu bar:
presentMenuBarItem(doc, menuItem, template) {
var feature = menuItem.parentNode.getFeature("MenuBarDocument");
if (feature) {
var currentDoc = feature.getDocument(menuItem);
if (template.includes("days.tvml")) {
currentDoc = undefined
}
if (!currentDoc) {
feature.setDocument(doc, menuItem);
}
}
}
but I can't figure out how to do it without the menu bar, because the collection list I want to update is a second-level screen that is not accessed via the menu bar.