Build a video player Vue mobile app with firebase

Prerequisites

• Install NativeScript and set up the environment for building mobile apps.
• Create a Firebase project and set up the Firebase Realtime Database, Firebase Authentication and Google Cloud Storage.
• Install the nativescript-videoplayer and nativescript-plugin-firebase plugins in your project.

Step 1: Create the Firebase Database Schema

The first step is to create the schema for the Firebase Realtime Database, that will store all the data of the video lessons. Create a top-level node called "lessons" in your Firebase Realtime Database, and add several child nodes, each representing a single video lesson. Each lesson node should have several properties like title, url, and createdAt. The URLs of the video files are stored in this node, so that you can fetch it using the firebase query function.

- lessons
   - lessonId_1
      - title: "Lesson 1: Introduction to Vue.js"
      - url: "https://storage.googleapis.com/lessons/lesson1.mp4"
      - createdAt: 1609472439299
   - lessonId_2
      - title: "Lesson 2: Components in Vue.js"
      - url: "https://storage.googleapis.com/lessons/lesson2.mp4"
      - createdAt: 1609472749299
   - lessonId_3
      - title: "Lesson 3: Vuex and State Management"
      - url: "https://storage.googleapis.com/lessons/lesson3.mp4"
      - createdAt: 1609473059299

Step 2: Set up Firebase Rules

To ensure the security of your app, you should set up Firebase Rules that control read and write access to your database. You can set up rules that allow only authenticated users to access the video lessons. Here is an example of Firebase rules:

{
  "rules": {
    "lessons": {
      ".read": true,
      ".write": "auth != null",
      ".indexOn": ["createdAt"]
    }
  }
}

These rules ensure that:

• Anyone can read the data under the "lessons" node.
• Only authenticated users can write to the "lessons" node.
• Any query made on the "lessons" node will be indexed by "createdAt" property for sorting.

You can access your Firebase Realtime Database Rules by visiting the Firebase Console and then selecting your project, click on the "Database" menu and then select "Realtime Database" and then "Rules" tab You can set or update the rules by clicking on the "Publish" button after editing.

Step 3: Fetch the Video Lessons Data

Now that you have set up the Firebase Realtime Database, you can create a function that fetches the video lessons data from the database and stores it in a variable that you can access in your Vue component. You can use the firebase.query() function to fetch the data from the database.

import firebase from "nativescript-plugin-firebase";

export default {
    methods: {
        fetchLessons() {
            firebase.query((data) => {
                this.lessons = data.value;
            }, "/lessons", {
                singleEvent: true,
                orderBy: {
                    type: firebase.QueryOrderByType.CHILD,
                    value: "createdAt"
                }
            });
        },
    }
}

This function fetches the data from the "lessons" node in the Firebase Realtime Database and stores it in the "lessons" variable. You can call this function when the component is created so that the data is fetched as soon as the component is loaded.

Step 4: Play the Video Lessons

Once you have fetched the data of the video lessons, you can use the nativescript-videoplayer plugin to play the video. You can create a function that takes the index of the selected lesson as a parameter and plays the video using the playVideo() function of the nativescript-videoplayer plugin.

Here's an example of how you can play the video:

import * as platform from "tns-core-modules/platform";

export default {
  methods: {
    playLesson(args) {
      var videoUrl = this.lessons[args.index].url;
      if (platform.isAndroid) {
        var video = require("nativescript-videoplayer").Video;
        var videoPlayer = new video.TNSPlayer();
        videoPlayer.playVideo(videoUrl);
      } else if (platform.isIOS) {
        var AVPlayer = AVKit.AVPlayer;
        var playerViewController = AVKit.AVPlayerViewController;
        var player = new AVPlayer(videoUrl);
        var controller = new playerViewController();
        controller.player = player;
        this.$showModal(controller, {
          context: {},
          animated: true,
          fullscreen: true,
          stretched: true,
        });
      }
    }
  }
};

This function takes the index of the selected lesson as a parameter and then finds the corresponding video URL from the "lessons" array, and then plays the video using the playVideo() function of the nativescript-videoplayer plugin. It also checks the platform (iOS or Android) before playing the video, this is needed because the way to play video on these platforms is different.