YouTube in Rock Mobile

Shared by Andrew Todd, Victory Christian Church
one year ago

12.0 General, Web, Worship Intermediate

Interested in moving to a Rock Mobile app? Do you have all your videos on YouTube? Are you wondering how people can access them in Rock Mobile and why YouTube doesn't get along with Rock?

You are in the right place! Relax and enjoy this simple how-to and your people will be watching your content from your new Rock app!

Here we go...

Disclaimer: You will need to be familiar with creating a web page, a general grasp of XAML, Lava, and HTML, and a good idea of where the CTRL/CMD,C,V keys are located on your keyboard. ;) You will also need to have already created your basic app by following this guide.

SPOILER ALERT

We will be taking a basic webview page, and adding a grid below the webview code to display the video/content.

The Layout. This one is simple...

Create a new Layout in your mobile app by going to the Layouts tab and hit the plus button.
Name it Webview and add a short description like this: "Used for displaying content within the app frame but from another website."
Copy and paste the code below.
NOTE: The Tablet Layout XAML can match the Phone Layout XAML for any layout for now.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:Rock="clr-namespace:Rock.Mobile.Cms;assembly=Rock.Mobile"
             xmlns:Common="clr-namespace:Rock.Mobile.Common;assembly=Rock.Mobile.Common">
    <ContentPage.Content>

        <Rock:Zone ZoneName="WebView" 
            VerticalOptions="FillAndExpand"
            Spacing="0"
            Padding="0">
        </Rock:Zone>
    </ContentPage.Content>
</ContentPage>

The Webpage

Go to CMS Configuration > Pages and create a new page in your main structure. (I recommend adding it under the same parent as your website message detail page)
Name it Media Player and give it a Blank Layout.
Edit your Display Settings as needed for your website.
Add a page route. Ex: mediaplayer/{message}. That Lava tag will help load the correct message. More on that below.
Click Save
Add a Content Channel Item View block to the page.
In the block settings, choose your messages content channel and add the code below. Feel free to customize to your liking.

{% assign videoEmbed = Item | Attribute:'VideoEmbed' %}
{%- for parentItem in Item.ParentItems -%}{% assign seriesImageGuid = parentItem.ContentChannelItem | Attribute:'SeriesImage','RawValue' %}{%- endfor -%}

{{ Item.Content | StripHtml | Truncate:120 | AddMetaTagToHead:'property','og:description' }}

<style>
    .socialsharing li .socialicon {
        padding: 8px 20px;
}
</style>

<div class="bg-gray-dark text-white">
    {% if videoEmbed != '' %}
		    {{ videoEmbed }}
    {% endif %}
    <div class="shell flush">
        <h3 class="h3 push-half-bottom">{{ Item.Title }}</h3>

        <p class="sans-serif stronger letter-spacing-condensed text-uppercase text-gray push-half-bottom">
            <strong>{{ Item.StartDateTime | Date:'M/d/yyyy' }} - {{ Item | Attribute:'Speaker' }}</strong>
        </p>

        <p>{{ Item.Content }}</p>

        <ul class="socialsharing">
            <li>
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ 'Global' | Page:'Url' | EscapeDataString }}" class="socialicon socialicon-facebook" title="" target="_blank" data-original-title="Share via Facebook">
                    <i class="fa fa-fw fa-facebook"></i>
                </a>
            </li>
            <li>
                <a href="https://twitter.com/intent/tweet?text={{ 'Global' | Page:'Url' | EscapeDataString }}" class="socialicon socialicon-twitter" title="" data-original-title="Share via Twitter">
                    <i class="fa fa-fw fa-twitter"></i>
                </a>
            </li>
            <li>
                <a href="mailto:?subject={{ Item.Title | EscapeDataString }}&body={{ 'Global' | Page:'Url' }}"  class="socialicon socialicon-email" title="" data-original-title="Share via Email">
                    <i class="fa fa-fw fa-envelope-o"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

Back to the app. I wanted to provide a more complete guide, so these steps will get you a main watch page. From there, users can tap "Watch Now" and get to your latest message.

In your Rock Mobile app, add another new Layout called "Scrollable Content" and a decription "Main layout for most content".
Add the code below

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:Rock="clr-namespace:Rock.Mobile.Cms;assembly=Rock.Mobile"
             xmlns:Common="clr-namespace:Rock.Mobile.Common;assembly=Rock.Mobile.Common">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout StyleClass="bg-white"
                Spacing="0">
                <Rock:Zone ZoneName="Main" />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Click Save
Go to the Pages tab and create a new page.
Give it a name like "Watch"
Choose Scrollable Content for the Layout
Hit Save
Drag a new Content block into the Main section and click the gear icon.
Add the code below. This code will display your latest message and the buttons. You will have to make sure you add the appropriate content channel attributes to your channel type in order to use them.

<StackLayout>

    <StackLayout>

        {%- contentchannelitem where:'ContentChannelId == 5 && StartDateTime < "{{ 'Now' | Date }}"' sort:'StartDateTime desc' limit:'1' iterator:'messages' -%}
        {%- for message in messages -%}
            {% assign messageImage = message | Attribute:'SocialImage' %}
            {% assign messageSeries = message.ParentItems | First | Property:'ContentChannelItem' %}
            {%- assign messageDate = message.StartDateTime | Date:'M/d/yyyy' -%}
            {%- assign seriesTitle = messageSeries.Title -%}
            {%- assign seriesImage = messageSeries | Attribute:'SeriesImage' -%}
            {%- assign audioLink = message | Attribute:'AudioLink','RawValue' -%}
            {% assign noteItem = '' %}
            {% for childItem in message.ChildItems %}
                {% if childItem.ChildContentChannelItem.ContentChannelTypeId == 12 %}
                    {% assign noteItem = childItem.ChildContentChannelItem %}
                {% endif %}
            {% endfor %}

            <Frame CornerRadius="0"
                Padding="0"
                HasShadow="True"
                BackgroundColor="#343434">
                <StackLayout StyleClass="section-dark">
                    <Image Source="{{ 'Global' | Attribute:'PublicApplicationRoot' }}{{ messageImage }}" 
                        Aspect="AspectFill" />
                    <Label Text="LATEST MESSAGE"
                        FontSize="30"
                        StyleClass="pl-24, pt-24" />
                    <Label Text="{{ message.Title | Upcase | Escape }}"
                        StyleClass="pl-24"
                        FontSize="Large"
                        FontAttributes="Bold" />
                    <Label Text="{{ messageDate }} - {{ message | Attribute:'Speaker' | Upcase | Escape }}"
                        StyleClass="pl-24, mb-24, color-gray"
                        FontSize="Large"
                        FontAttributes="Bold" />
                        
                <Grid ColumnSpacing="12" RowSpacing="12" StyleClass="px-24" MarginBottom="-24">
                        
                    {% capture urlEnd %}{{ message.Id }}{% endcapture %}
                    <Button Text="WATCH NOW"
                        StyleClass="btn,btn-primary"
                        Grid.Row="0"
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
                        Command="{Binding PushPage}">
                        <Button.CommandParameter>
                            <Rock:PushPageParameters PageGuid="695123cd-a838-406f-82b2-fe67446c7fb2">
                                <Rock:Parameter Name="Id" Value="{{ urlEnd | UrlEncode }}" />
                                <Rock:Parameter Name="IsAutoplay" Value="True" />
                            </Rock:PushPageParameters>
                        </Button.CommandParameter>
                    </Button>
                    {% if noteItem != '' %}
                    <Button Text="TAKE NOTES"
                        StyleClass="btn,btn-primary"
                        Grid.Row="1"
                        Grid.Column="0"
                        Command="{Binding PushPage}">
                        <Button.CommandParameter>
                            <Rock:PushPageParameters PageGuid="5d388212-b134-4680-96ef-f906db20e36e">
                                <Rock:Parameter Name="Id" Value="{{ message.Id }}" />
                                <Rock:Parameter Name="ItemGuid" Value="{{ noteItem.Guid }}" />
                            </Rock:PushPageParameters>
                        </Button.CommandParameter>
                    </Button>
                    <Button Text="LISTEN"
                        StyleClass="btn,btn-primary"
                        Grid.Row="1"
                        Grid.Column="1"
                        Command="{Binding PushPage}">
                        <Button.CommandParameter>
                            <Rock:PushPageParameters PageGuid="f8df3887-34da-46e3-aa75-e26bdfe84754">
                                <Rock:Parameter Name="Id" Value="{{ message.Id }}" />
                                <Rock:Parameter Name="IsAutoplay" Value="True" />
                            </Rock:PushPageParameters>
                        </Button.CommandParameter>
                    </Button>
                    {% else %}
                    <Button Text="LISTEN"
                        StyleClass="btn,btn-primary"
                        Grid.Row="1"
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
                        Command="{Binding PushPage}">
                        <Button.CommandParameter>
                            <Rock:PushPageParameters PageGuid="f8df3887-34da-46e3-aa75-e26bdfe84754">
                                <Rock:Parameter Name="Id" Value="{{ message.Id }}" />
                                <Rock:Parameter Name="IsAutoplay" Value="True" />
                            </Rock:PushPageParameters>
                        </Button.CommandParameter>
                    </Button>
                    {% endif %}
                    
                </Grid>
                    
                </StackLayout>
            </Frame>

        {%- endfor -%}
        {%- endcontentchannelitem -%}

    </StackLayout>
</StackLayout>

Check Rock Entity and choose Yes under Dynamic Content.
Under Mobile Settings, check the following:

Process Lava on Server
Show On Phone
Show On Tablet
Requires Network

Hit Save

Lets create the Message page!

Add a new page and select your new Webview layout.
Hit Save
Drag a Content Channel Item View Block onto the page.
Paste the following code into the block.

<StackLayout>

    {% assign urlEnd = PageParameter.Id | UrlDecode %}
    
    {% assign fullMessageLink = Item | Attribute:'FullMessageLink' %}
    {% assign audioLink = Item | Attribute:'AudioLink','RawValue' %}
    
    <StackLayout StyleClass="section-dark">
        <Rock:WebView Source="https://victorycc.life/mediaplayer/{{ urlEnd | Escape }}" />

        <Grid ColumnSpacing="12" RowSpacing="12" StyleClass="px-24,mb-16">
            
            <Button Text="WATCH FULL SERVICE"
                StyleClass="btn,btn-primary"
                Padding="32"
                Grid.Row="0"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Command="{Binding PushPage}">
                <Button.CommandParameter>
                    <Rock:PushPageParameters PageGuid="1ee18b7c-57b2-4352-9326-e917aa32a4d8">
                        <Rock:Parameter Name="Id" Value="{{ fullMessageLink }}" />
                        <Rock:Parameter Name="IsAutoplay" Value="True" />
                    </Rock:PushPageParameters>
                </Button.CommandParameter>
            </Button>
            
            {%- contentchannelitem where:'ContentChannelId == 5 && StartDateTime < "{{ 'Now' | Date }}"' sort:'StartDateTime desc' limit:'1' iterator:'messages' -%}
            {%- for message in messages -%}
                {% assign noteItem = '' %}
                {% for childItem in Item.ChildItems %}
                    {% if childItem.ChildContentChannelItem.ContentChannelTypeId == 12 %}
                        {% assign noteItem = childItem.ChildContentChannelItem %}
                    {% endif %}
                {% endfor %}
            {% capture fullEnd %}{{ message.Id }}{% endcapture %}
            
            {% if noteItem != '' %}
            <Button Text="TAKE NOTES"
                StyleClass="btn,btn-primary"
                Grid.Row="1"
                Grid.Column="0"
                Command="{Binding PushPage}">
                <Button.CommandParameter>
                    <Rock:PushPageParameters PageGuid="5d388212-b134-4680-96ef-f906db20e36e">
                        <Rock:Parameter Name="ItemGuid" Value="{{ noteItem.Guid }}" />
                    </Rock:PushPageParameters>
                </Button.CommandParameter>
            </Button>
            {% endif %}
            <Button Text="LISTEN"
                StyleClass="btn,btn-primary"
                Grid.Row="1"
                Grid.Column="1"
                Command="{Binding PushPage}">
                <Button.CommandParameter>
                    <Rock:PushPageParameters PageGuid="f8df3887-34da-46e3-aa75-e26bdfe84754">
                        <Rock:Parameter Name="Guid" Value="{{ Item.Guid }}" />
                        <Rock:Parameter Name="IsAutoplay" Value="True" />
                    </Rock:PushPageParameters>
                </Button.CommandParameter>
            </Button>
            {%- endfor -%}
            {%- endcontentchannelitem -%}    
        </Grid>
    
    </StackLayout>

</StackLayout>

Check Rock Entity and Select your content channel where your messages are saved.
Under Mobile Settings, check the following:

Process Lava on Server
Show On Phone
Show On Tablet
Requires Network

Hit Save

You made it!

As always, if this doesn't work or you have any questions at all, please let me know in RocketChat or the comments below and I will do my best to fix and/or explain!

Recipe

YouTube in Rock Mobile

YouTube in Rock Mobile

Here we go...

SPOILER ALERT

You made it!

Login to add a comment...