Overlay Document on Video

[john-trovalto]

Hi,

I was trying to show an overlay document over the video player and did it successfully. However, the newly added document is blocking the video player.

Please check the below image for reference.

When I press the back button from the remote, it removes that document and adds a new document which is transparent and perfectly align on the video player.

Please check the below image for reference. (Please ignore the glowing background it is from the video)

I again have to press the back button to remove this document. If I press the pause button it will pause the video and from that point, I can't able to do anything except exit from the video.

Below is the code I used to add the document over the player.

const document = TVDML.createEmptyDocument();

const pipeline = TVDML.render(() => (

Video Title

));

pipeline.sink({ document }).then(() => { player.interactiveOverlayDocument = document; });

I also tried Player.overlayDocument but it doesn't add anything to the player.

I know the library is not being maintained anymore and is quite old but it works like a charm for me as I can able to create a new app without any issue which doesn't require customised UI.

Thanks.

[nikesh8]

I am experiencing the same issue when attempting to add an overlay on the video. If someone has already found a solution to this problem, please share it.

Thank you in advance.

@a-ignatov-parc

[a-ignatov-parc]

@nikesh8, good morning. Sorry for the late reply. In order to help you, I would like to clarify what you are trying to achieve in the first place. What is your use case? Without this information, it would be almost impossible to help you as it seems that the root cause is not the tvdml library itself, but rather the limitations of tvOS and the implicit limitations of the TVML 🤔

[nikesh8]

@a-ignatov-parc When attempting to add an overlay on the player, initially there is a black background along with the content document. However, upon pressing the menu or back button, the black background is removed and a transparent document overlay is displayed on the video. If you require further information on this issue, please let me know.

Please refer to the attached screen recording for better understanding.

https://github.com/a-ignatov-parc/tvdml/assets/55312626/06bd42b6-0c4a-42f5-99a4-f3929696b372

[a-ignatov-parc]

@nikesh8, I apologize for my delayed response. I didn't have time for my pet projects.

Regarding your issue, are you enabling interactiveOverlayDismissable in addition to interactiveOverlayDocument? I noticed that when you press the Back button, the video player does not close. If this is the case, you may want to check in Safari's dev tools whether the mounted overlay is still assigned to interactiveOverlayDocument of the Player's instance. I assume that it should be cleared by tvOS, but as I haven't used it before, I'm not confident about it. If it is not cleared, you may need to unmount it with TVDML.ReactTVML.unmountComponentAtNode(player.interactiveOverlayDocument) and manually clear the property.

[nikesh8]

@nikesh8, I apologize for my delayed response. I didn't have time for my pet projects.

Regarding your issue, are you enabling interactiveOverlayDismissable in addition to interactiveOverlayDocument? I noticed that when you press the Back button, the video player does not close. If this is the case, you may want to check in Safari's dev tools whether the mounted overlay is still assigned to interactiveOverlayDocument of the Player's instance. I assume that it should be cleared by tvOS, but as I haven't used it before, I'm not confident about it. If it is not cleared, you may need to unmount it with TVDML.ReactTVML.unmountComponentAtNode(player.interactiveOverlayDocument) and manually clear the property.

@a-ignatov-parc I am encountering an issue where the overlay document on the player screen initially displays with a background. However, upon replaying the video and showing the overlay document again, it appears as desired without any background.

[a-ignatov-parc]

document on the player screen initially displays with a background ... it appears as desired without any background.

@nikesh8, I see the problem now. Sorry, I didn't understand it from our previous discussion.

According to the overlay documentation, it can only be used inside the lockup element. However, based on your initial example, you used it as a document template, which is not expected to work.

You should try using the divTemplate or showcaseTemplate to build the interactiveOverlayDocument. I'm not sure if they support a transparent background, but this is the right direction to move forward.

If you are unable to achieve your goals, you should contact Apple developer support and ask about the possibility of having a fully transparent overlay for the player. There is a chance that this is not possible in tvOS's TVML (not this library).

If you are familiar with Swift or Objective-C, you can extend TVML with any behavior you like, but I'm afraid that's beyond the scope of my expertise.

[nikesh8]

document on the player screen initially displays with a background ... it appears as desired without any background.

@nikesh8, I see the problem now. Sorry, I didn't understand it from our previous discussion.

According to the overlay documentation, it can only be used inside the lockup element. However, based on your initial example, you used it as a document template, which is not expected to work.

You should try using the divTemplate or showcaseTemplate to build the interactiveOverlayDocument. I'm not sure if they support a transparent background, but this is the right direction to move forward.

If you are unable to achieve your goals, you should contact Apple developer support and ask about the possibility of having a fully transparent overlay for the player. There is a chance that this is not possible in tvOS's TVML (not this library).

If you are familiar with Swift or Objective-C, you can extend TVML with any behavior you like, but I'm afraid that's beyond the scope of my expertise.

Here is the code snippet showcasing how I am adding the overlay document:

const pipeline = TVDML.render(() => (
  <document>
    <divTemplate>
      <overlay style={{ tvAlign: 'right', tvPosition: 'bottom-right' }}>
        <organizer
          style={{
            tvAlign: 'right',
            tvPosition: 'bottom-right',
            marginBottom: '150',
            marginRight: '50',
          }}
        >
          <img
            src="https://picsum.photos/id/23/300/300"
            height="300"
            width="300"
          />
          <text
            style={{
              fontSize: '30px',
              fontWeight: 'semiBold',
              color: 'red',
              marginTop: '20px',
            }}
          >
            Video Title
          </text>
        </organizer>
      </overlay>
    </divTemplate>
  </document>
));

// This is the Player listener to show overlay at last 10seconds
player.addEventListener(
    'timeDidChange',
    function(event) {
      const duration = player.currentMediaItemDuration;
      const currentTime = duration - event.time;
      if (currentTime <= 10) {
        pipeline.sink({ document }).then(() => {
          player.interactiveOverlayDocument = document;
        });
      }
    },
    { interval: 5 },
  );

[a-ignatov-parc]

According to the overlay documentation, it can only be used inside the lockup element.

@nikesh8, FYI, you're still using overlay incorrectly.

[nikesh8]

According to the overlay documentation, it can only be used inside the lockup element.

@nikesh8, FYI, you're still using overlay incorrectly.

@a-ignatov-parc The issue is not with the overlay element itself. Even if I don't use it, I still face the same issue. The reason I use the overlay is to properly align the content at specific positions.

[a-ignatov-parc]

@nikesh8, just to clarify, TVML is very unpredictable when it comes to usage outside of the recommendations found in its documentation. To understand why something isn't working as expected, developers should always start with a minimal solution that is well known to work. Otherwise, there will be too many variables in the equation. That's why I shared links to Apple's documentation and noted that your usage of overlay is not expected. Now it's up to you to experiment and find a solution that is supported by TVML and suits your needs 👍

Unfortunately, as the author of this library (that basically provides React.js binding to TVML), the only help I can offer is to share some advice from my past experience with developing TVML apps. Please don't expect me to find a solution for you. I simply don't have the free time and motivation.

[a-ignatov-parc]

I'm closing this issue for now since, at the moment, it appears that the problem does not lie within the library itself, but rather in how TVML in tvOS is handling different document templates. If we determine that we need to fix something in the library, we will reopen this issue.