Git Product home page Git Product logo

embed's Introduction

Crowdin License: GPL v3 DTube channel on Discord PRs Welcome

DTube App

This is the main javascript application you can use on d.tube. This is probably the starting point for anyone wanting to contribute to d.tube.

Preview

DTube Homepage Preview

Install

Install Meteor

  • Linux and Mac: curl https://install.meteor.com/ | sh
  • Windows: link

Install the app

Clone this repository and meteor npm install in it. This will install all dependencies coming from npm including the ones required for development.

Start the app

Finally, do meteor in the folder to start the app in development mode.

Options:
  • -p 3456 for running on a different port than the default 3000.
  • --production will minify and merge the javascript and css files.

Meteor will automatically push any change on the code to the browser while you keep the meteor dev server running.

Going in-depth

Running blockchain locally

You can run a blockchain locally on your PC to avoid sending transactions onto the live network. Follow instructions in dtube/avalon, then just change API to 'localhost:3001' in the settings page to point your UI to your development chain.

Working with Uploads

For doing anything on the upload side, it is strongly recommended to run your own dtube/ipfs-uploader. Once running, simply turn the localhost setting to true in client/settings.js and it will upload locally instead of our production servers.

Working on the Player

As you can see, we use the embed directly available on emb.d.tube. This is the dtube/embed repository. Feel free to clone it and directly point the client/views/commons/videos/player.js to your file:// version of the player if you want to make changes that include the player.

Working with pre-rendering for bots

The dtube/minidtube repository is responsible for all the pre-rendering and serving a decent version of d.tube to bots which normally wouldn't be able to.

Structure

  • .meteor meteor files, don't touch unless you know what you are doing.
  • .vscode if you use visual studio code.
  • public all the static files like pictures, fonts and translations.
  • client all the app code
    • client/collections minimongo collections that templates feed from
    • client/css css files.
    • client/lib semantic ui related code.
    • client/views templates, each has 2 files, html and js, a handlebar template and associated logic.
      • client/views/commons all the re-used templates
      • client/views/pages all the templates matching a route in router.js
      • client/views/topbar the fixed menu on top of the app
      • client/views/sidebar the sidebar menu

Common Issues

If you are using windows, the meteor npm seems to be buggy at times. You can try using the normal npm instead if you have that installed.

After each meteor or package.json update, you will need to re-run meteor npm install

For any help, feel free to join us in our Discord Channel

Contributing

If you want to contribute to the project, please read this page.

embed's People

Contributors

dependabot[bot] avatar hightouch67 avatar nannal avatar skzap avatar steeminator3000 avatar techcoderx avatar unkn0wncat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

embed's Issues

Embed DTube Video into your website

Hello,
can't get a DTube video to work on my website: copied the iframe-code above and pasted my DTube URL: nothing.

Also downloaded emde master: nothing

Who can help a layman?
By the way: even the Chrome extension does not work for me: nothing is displayed

Gateway fallback

I want to make an free time based pinning service for DTube creators, but the way I would want it to work would mean that my gateway would need to verify that the videos being requested are still within the time limit, if not it will refuse the connection.

Ideally it would be something that the player could handle where, when I refuse the connection, it falls back to a trusted source. Ideally a gateway hosted by a leader (thinking specifically of video.oneloveipfs.com, the ipfs.d.tube or video.d.tube gateways).

I refuse to redirect, this will increase traffic to my server unnecessarily when the traffic should be routed somewhere else. I'm not the traffic cop.

Clicking on settings does not open settings

Expected behavior

Clicking on settings should open the settings and we should be able to change them as desired.

Actual behavior

I clicked on settings multiple times but somehow settings did not open.

How to reproduce

  • Open dtube
  • Select a video and open it
  • Click on settings, it wont open settings
  • Browser: Google chrome for Android latest version.
  • Operating system: Android 6.0.1

Recording Of The Bug

https://youtu.be/g6zUFBM-0kA



Posted on Utopian.io - Rewarding Open Source Contributors

Wrong position for the thumbnails in the video player

Expected behavior

In the position x=left=0 and x=right=100% the thumbnails should be inside the window of the player.
image
image

Actual behavior

There is a problem with the current setting of the position of the thumbnails
image
image

How to reproduce

1- Go to D.tube and choose any video or just click this video link https://d.tube/#!/v/davidpakman/h5azyp4v
2- Now move your mouse cursor to the beginning/end of the video and see the behavior of the thumbnail.

  • Browser:
    Google Chrome Version 63.0.3239.132 (Official Build) (64-bit).
  • Operating system:
    Windows 10.

๐•จ๐•– ๐•˜๐•  ๐•ค๐•๐• ๐•จ ๐•“๐•ฆ๐•ฅ ๐•จ๐•– ๐•˜๐•  ๐•—๐•ฆ๐•ฃ๐•ฅ๐•™๐•–๐•ฃ @TheGoldenPhoenix



Posted on Utopian.io - Rewarding Open Source Contributors

No way to disable autoplay for youtube redirect embedded videos

Example: https://emb.d.tube/#!/thecastle/2pt3qr2czbl redirects to https://www.youtube.com/embed/zJyTPCNpCGg?autoplay=1&showinfo=1&modestbranding=1

There's no clear way in how to disable the autoplay flag from being set. The obvious work around is to make my users have to click something before the iframe/embed is even loaded but it would be nice if the dtube embed url provided an option for this or by default didn't autoplay like most video players...

The API specifies: The syntax is as follow /#!/author/permlink/autoplay/branding

However: https://emb.d.tube/#!/thecastle/2pt3qr2czbl/false or https://emb.d.tube/#!/thecastle/2pt3qr2czbl/0 still autoplays with a redirect to https://www.youtube.com/embed/zJyTPCNpCGg?autoplay=1&showinfo=1&modestbranding=1

Right click menu

I believe we need a right click menu (akin to youtube's player) where we can add more useful options.

  • Save to disk a 640x360 .png from current frame (for the video thumbnail)
  • Save to disk a .png sprite from current video (e.g. : https://sprite.d.tube/btfs/QmdmoL3iAdBLtHi7A7jQV9a4U8WXquhACGpftNfcHZaJGT)
  • Stats for nerds, kinda already coded it (try player.trigger('startStats') in console of player)
  • Copy embed code (<iframe>...</iframe>)
  • Watch on d.tube (goes to d.tube/v/author/link)

more ideas ?

[Feature Request] Add loop functionality

It would be nice if you could pass additional arguments to the embed player in the style of /#!/author/permlink/autoplay/branding/{"key1": "val1"} one of which being loop: true/false for having the player loop indefinitely.

D.tube Inappropriate videos tab problem.

Expected behavior

D.tube Inappropriate videos tab problem.

Actual behavior

Once you're in the website, you can click on the "Inappropriate Videos" tab in the settings section next to your profile picture and select "Show". Then we mark a different option from the API section, refresh the page, and the changes are not registered.
However, without touching the Inappropriate Videos section, only the API section is changed and the page is updated to register the change.
In addition, he does not save again simply by changing the inappropriate videos and refreshing the page.

How to reproduce

If the problem is likely to be on the Steemit blockchain, the API settings need to be checked.

https://youtu.be/MW9igC06lRA

  • Browser: Google Chrome
  • Operating system: Windows 10



Posted on Utopian.io - Rewarding Open Source Contributors

HLS and DASH Support

It would be incredible for extreme quality videos if we could allow for HLS and DASH M3U8 playback.

Don't talk about live streams. That's not what I mean.

An M3U8 is a file with links to other files. Eg:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=426x240
240p30/manifest.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=700000,RESOLUTION=640x360
360p30/manifest.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1250000,RESOLUTION=842x480
480p30/manifest.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2500000,RESOLUTION=1280x720
720p30/manifest.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=1280x720
720p60/manifest.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=4500000,RESOLUTION=1920x1080
1080p30/manifest.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5800000,RESOLUTION=1920x1080
1080p60/manifest.m3u8

Now there are many ways of creating these files. Ignore all methods but the one I am about to outline.

  1. Each file gets ran through FFMPEG to create several .ts files at small intervals each (5 seconds per file)
  2. These files are uploaded to IPFS
  3. An M3U8 generator of sorts (just a simply way to arrange the .ts files into the M3U8) creates the M3U8 from the IPFS directory listing
  4. That M3U8 gets uploaded alongside the .ts files
  5. Plant that M3U8 into the uploader (this would be one field, so we won't need a separate section for 240, 480 and so on)
  6. The player starts asking the gateway for the small pieces

Why?

I'd have to go into a whole conversation about video streaming, containers and encoders. I can, but that is something I would prefer to do in video format if requested.

Keyboard shortcuts are not reliable upon first interaction

When trying to use the well-known shortcuts for playback space and full-screen f this fails, but only for the first two times for a fresh viewer.

Bug reproduction

  1. Paste a link to a DTube video on Discord
  2. Open the link in a Private Window to simulate "first time user interaction"[1]
  3. Try pressing space -- the screen will scroll down, playback will not start
  4. Try pressing f -- no reaction
  5. Click in the middle[2] of the player, playback starts
  6. Try pressing space -- no reaction
  7. Try pressing f -- no reaction
  8. Click once again in the middle of the player -- playback pauses
  9. Try pressing f -- playback starts again in full-screen
  10. Try pressing space -- the video pauses

[1] When not using Private Mode, the video autoplays.
[2] I tried also to click strictly on the widgets (red play button etc.) and there was no difference.

Tested on Linux version of Brave 1.21.77 Chromium: 89.0.4389.90 (Official Build) (64-bit).

Only allow uploaded videos to be seen on certain domain names

Only allow uploaded videos to be seen on certain domain names when the uploaded videos are embedded into the website that has that domain name. Configure the uploaded video to not be seen on dtube publicly, but instead can only be seen on a certain domain name when embedded.

Vimeo does this. It would be great if dtube could do it as well.

Dtube- Playback Rates Doesn't Fit Video Screen

Expected behavior

Video playback rates was suppose to fit the screen

Actual behavior

The playback rate options is too large on mobile device
IMG-20180621-WA0002.jpg

How to reproduce

  • Go to Dtube

  • Click on any available video to play

  • Click on the video settings icon

  • Click on playback rate

  • Browser/App version: Chrome 67.0.3396.87

  • Operating system: Android 0

Recording Of The Bug

https://youtu.be/DQZHYjigy9c

Settings Menu widgets - improvements

The UX around the video player could use some refinements.

The widget disappears after a short moment

image

Reproduction

  1. Click on the cog-wheel
  2. Wait up to 2 seconds
  3. The widget disappears

This is really annoying, especially for the second level menu (IPFS gateways), because reading more text, requires more time. And the sudden vanishing of the widget makes this impossible for most people.

Suggestion: make the widget stay until the user clicks away.

Menu not always catches the click

Sometimes, when I click on the IPFS Gateways entry, the click "goes through" and pauses/unpauses the video.

Reproduction

Sadly, the only way I've found is to keep clicking on the 1st level menu a lot of times and click away a lot of times.

This is obscure enough to be considered low priority IMHO.

"Non-fulscreen" sounds a bit weird

full-screen

A bit of a peeve, but again, consider changing to "exit full-screen", "leave full-screen" or something similar.

Reproduction

n/a

Test environment details

Tested on Linux version of Brave 1.21.77 Chromium: 89.0.4389.90 (Official Build) (64-bit).
Tested in a Private Window.

How to embed videos with content security policy?

Examples:

https://stripe.com/docs/security/guide#content-security-policy

https://docs.hcaptcha.com/#content-security-policy-settings

Maybe add some docs or a section somewhere of how to embed dtube videos with CSP.

Video I used for the embed:

https://d.tube/#!/v/techcoderx/04mhfe0o

I tried 'https://emb.d.tube' inside of Frame SRC and i got:

Bad video JSON SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Object.decode (dtube.min.js:17)
    at startup (dtube.min.js:28)
    at HTMLDocument.<anonymous> (dtube.min.js:28)

Automated posting to twitter / facebook

Can someone please build a mechanism to post content from d.tube to facebook / twitter?

We need to connect with the centralised world, and start bringing them across.

Let's do it now.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.