[Issue]: Landscape Mode Issue for Videos using Media Player

[melissadrexler]

Describe the Issue in Detail

Depending on the device type, there are a couple of issues happening: Scenario 1: The video will not go into full landscape mode. Scenario 2: The video will only go into full landscape mode after going into full-screen portrait mode.

When the device attempts to go into landscape mode, the screen glitches like it tries and then fails back to portrait mode.

Can reproduce in

• [X] Orange App
• [X] Blue App

Steps to Reproduce

Scenario 1:

1. Add the media player to an app page
2. Use an iPhone 14 Pro Max running iOS 17.1.2
3. Press play on the video
4. Attempt to turn the phone to show landscape mode
5. Go full screen and attempt to turn the phone to show landscape mode

Scenario 2:

1. Add the media player to an app page
2. Use an iPhone 11 running iOS 16.6 or a Google Pixel 5a running Android 13
3. Attempt to turn the phone to show landscape mode

Expected Behavior

Either turning the phone initially or once in full-screen mode would show the video in full-screen landscape.

Actual Behavior

Scenario 1: The turning of the phone either initially or after in full-screen mode will glitch to show full-screen landscape, but then immediately will return to portrait mode.

Scenario 2: The turning of the phone initially will glitch to show full-screen landscape, but then immediately will return to portrait mode.

Screenshots or Videos

Scenario 1: https://drive.google.com/file/d/1pysnseMCIGUzcxM0mETrLfc7S_NCc2-u/view?usp=sharing

Scenario 2: https://drive.google.com/file/d/1EhYkZIZXl_LiH2aEZx0TSoAi1yfrNYs3/view?usp=sharing

Reproduction XAML

{% assign ItemId = PageParameter.Item | AsInteger %}
{% assign audioLink = Item | Attribute:'AudioLink','RawValue' %}
{% assign itemImage = Item | Attribute:'MessageImage','RawValue' %}
{% assign ItemWatchType = PageParameter.WatchType | AsInteger %} {% comment %} 1 is Message Only, 2 is Message and Worship {% endcomment %}
{% assign itemId = PageParameter.Item %}
{% assign itemTitle = Item.Title | Escape %}

{% if itemImage and itemImage != '' %}
    {% assign imgLink = 'Global' | Attribute:'PublicApplicationRoot' | Append:'GetImage.ashx?Guid=' | Append:itemImage %}
{% endif %}

{% assign videoId = Item | Attribute:'VideoLink' | Trim  %}
{% assign HSLLink = Item | Attribute:'HLSLink','RawValue' | Trim  %}
{% assign tenEightyFile = Item | Attribute:'1080p' | Trim  %}
{% assign sevenTwentyFile = Item | Attribute:'720p' | Trim  %}
{% assign threeSixtyFile = Item | Attribute:'360p' | Trim  %}

{% assign videoIdW = Item | Attribute:'VideoLinkId-MessageandWorship' | Trim  %}
{% assign HSLLinkW = Item | Attribute:'HLSLink-MessageandWorship','RawValue' | Trim  %}
{% assign tenEightyFileW = Item | Attribute:'1080pMP4File-MessageandWorship' | Trim  %}
{% assign sevenTwentyFileW = Item | Attribute:'720pMP4File-MessageandWorship' | Trim  %}
{% assign threeSixtyFileW = Item | Attribute:'360pMP4File-MessageandWorship' | Trim  %}

{% if ItemWatchType == 1 %}
    {% if videoId == '' %}
        {% comment %} No video {% endcomment %}
    {% elseif HSLLink != '' %}
        {% assign vidUrl = HSLLink %}
        {% comment %} HSL video does not play nicely with a thumbnail, so reset the image link {% endcomment %}
        {% assign imgLink = '' %}
    {% else %}
        {%- webrequest url:'https://player.vimeo.com/video/{{ videoId }}/config' -%}
            {%- assign jsonObject = results -%}
            {%- assign vidThumb = jsonObject.video.thumbs.960 -%}
            {%- for p in jsonObject.request.files.progressive -%}
                {% if p.height == 720 %}
                    {% assign vidUrl = p.url %}
                {% elseif p.height == 1080 %}
                    {% assign vidUrl = p.url %}
                {% elseif p.height == 360 %}
                    {% assign vidUrl = p.url %}
                {% endif %}
            {%- endfor -%}
        {%- endwebrequest -%}
    {% endif %}

    <StackLayout>
        {% if videoId == '' %}
            <Image Margin="0,0,0,10" Source="{{ imgLink }}" Aspect="AspectFit" />
        {% elseif vidUrl != '' %}
            <Rock:MediaPlayer AutoPlay="False"
                    {% if imgLink and imgLink != '' %}ThumbnailSource="{{ imgLink }}"{% endif %}
                    PlayButtonSource="https://admin.itownchurch.com/Content/ExternalSite/Mobile/PlayButton.png"
                    Source="{{ vidUrl | Escape }}"
                    Title="{{ itemTitle }}"/>
        {% else %}
        {% endif %}
    </StackLayout>

{% elseif ItemWatchType == 2 %}
    {% if videoIdW == '' %}
        {% comment %} No video {% endcomment %}
    {% elseif HSLLinkW != '' %}
        {% assign vidUrl = HSLLinkW %}
        {% comment %} HSL video does not play nicely with a thumbnail, so reset the image link {% endcomment %}
        {% assign imgLink = '' %}
    {% else %}
        {%- webrequest url:'https://player.vimeo.com/video/{{ videoIdW }}/config' -%}
            {%- assign jsonObject = results -%}
            {%- assign vidThumb = jsonObject.video.thumbs.960 -%}
            {%- for p in jsonObject.request.files.progressive -%}
                {% if p.height == 720 %}
                    {% assign vidUrl = p.url %}
                {% elseif p.height == 1080 %}
                    {% assign vidUrl = p.url %}
                {% elseif p.height == 360 %}
                    {% assign vidUrl = p.url %}
                {% endif %}
            {%- endfor -%}
        {%- endwebrequest -%}
    {% endif %}

    <StackLayout>
        {% if videoIdW == '' %}
            <Image Margin="0,0,0,10" Source="{{ imgLink }}" Aspect="AspectFit" />
        {% elseif vidUrl != '' %}
            <Rock:MediaPlayer AutoPlay="False"
                    {% if imgLink and imgLink != '' %}ThumbnailSource="{{ imgLink }}"{% endif %}
                    PlayButtonSource="https://admin.itownchurch.com/Content/ExternalSite/Mobile/PlayButton.png"
                    Source="{{ vidUrl | Escape }}"/>
        {% else %}
        {% endif %}
    </StackLayout>
{% endif %}

Mobile Shell Version

v5.0 (I think)

Last Known Working Version

v4 Pre iOS 16 for Apple

iOS Device Type(s) and iOS Version(s)

iPhone 14 Pro Max running iOS 17.1.2 // iPhone 11 running iOS 16.6

Android Device Type(s) and Android Version(s)

Google Pixel 5a running Android 13

[davidbelk]

I came here to post this. I can confirm that we are seeing it as well. Thanks for reporting it already Melissa!

[bradencohen]

Fixed in v6.