Webyoutu Getting Started

Getting Started

How does it work?

Webyoutu will bring a smarter way to reach your audience. If you own a Youtube channel with thousands of views, with Webyoutu, you can let your audience know that you are bringing a lot of interesting and useful things that are only available on the channel into your own application. They can absolutely use Android or IOS to download and not miss anything from your channel.

Additionally, if your YouTube channel is or is not eligible to enable monetization on Youtube, you can enable the Admob advertising function and earn money from in-app views. In-app web view helps you get products or services from your website in front of your audience and increase your business revenue.

So! How it works?

1/With Manager:

Integrate your channel code, playlists, short video playlists, and website into the app. You still use your Youtube Channel to post new videos, schedule new broadcasts, and monitor channel activity as usual. All your videos will be integrated into the application via API (Youtube Data API V3).

To limit API call abuse and save on Quota (A unit that Google uses to measure and limit API calls), Webyoutu requires you to link and use Firebase’s Cloud Firestore to store call data. Changing data when there are changes or new additions at Youtube can also be done automatically in 2 ways. I will talk about these two ways in the following section.

2/With Users:

They just need to download the app from the App Store or Google Play, they can receive new notifications when you have a broadcast schedule or post a new video. Of course it depends on their privacy. Users can watch all the videos on the playlists you provide, search only videos on your channel, watch short videos, watch you live, visit your website in the app…

Users need to log in to their Google account. If the account has opened a Youtube channel, some of their information like channel name and avatar will be displayed. To watch broadcast videos, the user’s account must be eligible and have live streaming enabled (It’s YouTube’s policy). User credentials are stored at Firebase Authentication.

Important notes!

1/ Documentation

Please read the document carefully and follow each step. If you skip any steps, the app may not work. The Features and Files section guides you through further customization of the App and provides relevant information to help you understand and customize the app to your liking.

2/Code integration on Android and iOS

With Android: Check the AndroidManifest.xml file at android >> app >> src >> main >> AndroidManifest.xml and remove the permissions if you don’t need them when you release the app.

With IOS: If you intend to delete the Podfile file at ios >> Podfile to rebuild. Copy and paste the following code into the new file after rebuilding.

Visit Firestore’s documentation to learn how to use this code.

3/ Subscription and get notification in app

Users can Subscribe to your channel on the application, however if they want to unsubscribe, they must do so directly on Youtube.

Users can receive or not receive push notifications on the application completely independently of Youtube, meaning that if the user turns on notifications on the application, even if they turn off notifications on Youtube, it will not be affected.

Important: The notification mechanism works as follows: If you post a new video or schedule a new broadcast, the search API is called and their information is stored in Firestore when a change is detected in Firestore (collection([‘newVideoId’])), then the notification will be triggered and the user will receive it. But now the app is working semi-automatically, you need to use notification service like Firebase Messenger etc. Helps automate notifications.

If you can create an endpoint for the pubsubhubbub webhook, replace the current notification mechanism for a better user experience.

4/ Create an endpoint for the pubsubhubbub webhook

This is important so that users can receive notifications and your application can promptly update changes from your Youtube channel and save Quota. However, it only helps you promptly update newly posted videos, you still need to store data and update other resources.

Limit saving or account upgrading solutions need to be implemented when there are too many users. Don’t worry, having a lot of users is a good sign and package upgrades are no longer a problem.

We couldn’t find the endpoint server so in the current release we’ve saved resources and kept the app running smoothly by scheduling API calls periodically for 2 hours, 4 hours, and 10 hours. That’s a temporary solution, we’ll try to fix it in future updates.

5/Publish the app to the app store

For copyright reasons and to comply with app store policies, you need to change the Youtube Logo on Appbar with your logo and should not use Youtube keywords in the app content.

Modify Webyoutu package.

Change package name

1/ Open app in Android Studio

To modify the required settings for your application, you need to open it in Android Studio or VSCode.
Open Android Studio or VSCode on your device.
Then, click on Open to open an existing project.
Choose the webyoutu directory and open it. It is located at download package >> Mainfile >> webyoutu.

2/ Get Flutter packages

Open Terminal frome bottom menu bar and it will open the root folder op the application.
Then, in the Terminal, enter the following command and press Enter

flutter pub get

This will get the dependencies for the application. (Make sure that you are conneted to the internet)

3/ Rename the package

All the application published on the app Apps must have a unique Bundle ID and App Name. In this step, you will change the applications’s display name and bundle id.

Bundle id is a unique name given to every application which helps app Apps to disinguish between different applications.

For example: “com.example.webyoutu”

App Name is the name display on the mobile phone below app icon. It can any name like “My App”.

You need to change both of these before building and uploading your application to the app Apps by following the steps below. (recommended)

Replace all package name in files:

Choose Replace in file on top menu bar >> edit >> find >> replace in file or you can press Ctrl + Shift + R (command + shift + R for MacOs).
Enter the old package Id and the new package id in the 2 form fields.
Choose Replace All

You can find the old package id in AndroidManifest.xml file. It located at Android >> app >> src >> main >> AndroidManifest.xml

You need to come up with a new package id for yourself that is unique and not duplicated by anyone else.

Please check your project in Android >> app >> src >> main >> kotlin >> com >> elsyenjoy >> webyoutu. If the 3 folders name is com >> elsyenjoy >> webyoutu do not match your Bundle Id (as shown below). Let’s change them.
Right click to the folder >> choose Refactor >> Rename (recommended). Then, rename the folder name to match the bundle id.
In the replace in file window, enter the old Bundle Id at the top. Next, enter your new Bundle Id at the bottom the same as the Bundle Id you replaced in the previous step.
Note: If you set the bundle id of the iOS app to be different from the bundle id of the Android app. You have to do the bundle ID replacement manually.

4/ Change App Name:

With Android app: Open AndroidManifest.xml files, and change following code:

From

<application
    android:label="Webyoutu"
    ......

Change to

<application
    android:label="Your App Name"
    ......

Replace ‘Your App Name’ to your app name.

With IOS app: Open Info.plist files. It is located at ios >> Runner >> Info.plist. Find and change the following code:

From

<key>CFBundleDisplayName</key>
<string>Webyoutu</string>

Change to

<key>CFBundleDisplayName</key>
<string>Your App Name</string>

Replace ‘Your App Name’ to your app name.

And now, open Terminal and run the commands below one by one.

flutter clean

flutter pub get

Change app icon

1/ App icon

In this section we will see how we can change the app’s launcher icon. To change the app launcher icon, you need an icon to replace it with.

Demensions: 1024 x 1024 px
Format: jpg or png

Caution: For iOS apps, icons are not allowed to have an alpha channel, that’s Apple’s general rule. Meaning you can’t use png images without background. You can follow the instructions below to fix this problem, but the icon on iOS won’t look good. We recommend using images with a background.

Change the default launcher icon

Rename icon image to app-icon
Replace / Place the icon created with the already present in the following path: assets >> images >> app-icon.png

You will also need to update the value in `pubspec.yaml` file if you use a different icon file name. It is the code below:

flutter_icons:
  android: true
  ios: true
  remove_alpha_ios: true
  image_path: "assets/images/app-icon.png"

In the terminal run the following commands from the root folder:pubspec.

flutter pub run flutter_launcher_icons:main

2/ Appbar icon

To change the Appbar icon, you need an icon to replace it with:

Demensions: Any size with max height <= 178px.
Format: jpg or png
file name: yt-logo

Replace / Place the icon created with the already present in the following path: assets >> images >> yt-logo.png.

If you use the difference image file name or type. You will also need to update the value in `appbar.dart` file. It is located in lib >> elements >> appbar.dart

As follow:

leading: Padding(
  padding: const EdgeInsets.all(8.0),
  child: IconButton(
    icon: Image.asset(
        'assets/images/yt-logo.png',
    ),
    onPressed: () {

    },
  ),
),

3/ splash screen icon

To change the Appbar icon, you need an icon to replace it with:

Demensions: Any size.
Format: jpg or png
file name: splash-screen-logo

Replace / Place the icon created with the already present in the following path: assets >> images >> splash-screen-logo.png.

If you use the difference image file name or type. You will also need to update the value in `string_key_and_code.dart` file. It is located in lib >> elements >> string_key_and_code.dart

As follow:

static String splashScreenPhoto = 'assets/images/splash-screen-logo.png';

Change app style

1/ App color

If you want to change the color of your app, update the color code value of the ‘colors.dart‘ file. It is located in lib >> style >> colors.dart.

Note: These colors will be used directly in light mode or dark mode. If you change the color, choose one that matches your current style. That means light colors will replace light colors and dark colors will replace dark colors. In addition, they can also be used directly in the interface without going through theme mode

2/ App font style and font size

If you want to change the font style and font size of your app, update value of the ‘text_font.dart‘ file. It is located in lib >> style >> text_font.dart.

Setup API And Firebase

Firebase SDK Integration

1/ Create Firebase and integrated into the app

Visit Firebase home page and sign in / sign up your account (use Google account).
Then, in the header of the Firebase home page, click go to console, you will redirect to the Firebase dashboard.
Select your existing project or add a new project. To create a new project, enter your project name and check the boxes to agree to Firebase’s terms. The difference option is the default.
After successfully creating the project, you will be taken to the project management interface. Here, we will create respective projects for Android and iOS.

a) For Android SDK, click the Android icon in your project page to add Firebase to your Android app.

Although the Debug Signing Certificate SHA-1 field is not required. However, for the project to work properly and avoid errors, you need to provide the SHA-1 code of your app. To get the SHA-1 code, open Terminal and run the following code:

For Window

./gradlew signingReport

If not, try again with this code:

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

or check issue here!

For Mac

webyoutu % keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Download and replace the config file

Download ‘google-services.json‘ file and replace the existing file in app package. It is located at android >> app >> google-services.json

Complete this step, 2 last steps you just need to select Next and Continue. So you’ve integrated the Firebase SDK into your Android App.

b) For IOS SDK, click the IOS icon or Add App button in your project page to add Firebase to your IOS app.

The App Store Id field can be blank and can be added to this field when you release the app.

Download and replace the config file

Download ‘GoogleService-info.plist‘ file and replace this file in Webyoutu package. It is located at ios >> Runner >> GoogleService-Info.plist.

Complete this step, 3 last steps you just need to select Next and Continue. So you’ve integrated the Firebase SDK into your IOS App.

Authentication and cloud Firestore

1/Create Firebase Authentication (FA)

FA is a feature that creates a list of stored and reported information for users who sign in to your app with their Google account.

In your Firebase project page, click to select the Authentication menu in the left Navigation Menu
Press ‘Get started‘ button to create sign-in method.

3. In the list of sign-in methods. Choose the Google method to continue.

4. In sign-in methods options page, slide the button to enable the method and fill in your custom project name and support email. Then, press the ‘Save’ button and press the ‘Done’ button to complete this step.

2/Create Firebase cloud Firestore (FCF)

Cloud Firestore is a Database that stores data in Json format. We need to use Cloud Firestore to store called API data for use throughout the application to save Quota.

To create cloud Firestore, click Build >> Firestore Database in left Navigation menu.
Select ‘Create database‘ button to continue.

3. In database creation wizard, keep default option. You just need to click the ‘Next‘ and ‘Create‘ buttons.

4. After successfully creating the database, access the database through the left menu. Select the ‘Rules‘ tab and edit as follows:

From:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

Chang to:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Learn more about using the Firestore cloud here!

3/Integrate the Firebase CLI.

To use Firebase, you need to install the Firebase CLI on your device and integrate it into your Flutter project.
How to install Firebase CLI you can to visit Firebase CLI docs!

To integrate Firebase CLI to your the Flutter Project, open terminal and run following code:

flutterfire configure

Select existing project, which you just created in the previous section.

Then, select all operating system platforms and Enter. When asked if you want to overwrite the existing file, you need to select yes to overwrite.

Firebase Cloud Messaging (FCM)

It will help you create notifications to send to users. Every time you post a new video to Youtube, create a notification here for all your users to find and watch the video.

To create FCM, in your Firebase project dashboard, find and select Messaging menu in the left menu sidebar.
Select Create Your First Campaign button and select Firebase Notification Message in the modal box.

To create your message and send to users, You just need to fill in the necessary information in FCM’s Compose notification form

Note: To send your notification to Ios app, you need provide APNs certificate in the cloud messaging setting.

At your Firebase project dashboard, select Project Overview >> Project setting >> cloud messaging tab.

In Apple App Configuration section, choose IOS app and upload your APNs certificate

Create Youtube data API

1/ First, use your Firebase to automatically create a Google Cloud Platform (GCP) project. You can use the link below to get started.

https://console.developers.google.com/apis/api/youtube.googleapis.com/overview?project=[Firebase Project Number]

Example: https://console.developers.google.com/apis/api/youtube.googleapis.com/overview?project=975564820624

You can get Firebase project number in Project setting >> General

Note: after accessing the correct link, GCP will automatically create the project with your Firebase project, running the link with the correct google account with which you created Firebase.

2/ Create youtube data API: In GCP console with your project page selected, fill in ‘Youtube’ keywork to search form and select Youtube data Api V3.

Then, click ‘Enable‘ button to enable this API and redirect to Youtube Data API management page.

In this page, select ‘Credentials‘ menu on the left Menu. When you create a project using Firebase. You will automatically generate an Oauth 2.0 API and id.

Click on key name and edit the API restrictions. You must do this on all 3 keys.

But you don’t need to use these API keys. We will use the Firebase Web API Key to replace the Youtube Data API key.

Open ‘string_key_and_code.dart‘ file, it is located at lib >> elements >> string_key_and_code.dart. Replace Api key in folowing code to your Firebase Web API Key.

static const String youtubeAPIKey = 'AIzaSyBd3cQQYRU8YCIYvBTBu-ZNZKKtJz4mpTY';

You can get Firebase Web API Key in Firebase setting >> General

3/ Declare the Oauth 2.0 Id for the GoogleService-Info.plist file, which is the file we added in the step of creating the iOS Firebase SDK and integrating it into the app.

Go to your project in Google Cloud Platform, at Credentials page, get CLIENT_ID and REVERSED_CLIENT_ID and ANDROID_CLIENT_ID respectively as follow:

Then, Open GoogleService-Info.plist (at ios >> Runner >> GoogleService-Info.plist).
Copy and replace the code below with the code you just got.
Add them to the GoogleService-Info.plist file.

<key>CLIENT_ID</key>

<string>Your_Client_Id</string>

<key>REVERSED_CLIENT_ID</key>

<string>Your_Ios_Url_Scheme</string>

<key>ANDROID_CLIENT_ID</key>

<string>Your_Android_Client_Id</string>

Don’t foget to replace the your_Client_Id, Your_Ios_Url_Scheme and Your_Android_Client_Id with your key.

Next, open the Info.plist file (at ios >> Runner >> Info.plist) and find the following code and replace your client key as in the previous step.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.elsyenjoy.webyoutu</string>
        </array>
    </dict>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>Your_Ios_Url_Scheme</string>
        </array>
    </dict>
</array>
<key>GIDClientID</key>
<string>Your_Client_Id</string>

Don’t foget to replace the your_Client_Id, Your_Ios_Url_Scheme and com.elsyenjoy.webyoutu with your key.

Get Id in the Youtube

Now we will integrate Youtube ids such as channel id, playlist id,…

1/Change channel id.

Go to Youtube.com and login your Youtube account.
In the left Youtube Sidebar, find and select ‘Your Channel’ from the list.
Copy your channel id in the URL on the page’s address. It’s after youtube.com/channel/

https://www.youtube.com/channel/UCHyjZYuPbPvtwqF4vF2XREQ

If the URL is ‘https://www.youtube.com/@username‘ then do a google search and look for a conversion tool to convert to channel id.

Then, replace Youtube channel id in ‘string_key_and_code.dart‘ file (at lib >> elements >> string_key_and_code.dart). Current code below:

static const String youtubeChannelId = 'UC6rGvk2UWJ_XekEETLvykkg';

2/Change playlist ids.

There are 2 types of playlist ids: User-created playlists. With this playlist, users will divide their videos according to the topic they desire. The other is Upload Playlist, this is Youtube’s general Playlist, all videos posted by users will be included in this Playlist. You can call it ‘List of Uploaded Videos‘.

a. get and replace playlist ids.

Currently, Webyoutu only supports displaying 5 playlists. If you want to add more playlists, please edit the code, it will be described in detail in the Home and multiple playlists section.

To get the playlist Id, go to youtube.com and login to your Youtube account. Int he left menu Sidebar, select ‘Playlists‘ menu from list.
Then, select the playlist which you want to display in app.
Copy playlist id in the URL on the page’s address. it’s after ‘list=’.

https://www.youtube.com/watch?v=ij-isyViD0U&list=PLeKsFPgB9Lri40FyC9AAW40LG_txPK4gf

Then, replace playlist id in ‘string_key_and_code.dart‘ file (at lib >> elements >>string_key_and_code.dart). And enter your playlist name, wich will be displayed to the user. Current code below:

static const String firstPlaylist = 'PLYmiyLko1UEjkhAgRect2aIKadJllAL0s';

static const String firstPlaylistTitle = 'Playlist Name 1';

Note: firstPlaylist variable is required. If you want to add more playlists like secondPlaylist, thirdPlaylist, fourPlaylist, fifthPlaylist.

Get the playlist id similar to the previous method.
Enter the corresponding playlist name
And change the value of the numberOfPlaylist variable to the number corresponding to the number of playlists you added. Currently, its value is from 1 to 5.

static const int numberOfPlaylist = 1;

b. Short videos

With Short Videos, you should post them to a separate playlist. When displaying on the app, we also use this playlist id to display short videos. The way to get the playlist id is similar to the previous method. Please replace the following playlist id at ‘string_key_and_code.dart‘.

static const String shortVideoPlaylistId = 'PLYmiyLko1UEgDUyTDt7ERdxZO_HZpY7wt';

c. List of uploaded videos

If you add this playlist id to the ‘firstPlaylist’ variable, your homepage will show all the videos on your channel, including short videos. In Webyoutu, we need this playlist to complete the video search feature and distinguish newly posted videos.

This playlist id is usually not visible to users, to get it, we have 2 ways.
Method 1: from the channel id, we change the second character “C” in the string to the character “U” as follows:

From:

UC6rGvk2UWJ_XekEETLvykkg

Chang to:

UU6rGvk2UWJ_XekEETLvykkg

In some cases, this method is not effective, you must use the second method below. Please check your newly found upload playlist Id by visiting the URL https://www.youtube.com/watch?v=&list=YourPlayList. If the right side of the player has a list of your videos then that is the correct playlist id. Don’t forget to change YourPlaylist to the Upload Playlist Id which you just found.

Method 1: Open ‘data_api_extraction.dart‘ file. It is located at ‘lib >> data_api_extraction.dart‘. Then, in ‘loadChannelInfo()‘ function, uncomment the following code:

From:

//Enable here to get upload playlist id
//print('upload playlist id is: ${channelInfo.items![0].contentDetails!.relatedPlaylists.uploads}');

Change to:

//Enable here to get upload playlist id
print('upload playlist id is: ${channelInfo.items![0].contentDetails!.relatedPlaylists.uploads}');

Run the test app, you will see the upload playlist Id printed in the debug message.

3/Run app and complete.

Run the test application and check for errors. If you have followed the instructions until now your app should work just like the demo. If you want to customize your own style and add important features. Refer to the Features and Files section for internal details and custom solutions.

Open Terminal and run:

flutter pub run

Features And Files

Home and mutiple playlists

1/ Created files

home_screen.dart: Call the Api to get a list of videos by playlist list. Generate a list of video ids from the playlist and call each video’s details using the API. Added pull to refresh feature at the top of the page. Playlist display layout.
appbar.dart: Show appbar layout.
playlist_item.dart: Show list of videos in the playlist.
string_key_and_code.dart: Change the number of playlists, playlist name and playlist id.
video_properties.dart: AzVideoProperties object with the list of playlist id and playlist name.
video_time_publish.dart: Function to convert video posting time and display previous time period. For example. 2 days before. Function to convert time format from ISO8601 to HH:mm:ss for video countdown duration. And the function reduces the numbers 1,000 to 1K and 1,000,000 to 1M.

2/ Features

After Splash Screen, the Home page will be the first display screen. Here will display a list of videos in the playlist. If only 1 playlist is visible, the Button Tabbar will be hidden, and if you have more than 1 playlist enabled, it will appear right at the top of the Home screen, below the Appbar. If you want to add more playlists, follow these instructions:

open string_key_and_code.dart files, change the value of numberOfPlaylist variable to number of playlist you want to add.
Add more variables for playlist id and playlist name.
Example: static String sixthPlaylist = ‘playlist_id’; static String sixthPlaylistTitle = ‘Playlist Name’;
Go to your Youtube Channel and copy your Playlist Id and replace to sixthPlaylist variable value.

4. Open video_properties.dart file (at lib >> video_properties.dart). Then add the created variables to the list.

The API will be called and the videos in the list will be displayed, all videos are stored in Firestore, only 10 videos will be displayed, if you keep scrolling the page will display 10 more videos until all are gone videos in the playlist. . The list will automatically update once a day to update new videos and changes from YouTube.

Short video

1/ Created files

video_short_screen.dart: Get video list from short video playlsit id, and get details of short video. Show appbar layout.
video_short_items.dart: Show short video player, this page layout.
short_video_button.dart: Create short screen button and add features such as, like, share, comment, subscribe to channels.
string_key_and_code.dart: Change the playlist name and playlist id.
video_time_publish.dart: Function to convert video posting time and display previous time period. For example. 2 days before. Function to convert time format from ISO8601 to HH:mm:ss for video countdown duration. And the function reduces the numbers 1,000 to 1K and 1,000,000 to 1M.

2/ Features

Change the short video Playlist id and playlist name in the shortVideoPlaylistId and shortVideoPlaylistTitle variables in the string_key_and_code.dart file

Show videos in short video playlists. The default ad display event is that every 3 videos will have an ad, customized in the onReady function of the YoutubePlayer widget. With comment feature, this page use the comment form and comment files of video player screen.

Note: The video like and comment feature will take up a lot of Quota, please consider using this feature.

Video player screen

1/ Created files

video_player_screen.dart: Checks if the user is logged in, then displays video likes, dislikes, and channel subscription status. From the transmitted videoId, the corresponding video will be played. And shows the layout of the video playback page.
video_player_button.dart: Create video button with like, dislike, share, return button.
comment_video.dart: Get video comments list and comment details list, store it to the Firestore. Display list of video comments.
comment_form.dart: Show alert dialog with comment form.
comment_item.dart: Check the comment owner, showing the layout of each comment.
comment_button.dart: Create button for comment item, there are 3 button like: like comment, dislike comment and reply.
comment_screen.dart: Display the comment and list of reply of comment.
your_comment_provider.dart: Functions for adding, editing, deleting, and storing comments are created in this file.
video_time_publish.dart: Function to convert video posting time and display previous time period. For example. 2 days before. Function to convert time format from ISO8601 to HH:mm:ss for video countdown duration. And the function reduces the numbers 1,000 to 1K and 1,000,000 to 1M.

2/ Features

When opened, the video will automatically load and play, minimalistic video controller, if you want to use a video controller like on Youtube, design it in the interface layout and listen for events at YoutubePlayerController( ).addListennet(listenner);

The ad will be display at the end of video. In onEnded function of YoutubePlayer widget.

To like, dislike, comment and subscribe the channel, Webyoutu will require user to login to their account. In the comment list, if the comment belongs to the currently logged in account, there will be a button to edit and delete that comment.

Note: The video like and comment feature will take up a lot of Quota, please consider using this feature.

In the comment form, if it is new comment, the button text and its function is comment.If it is reply the comment, the button text and function is the reply, and otherwise, it is edit comment.

Currently, like and dislike comment function is not supported outside of Youtube.

Live stream screen

1/ Created files

live_stream_screen.dart: Check out the new broadcast schedule on the channel. If there is a video scheduled to play, the screen will show the countdown time and playback interface. If a broadcast is played, the broadcast video will play the broadcast video.
video_player_button.dart: Create video button with like, dislike, share, return button.
live_chat_models.dart: Live chat message list and input form.
live_chat_list.dart: Create live chat message Object.
video_time_publish.dart: Function to convert video posting time and display previous time period. For example. 2 days before. Function to convert time format from ISO8601 to HH:mm:ss for video countdown duration. And the function reduces the numbers 1,000 to 1K and 1,000,000 to 1M.
live_broadcast_list.dart: Create objects to process data returned from the live streaming API, then extract values and use in the UI.

2/ Features

To use the Livestream video viewing feature, you must log in to your Youtube account, this account must activate the Livestream feature on Youtube.

When the broadcast is played, every minute the api will be called to update the current video views. The live chat message list is also updated every 2 minutes to load new messages.

If you want to insert ads between your live streams, consider the MonetizationDetails feature at live_broadcasts_list.dart

Webview screen

1/ Created files

webview_screen.dart: Webview page layout.
webview_stack.dart: inappwebview features and webview contents.
string_key_and_code.dart: Appbar title, website Url and blocked url.

2/ Features

Displaying your website as a webview, you can sell more products to users through the website. Note: Do not embed on large, gambling or scam websites. This can affect your reputation and cause your app to not be published.

Notification

1/ Created files

notification_screen.dart: Checked the user’s login status. Show appbar. Shows the notification enable dialog and notification enable button. Create AzNotificationObject class. And call the messaging list.
notification_item.dart: The layout of the messaging.
main.dart: Initialize messaging, listen for events when push notifications are generated from Firebase Cloud Messaging.
drawer_stack_screen.dart: Initialize local notification, call the function to setup notification Item.
notification_service.dart: Function initializes FCM push messages, function initializes local Messaging, stream notification listener when Cloud Firestore changes.
notification_provoder.dart: Get new video status and broadcast status. Create local messages and message lists. Get, save delete and mark message.

2/ Features

Notifications are only created when a new video is posted or the author wants to send a notification to users via FCM. There is an advertising banner that will display at the top of the message list. You might also consider adding an interstitial ad when a user clicks on the notification.

When a user clicks on the notification, it will change to read status and the user will be redirected to the related video.

If opening the application for the first time, a notification dialog box will appear and the user must choose to agree or refuse to receive notifications. If the user declines and wants to re-enable notifications, the user needs to do so manually in the device’s settings.

The feature of sending push notifications in the background has not been tested on iOS, perhaps a few tweaks are needed for this feature to work properly on iOS. In the next updates, we will conduct testing on iOS.

Settings and drawer

1/ Created files

drawer_stack_screen.dart: Checked the user’s login status and get / renew user token. Stack other pages above the settings page. Create a slide feature to open the settings page.
drawer_sidebar.dart: The layout of the setting page. Set and get Language Data, Theme Mode data, GDPR status.
author_infomation.dart: Layout of the author section, top of the settings page.

2/ Features

This is the file that will be called after opening the application, before the home page, so some features when initializing the application will be created here instead of in the main.dart file. This page is the slider for the settings page and the pages above.

The screen width when opening this page is 288.

Because the sliding feature is used independently by the above pages, this page will not use the sliding feature but only opens and closes with a button.

In the author’s channel details there will be a button for users who want to register as members on Youtube, this button will redirect to this feature on YouTube. In updates, we will add a donate button here and on the video player page.

Multiple language

1/ Created files

main.dart: Set default language.
language_setting.dart: Language settings function and storing the most recently selected language.
l10n folder: List of translations and languages. Each .arb file is a different language, it is a json fragment that includes the default language (English) and corresponding translation sentence.
language.dart: Create language object and languages list.
drawer_sidebar.dart: get and set the most recently selected language. Display language setting section.
l10n.yaml: File that initializes links between files to create language translation features.

2/ Features

In this section are settings to change the language of the application. However, it and the channel’s language are different. Customize your app language to match your channel language for a better experience. To use the translation feature, use the string translate(context).yourText with yourText extracted from app_en.arb file.

Some strings outside the translated string list will be defined in the string_key_and_code.dart file. For example, the name of a playlist or the appbar title of a webview screen.

To add a new language (in this Docs, I. will use Spanish to guide you), do the following:

1. Open languages.dart file and add the new item to the list of languageList(). Example: languages (3, “Spanish”, “es”),.

From:

static List<Languages> languageList() {
  return <Languages>[
    Languages(1, 'English', 'en'),
    Languages(2, 'Tiếng Việt', 'vi'),
  ];
}

Change to:

static List<Languages> languageList() {
  return <Languages>[
    Languages(1, 'English', 'en'),
    Languages(2, 'Tiếng Việt', 'vi'),
    Languages(3, 'Spanish', 'es'),
  ];
}

2. Create new .arb file in l10n folder like: app_es.arb (Tip: you can duplicate app_vi.arb file for ease of use). Then, Translate the corresponding strings from English to Spanish.

3. Open language_setting.dart file and add settings for the new language. As follow:

//language code
const String english = 'en';
const String tiengViet = 'vi';
const String spanish = 'es';

......

Locale _locale(String languageCode) {
  switch(languageCode) {
    case english:
      return const Locale(english, 'US');
    case tiengViet:
      return const Locale(tiengViet, 'VI');
    case spanish:
      return const Locale(spanish, 'ES');
    default:
      return const Locale(english, 'US');
  }
}

4. Finally, open terminal and run the following command:

flutter pub get

Theme mode (dark / light)

1/ Created files

main.dart: Set default theme mode.
theme_mode_settings.dart: Theme settings function and storing the most recently selected language.
theme_provider.dart: Manage change events when theme mode settings change so the entire app updates at the same time.
drawer_sidebar.dart: Display theme mode button.
dark_light_button.dart: Theme mode button layout.
theme.dart: Set the corresponding color between light and dark mode, for example the background for light mode is white and the background for dark mode will be black

2/ Features

The above files will create the feature to change the theme mode between dark and light. To use light and dark settings, in the Color property we will use colorMode(context).background;, let’s change background text to the color you defined at theme.dart file.

For example: If you define the text color in light mode as secondary: white;, and dark mode as secondary: black;. When setting the color for the text, we will use colorMode(context).secondary;.

GDPR

1/ Created files

initialize_screen.dart: Enable GDPR floating notification when opening the app.
splash_screen.dart: After display splash screen logo, GDPR screen will be activated.
initialization_helper.dart: Event trigger to display a dialog about changes to GDPR and user settings.
drawer_sidebar.dart: Show the GDPR dialog again if the user wants to change their decision.

2/ Features

This feature is related to the policy when publishing apps containing ads in EU countries and the UK. Inside the app there are only steps to display and send options. To create GDPR content dialog, go to Google Admob Account >> privacy & messaging >> GDPR (or European regulations) and create your content. You should learn about how to use GDPR from sources on the internet.

In the settings page, the option to show the DGPR dialog again is hidden if you are outside the EU Region. If you want to test this feature, do the following:

Go to your Google Admob account and create the content of the GDPR dialog.
Open the string_key_and_code.dart file and change the values of the enableBannerAds and enableInterstitialAds variables to true.
If you are outside the EU region, Make your virtual device European by opening the initization_helper.dart file and editing the initialize() function as follows:

Future<FormError?> initialize() async {
  final completer = Completer<FormError?>();
  final params = ConsentRequestParameters(
    consentDebugSettings: ConsentDebugSettings(
      debugGeography: DebugGeography.debugGeographyEea
    )
  );
  ConsentInformation.instance.requestConsentInfoUpdate(params, () async {
    if(await ConsentInformation.instance.isConsentFormAvailable()) {
      await _loadConsentForm();
    } else {
      await _initialize();
    }
    completer.complete();
  }, (error) {
    completer.complete(error);
  });
  return completer.future;
}

Term and condition files

1/ Created files

drawer_sidebar.dart: Show Term and condition dialog and About us dialog.
about_us.pdf: The PDF file contains the about us dialog box in English.
gioi_thieu.pdf: The PDF file contains the about us dialog box in Vietnamese.
term_and_condition.pdf: The PDF file contains the Term and condition dialog box in English.
dieu_khoan_va_chinh_sach.pdf: The PDF file contains the Term and condition dialog box in Vietnamese.
pdf_view_dialog.dart: This function helps the application read PDF files.

2/ Features

We should create terms and policies when using the application and customers will have to agree to the policies you set. It is useful in protecting the rights and obligations between parties. An introduction page will also be essential if you want to build your brand stronger.

We will easily use pdf file creation software such as Word, Ai, PTS,… to create more beautiful and professional content for these files. A note for you is that the more languages the application has, the more different language versions you will have to create for the above files. You can also use common language but it will affect the visitor experience.

Search videos

1/ Created files

search_results_screen.dart: Show search form dialog and search results layout.
appbar.dart: Display search button.
data_api_extraction.dart: search videos function (searchVideos()).
video_time_publish.dart: The function converts all accented characters to unsigned characters.

2/ Features

Here’s how the search function works: When the user enters text, call a function to convert it to unsigned text. Then search in the title or description of the video integrated in the application. Call out the matches. And finally display them on the results page with the same layout as the homepage.

In the youtube data api v3 package, there is also a search function and is easier to use. However, it costs up to 100 quota per search, which is a huge usage. So we should not use this function.

Appbar

1/ Created files

appbar.dart: Appbar layout.

2/ Features

The Appbar will display above the app and only some screens. In the appbar we will integrate functions such as:

Display channel logo.
The share button will perform the function of sharing the application with others. If you publish an iOS app, you need to update the app download link in the iosAppUrl variable in the string_key_and_code.dart file.
The search button will perform a search for videos included in the application.
Settings button to open the settings screen.
The login button will display along with the user icon. If the logged in account does not have a pre-created YouTube channel, the Google account avatar will be displayed.

1/ Created files

login_logout_provider.dart: This file will contain the login function, logout function, user key storage function, user key refresh function and function to extract information on Youtube of the login account via API.
user_channel_info.dart: Initialize objects and transform the json returned by the api.
drawer_stack_screen.dart: If you have previously logged in and exit of the application. When you reopen the application, this file calls the silent login function to re-login the application and refresh the user key.
sign_in.dart: Show login dialog box.
sign_out.dart: Show logout dialog box.

2/ Features

Because this is a Youtube application, we need users to log in to use some features such as liking, disliking, subscribing, commenting and watching broadcasts, etc. So in the application we only use Google Sign In app, authenticates users, and stores it at Firebase Authentication.

User key is important in calling API from youtube data api. It expires after just 1 hour and needs to be renewed every time it expires.

Advertise and admob

1/ Created files

google_ads_helpers.dart: Advertising account authentication function via advertising id.
banner_ads.dart: Initialize the banner ad and its layout.
intertitial_ads.dart: Initialize the intertitial ad.
string_key_and_code.dart: Define variables for ad id.

2/ Features

The ids identified are test ad ids. When you publish your app, you need to replace these ids with the official advertising ids. In the app, we only create 2 types of ads: banner ads and interstitial ads. Here’s the order for replacing ad ids:

androidBannerAdKey: This variable represents the advertising id of the banner ad for the Android app.
androidIntertitialAdKey: This variable represents the advertising id of the intertitial ad for the Android app.
iosBannerAdKey: This variable represents the advertising id of the banner ad for the IOS app.
iosIntertitialAdKey: This variable represents the advertising id of the intertitial ad for the IOS app.

To show the ad for this app, open string_key_and_code.dart file, change the value of the enableBannerAds variable and enableIntertitialAds variable to “true” value.

Other files

service.dart: The functions here will call the API from Youtube Data Api and store it in Firestore or Cookie.

firebase_option.dart: This file is created when you install the Firebase CLI to your project.

data_api_extraction.dart: The function calls saved data from Firestore or Cookies after saving with the service.dart file. Then process the data and schedule API calls again to update.

src folder: Files in this directory will create objects to process data returned from the API, then extract values and use in the UI.

splash_screen.dart: Create a splash screen for the application.

nav_bottom_screen.dart: This file will create the bottom menu bar of the application. Although the Home page is the first visible page of the UI, it and other pages are called from this file. So this file will be the next file after drawer_stack_screen.dart is called.

Getting Started

How does it work?

So! How it works?

Important notes!

1/ Documentation

2/Code integration on Android and iOS

3/ Subscription and get notification in app

4/ Create an endpoint for the pubsubhubbub webhook

5/Publish the app to the app store

Modify Webyoutu package.

Change package name

2/ Get Flutter packages

3/ Rename the package

4/ Change App Name:

Change app icon

1/ App icon

2/ Appbar icon

3/ splash screen icon

Change app style

1/ App color

2/ App font style and font size

Setup API And Firebase

Firebase SDK Integration

1/ Create Firebase and integrated into the app

Authentication and cloud Firestore

1/Create Firebase Authentication (FA)

2/Create Firebase cloud Firestore (FCF)

3/Integrate the Firebase CLI.

Firebase Cloud Messaging (FCM)

Create Youtube data API

Get Id in the Youtube

1/Change channel id.

3/Run app and complete.

Features And Files

Home and mutiple playlists

1/ Created files

2/ Features

Short video

1/ Created files

2/ Features

Video player screen

1/ Created files

2/ Features

Live stream screen

1/ Created files

2/ Features

Webview screen

1/ Created files

2/ Features

Notification

1/ Created files

2/ Features

Settings and drawer

1/ Created files

2/ Features

Multiple language

1/ Created files

2/ Features

Theme mode (dark / light)

1/ Created files

2/ Features

GDPR

1/ Created files

2/ Features

Term and condition files

1/ Created files

2/ Features

Search videos

1/ Created files

2/ Features

Appbar

1/ Created files

2/ Features

Login and account

1/ Created files

2/ Features

Advertise and admob

1/ Created files

2/ Features

Other files