triniwiz / nativescript-plugins

Apache License 2.0
80 stars 50 forks source link

Bad layouts occur when toggling fullscreen or rotating device #90

Open chris-praxis opened 3 years ago

chris-praxis commented 3 years ago

@triniwiz/nativescript-youtubeplayer 4.1.4

I think the title says it all, but I'll attach some images. Also, I have a special layout because I find that the YoutubePlayer does not properly center in a GridLayout cell, but even when I simplify the layout I get the following (see images) layout issues...

bad_video_layout-2-android bad_video_layout-android bad_video_layout-iOS s.

chris-praxis commented 3 years ago

I get bad layouts simply by toggling fullscreen via the YT button, but rotating device makes for some extra bad layouts.

EdJones commented 12 months ago

@chris-praxis, were you able to find a work-around for this?

chris-praxis commented 11 months ago

@chris-praxis, were you able to find a work-around for this?

Sort of. I use this YT player in a limited way, with no fullscreen option, and it works for my needs. Currently I'm not getting the issues above after rotating the device. I'm using version 4.1.4. Here's my layout... ` <MyActionBar row="0" :title="pageName" rightButtonIcon="~/assets/images/close_button_X.png" :rightButtonCallback="isVideoVisible ? onBackButtonPressed : null" />

        <GridLayout row="1" :rows="isLandscape ? 'auto,*,auto,auto' : '*,*,*,auto'" margin="10">
            <Label row="0" class="subtitle" :text="subtitle" textWrap="true" />

            <GridLayout row="1" id="videoFrame">
                <Image src="~/assets/images/new_feature_video.png" />
                <Image width="70" height="70" src="~/assets/images/play_video_button.png"
                    :visibility="isVideoReady ? 'visible' : 'collapsed'"
                    @tap="onPlayVideoTap" />
            </GridLayout>

            <StackLayout row="3" orientation="horizontal" horizontalAlignment="center">
                <Button class="btn-secondary" text="Continue" margin="10"
                    @tap="onContinueButtonTap" />
            </StackLayout>
        </GridLayout>

        <YoutubePlayer row="1" ref="videoPlayer"
            controls="false" showFullScreenToggle="false" showRelatedVideos="false" showYoutubeLogo="false"
            :videoId="videoSource"
            :visibility="isVideoVisible ? 'visible' : 'hidden'"
            @currentTime="onCurrentTimeChange"
            @ready="onReady"
            @stateChange="onStateChange" />
    </GridLayout>

`

chris-praxis commented 11 months ago

@EdJones Changing my layout to the above fixed most if not all of the issues.

EdJones commented 11 months ago

@chris-praxis Thanks!

I don't think I tried a grid layout with explicit row numbers. I was using StackLayout or GridLayout.

Will try it.