search

calzoneman / sync

Node.JS Server and JavaScript/HTML Client for synchronizing online media
Other
1.46k stars 235 forks source link

Doubt: Why there are so many player scripts in channel.pug? #840

Closed cherrygot-personal closed 4 years ago

cherrygot-personal commented 4 years ago

Understanding Channel Player

It's more of a doubt/confusion, rather than an issue. Couldn't find a better way to communicate with developers. I am working on a project that is a fork of CyTube. As I was studying the code, I stumbled upon "channel.pug" in templates. At the end of the file, there are several scripts imported which I, unfortunately, couldn't wrap my head around.

These are the exact imports in the file.

    script(src="/js/data.js")
    script(src="/js/util.js")
    script(src="/js/tabcomplete.js")
    script(src="/js/player.js")
    script(src="/js/paginator.js")
    script(src="/js/ui.js")
    script(src="/js/callbacks.js")
    script(defer, src="https://www.youtube.com/iframe_api")
    script(defer, src="https://api.dmcdn.net/all.js")
    script(defer, src="https://player.vimeo.com/api/player.js")
    script(defer, src="/js/sc.js")
    script(defer, src="/js/video.js")
    script(defer, src="/js/videojs-contrib-hls.min.js")
    script(defer, src="/js/videojs-resolution-switcher.js")
    script(defer, src="/js/playerjs-0.0.12.js")
    script(defer, src="/js/dash.all.min.js")
    script(defer, src="/js/videojs-dash.js")
    script(defer, src="https://player.twitch.tv/js/embed/v1.js")

Issue 1: I am not able to understand the use of several js files for the player. Here's what I've understood from reading and quick google searches.

1. "/js/player.js" is the result after compiling the "/player" folder in the root directory. From what I've understood, it is for replacing the "#ytapiplayer" to a custom player and defining function calls for 'load', 'seek', etc, based on the type of the service like, YouTube, DailyMotion, Twitch, etc.

2. Then there is this "/js/playerjs-0.0.12.js" file. It is for controlling the video and audio within the iframe. I think this is more powerful than the previous one. YouTube, Twitch, etc are also embedded using iframes, so this should work fine. Also, custom iframe sources and embed can also work. (It's all in my head. I haven't tested each one of them).

3. Then there is "/js/dash.all.min.js". It is a client for displaying MPEG-DASH videos. Alright, no problem there.

4. But then there is "/js/video.js". It is also a video player. Reading on its site tells me that it is everything you'll need in your web app to run videos. And then...

5. There are two files, "/js/videojs-contrib-hls.min.js" and "/js/videojs-dash.js", which are plugins for videos to enable it to run MPEG-DASH and Apple HLS videos. But didn't we import "dash.all.min.js" already?

6. The "/js/videojs-resolution-switcher.js" also seems redundant as it is already a part of "DASH client". 

7. And if this was not already enough, there are scripts from YouTube iframe APIs and Vimeo and twitch player APIs. You get the point.

I'm not trying to mock, but genuinely curious and not able to understand the role of each of these files. If they are included for supporting different formats of videos, then please let me know what script is for what kind of media file.

Issue 2 This one's a minor. What is the use of "/js/sc.js"? I tried running the server after removing it, and everything worked fine. So not sure what it actually does. Also, it minified, so can't really tell what's going on inside.

And the use of "/js/tabcomplete.js". I read CyTube documentation on GitHub but didn't find "tab-complete" a feature. I tried typing something onto the chatbox and pressing tab, nothing completed. Am I missing something?

I'm really sorry if some of the queries are really naive as I've just stepped into WebApp development. Looking forward to hearing from you all.

calzoneman commented 4 years ago

I'll explain it in more detail tonight when I'm at my computer. Perhaps the answer could be turned into some documentation :)

On Tue, Jan 7, 2020, 12:00 Chakrapani Gautam notifications@github.com wrote:

Understanding Channel Player

It's more of a doubt/confusion, rather than an issue. Couldn't find a better way to communicate with developers. I am working on a project that is a fork of CyTube. As I was studying the code, I stumbled upon "channel.pug" in templates. At the end of the file, there are several scripts imported which I, unfortunately, couldn't wrap my head around.

These are the exact imports in the file. script(id="socketio-js", src=sioSource) script(src="/js/data.js") script(src="/js/util.js") script(src="/js/tabcomplete.js") script(src="/js/player.js") script(src="/js/paginator.js") script(src="/js/ui.js") script(src="/js/callbacks.js") script(defer, src="https://www.youtube.com/iframe_api") script(defer, src="https://api.dmcdn.net/all.js") script(defer, src="https://player.vimeo.com/api/player.js") script(defer, src="/js/sc.js") script(defer, src="/js/video.js") script(defer, src="/js/videojs-contrib-hls.min.js") script(defer, src="/js/videojs-resolution-switcher.js") script(defer, src="/js/playerjs-0.0.12.js") script(defer, src="/js/dash.all.min.js") script(defer, src="/js/videojs-dash.js") script(defer, src="https://player.twitch.tv/js/embed/v1.js")`

I am trying to understand the usage of each of the js file in the template. Issue #1 https://github.com/calzoneman/sync/issues/1:

I am not able to understand the use of several js files for the player. Here's what I've understood from reading and quick google searches.

  1. "/js/player.js" is the result after compiling the "/player" folder in the root directory. From what I've understood, it is for replacing the "#ytapiplayer" to a custom player and defining function calls for 'load', 'seek', etc, based on the type of the service like, YouTube, DailyMotion, Twitch, etc.

  2. Then there is this "/js/playerjs-0.0.12.js" file. It is for controlling the video and audio within the iframe. I think this is more powerful than the previous one. YouTube, Twitch, etc are also embedded using iframes, so this should work fine. Also, custom iframe sources and embed can also work. (It's all in my head. I haven't tested each one of them).

  3. Then there is "/js/dash.all.min.js". It is a client for displaying MPEG-DASH videos. Alright, no problem there.

  4. But then there is "/js/video.js". It is also a video player. Reading on its site tells me that it is everything you'll need in your web app to run videos. And then...

  5. There are two files, "/js/videojs-contrib-hls.min.js" and "/js/videojs-dash.js", which are plugins for videos to enable it to run MPEG-DASH and Apple HLS videos. But didn't we import "dash.all.min.js" already?

  6. The "/js/videojs-resolution-switcher.js" also seems redundant as it is already a part of "DASH client".

  7. And if this was not already enough, there are scripts from YouTube iframe APIs and Vimeo and twitch player APIs. You get the point.

I'm not trying to mock, but genuinely curious and not able to understand the role of each of these files. If they are included for supporting different formats of videos, then please let me know what script is for what kind of media file. Issue #2 https://github.com/calzoneman/sync/issues/2

This one's a minor. What is the use of "/js/sc.js"? I tried running the server after removing it, and everything worked fine. So not sure what it actually does. Also, it minified, so can't really tell what's going on inside.

And the use of "/js/tabcomplete.js". I read CyTube documentation on GitHub but didn't find "tab-complete" a feature. I tried typing something onto the chatbox and pressing tab, nothing completed. Am I missing something?

I'm really sorry if some of the queries are really naive as I've just stepped into WebApp development. Looking forward to hearing from you all.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/calzoneman/sync/issues/840?email_source=notifications&email_token=AAC6FCF5W7I55XHOYHNOMTDQ4SYJZA5CNFSM4KD4FRQKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4IERLUIQ, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAC6FCD2X6KXRB5VZ5ZKTNDQ4SYJZANCNFSM4KD4FRQA .

calzoneman commented 4 years ago 
script(src="/js/data.js")
script(src="/js/util.js")
script(src="/js/paginator.js")
script(src="/js/ui.js")
script(src="/js/callbacks.js")

CyTube client implementation. Old and rickety, needs to be rewritten.

script(src="/js/tabcomplete.js")

Strategies for tab completion. Based on the user's preference of strategy, used to autocomplete nicknames in chat.

script(src="/js/player.js")

Bundled from the sources in player/. This is the adapter for each individual API so that the CyTube client has a uniform interface to controlling playback. e.g. YouTube, Vimeo, Twitch all provide embed APIs but they all work differently. Also includes (via update.coffee) the mapping of which type uses which player interface.

script(defer, src="https://www.youtube.com/iframe_api")
script(defer, src="https://api.dmcdn.net/all.js")
script(defer, src="https://player.vimeo.com/api/player.js")

Embed API scripts for YouTube, Vimeo, and DailyMotion

script(defer, src="/js/sc.js")

Embed API script for SoundCloud

script(defer, src="/js/video.js")

Generic HTML5 video player (with Flash fallback, though no one uses that anymore) used for "raw file" types, i.e. arbitrary MP4/WebM content not from a website with an official embed API.

script(defer, src="/js/videojs-contrib-hls.min.js")

VideoJS plugin for HLS

script(defer, src="/js/videojs-resolution-switcher.js")

VideoJS plugin for providing a resolution selection menu used by the Google Drive userscript and custom-media support.

script(defer, src="/js/playerjs-0.0.12.js")

PlayerJS, which is itself an embed wrapper; this is only used for Streamable.com support since this is their officially supported mechanism for controlling the player.

script(defer, src="/js/dash.all.min.js")

dash.js decoder.

script(defer, src="/js/videojs-dash.js")

VideoJS plugin for DASH (requires dash.js for decoding)

script(defer, src="https://player.twitch.tv/js/embed/v1.js")

Twitch embed API.

cherrygot-personal commented 4 years ago

Thanks for sharing the info. Now it makes a lot more sense.