Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AdEvent timeOffset is always 0 after first ad break for IMA ads on iOS #218

Open
webnard opened this issue Oct 20, 2023 · 2 comments
Open
Assignees
Labels
bug Something isn't working

Comments

@webnard
Copy link
Contributor

webnard commented Oct 20, 2023

I'm getting an issue where the timeOffset property of an AdBreak is always 0 for all ad breaks except for the first.

With ads set at 5, 10, and 15 seconds, within the callback for an event listener on AD_EVENT, the timeOffset is 5000 for the first set of events (as expected) but becomes 0 for the ads at 10 and 15 seconds. I've tested this on iOS on a simulated iPhone 15 with react-native-theoplayer 3.0.2. The issue is demonstrated in the following video

timeoffsets.webm

Example code

import React from 'react';
import {useState} from 'react';
import {
  DEFAULT_THEOPLAYER_THEME,
  CenteredDelayedActivityIndicator,
  UiContainer,
  ControlBar,
  SeekBar,
  MuteButton,
  TimeLabel,
  Spacer,
  FullscreenButton,
  CenteredControlBar,
  PlayButton,
  SkipButton,
} from '@theoplayer/react-native-ui';
import {
  THEOplayerView,
  AdDescription,
  PlayerConfiguration,
  SourceDescription,
  THEOplayer,
  AdIntegrationKind,
  PlayerEventType,
  AdBreak,
  AdEvent,
  Ad,
  AdEventType,
} from 'react-native-theoplayer';
import {View, StyleSheet, Text} from 'react-native';

function Player(): JSX.Element {
  const [player, setPlayer] = useState<THEOplayer | undefined>(undefined);
  const [timeOffset, setTimeOffset] = useState<AdBreak['timeOffset'] | undefined>(undefined); // prettier-ignore
  const [adEvent, setAdEvent] = useState<AdEventType | undefined>(undefined)
  const ads: AdDescription[] = [
    {
      integration: 'google-ima' as AdIntegrationKind,
      sources: {
        src: 'https://cdn.theoplayer.com/demos/preroll.xml',
        type: 'vast',
      },
      timeOffset: 5,
    },
    {
      integration: 'google-ima' as AdIntegrationKind,
      sources: {
        src: 'https://cdn.theoplayer.com/demos/preroll.xml',
        type: 'vast',
      },
      timeOffset: 10,
    },
    {
      integration: 'google-ima' as AdIntegrationKind,
      sources: {
        src: 'https://cdn.theoplayer.com/demos/preroll.xml',
        type: 'vast',
      },
      timeOffset: 15,
    },
  ];
  const imaSource: SourceDescription = {
    sources: [
      {
        src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8',
        type: 'application/x-mpegurl',
      },
    ],
    ads,
  };
  const playerConfig: PlayerConfiguration = {
    license: process.env.THEO_LICENSE,
    chromeless: true,
    libraryLocation: 'theoplayer',
    cast: {
      chromecast: {
        appID: 'CC1AD845',
      },
      strategy: 'auto',
    },
    mediaControl: {
      mediaSessionEnabled: true,
    },
  };

  const onPlayerReady = async (p: THEOplayer) => {
    p.addEventListener(PlayerEventType.AD_EVENT, function (event: AdEvent) {
      const offset =
        (event?.ad as AdBreak)?.timeOffset ||
        (event?.ad as Ad)?.adBreak?.timeOffset;

      setAdEvent(event.subType);

      if (offset !== undefined) {
        setTimeOffset(offset);
      }
    });
    p.source = imaSource;
    p.autoplay = true;
    p.play();

    setPlayer(p);
  };

  return (
    <View>
      <View style={{height: 100, width: 100}}>
        <Text>Ad time offset: {timeOffset}</Text>
        <Text>Ad Event: {adEvent}</Text>
      </View>
      <View style={{height: 300, width: 600}}>
        <THEOplayerView config={playerConfig} onPlayerReady={onPlayerReady}>
          {player !== undefined && (
            <UiContainer
              theme={DEFAULT_THEOPLAYER_THEME}
              player={player}
              behind={<CenteredDelayedActivityIndicator size={50} />}
              center={
                <CenteredControlBar
                  left={<SkipButton skip={-10} />}
                  middle={<PlayButton />}
                  right={<SkipButton skip={30} />}
                />
              }
              bottom={
                <>
                  <ControlBar>
                    <SeekBar />
                  </ControlBar>
                  <ControlBar>
                    <MuteButton />
                    <TimeLabel showDuration={true} />
                    <Spacer />
                    <FullscreenButton />
                  </ControlBar>
                </>
              }
            />
          )}
        </THEOplayerView>
      </View>
    </View>
  );
}

export default Player;
@tvanlaerhoven tvanlaerhoven added the bug Something isn't working label Oct 23, 2023
@tvanlaerhoven
Copy link
Member

@webnard thanks for your detailed issue description. We'll pick it up.

@wvanhaevre
Copy link
Collaborator

wvanhaevre commented Oct 23, 2023

We can reproduce the issue. We'll investigate the issue and get back to you when we have more info.
EDIT: This seems to be an issue on the underlying iOS SDK. We will look into it and prepare a fix on that SDK.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants