Handling videos

In this app, I would like to handle videos a little differently than regular online education websites. In any other MOOC website, a lecture may have video content or may just be some text instructions, and the lecture may have some downloadable resources/links. In my online app, I would like to introduce a new concept - interactive videos.

Interactive videos are typically used in marketing when a company produces promotional videos for their products, and if they offer a range of products and services, the videos might also be quite a few. In such cases, they would make their videos interactive, where the user decides which products or services they are interested in, and only watch the promo videos relevant to that. This user feedback can be from various means - a simple table with choices asking the user to select the products they are interested in, or a little more graphic - for example, a sports company showing the photo of a famous sports person and clicking on different clothing or equipment can take the user to the relevant products.

The reason for trying to bring this into online education is that most students do not have time to study regularly. Some might find time only on weekends, while for others it may be just a couple of times a month. In such a case, coming back to a course after a week, and especially a course that is heavily technical, would mean they might have to go back and review some of the older lectures and re-watch previous videos. Here comes the need for interactivity - if every lecture is completely self-sufficient, and this implies if a lecture uses a certain number of concepts, and there is specific review material for all these prerequisites, then the student can watch every lecture without any need to go back and forth - just select the prerequisites that need to be refreshed before watching the lecture. As for the students who are regularly watching and do not need review, they can skip the refreshers and go on to watch the main lecture video.

To enable the above, the video content for lectures needs to be reviewed. Instead of having just a single video for a lecture, there can be many videos for a lecture - the main video and also the prerequisites. Moreover, videos themselves can be reused, especially the prerequisites, and this implies that a video can be present in many lectures. This points to a ManyToMany relationship between videos and lectures. Furthermore, to make the handling of file content efficient, it would be best to reduce the duplication of video files and potentially even make them unique. If you want to reuse a video from another lecture or even course, no need to upload it again - merely refer to it.

Therefore, to structure the VideoContent model, I have been making a number of commits. The first was to associate a VideoContent with a Lecture as a foreign key which implies a lecture can have many videos. Next, I thought it might be better to add reference to Course as foreign key which means a course can have many videos, and add a reference to Lecture as a ManyToMany field, which implies that a lecture can have many videos, and a video can belong to many videos. However, going further, it looks like the ManyToMany relationship between lectures and videos is better handled in the Lecture model rather than the VideoContent model. While uploading a video, all that is needed is a primary identifier - which course the video belongs to, as this will also help to store the video in a folder that resembles the course slug. The video of course will be uploaded when a lecture is created, and therefore, it will be added to the videos list. There can be only a single video, if the instructor does not want any interactivity, or there could be multiple videos. How these multiple videos need to be played in the lecture will be decided by a configuration table - something that will come soon.

After documentation

I spent the last couple of weeks learning how to document Python code as well as Angular and React projects. I figured this is best done when the project is in a nascent stage, so as to establish this as the baseline going forward.

 The best documentation experience was with Angular. I used Jsdoc to document the Typescript code, but for Angular, there is a package compodoc that produces an elegant web document. This is the typical documentation for a Angular component:

/**
 * Generates a container for the video player
 *
 * @param {number} width The width of the container (optional)
 * @param {number} height The height of the container (optional)
 * @returns A container for the video and controls
 *
 * @example
 * Without any inputs, container adjusts to browser window
 * 
 *
 * @example
 * With only width, container has fixed width and
 * aspect ratio of 16:9
 * 
 *
 * @example
 * With only height, container has fixed width and
 * aspect ratio of 16:9
 * 
 *
 */

After documenting all components and utility functions, I created a very basic config file for the documentation and saved it in tsconfig.doc.json:

{
  "include": ["src/**/*.ts"],
  "exclude": ["src/test.ts", "src/**/*.spec.ts", "src/app/file-to-exclude.ts"]
}

Running compodoc produces an entire directory of html files that depicts the entire app graphically.

 

Very impressed to see documentation arranged in such a visually appealing manner.

In comparison, documentation for the React app was with Jsdoc and another package better-docs which has a special addition for components. Though running jsdoc produces another directory with html files, the links are broken and navigation seems a bit jumpy.

For Python, I used almost a markdown approach. Classes are documented as this example:

    '''
    Base view for a course based on course URL

    Attributes
    -------------
    serializer_class : class
        CourseSerializer class
    user_model : class
        User class
    lookup_field : str
        The field in URL used to look up model instance

    Methods
    -------------
    get_queryset() : Base method for course list view
    get_object() : Returns course model instance
    '''

The VSCode IDE displays the documentation once you hover over a class. A function has documentation similar to JS:

'''
Create a new course - POST request

Parameters
--------------
request - dict

Raises
--------------
400 error
    Course title missing or not unique
    Course price missing for non-free course
403 error
    If course created by non-admin user

Returns
--------------
201 response with course data
'''

Next step is to find a package that will convert these doc strings into html viewable pages that can be committed into Git.