mohamedbakoush / watchvideobylink Goto Github PK

Option to choose a pre-downloaded video to help with restoring damaged video instead of the default for a better potential outcome.

Context: At /saved/videos a video can be moved/organized in anyway that the user want.

Design Proposal Ex 1: Folders can be moved/organized in anyway that the user want.

• If a user hovers folder1 over a folder2 and drops folder1, folder1 will be places inside folder2.
• If a user hovers a folder over a video and drops the folder, the folder will take the videos spot on the list
• If a user hovers a video above a folder and drops the video, the video will be places inside the folder.

Design Proposal Ex 2: Folders are pinned to the top of the list.

• A folder cant be moved expect If a user hovers folder1 over folder2 and drops folder1, folder1 will be placed inside folder2.
• If a user hovers a video above a folder and drops the video, the video will be places inside the folder.

Allow user to upload video, download full video by video URL or download by youtube-dl for any folder destination at /saved/videos

• Upload video anywhere at folder directory - /saved/videos
• Drop-down button - taking create folder button place - /saved/videos
• Create folder button - available at Drop-down - /saved/videos
• Input video URL for full download button - available at Drop-down - /saved/videos
• Send directory plus video data to back-end
• Download full video using downloadVideo function - ffmpeg-download-video.js
• Download upload video using uploadVideoFile, downloadUploadedVideo functions - ffmpeg-upload-video.js
• If specified download directory no longer exits after download is completed, post to main directory

The days for manual FFmpeg downloads are gone

ffmpeg-installer
https://www.npmjs.com/package/@ffmpeg-installer/ffmpeg
https://github.com/kribblo/node-ffmpeg-installer

• Linux 32-bit: (20181210-g0e8eb07980): https://www.johnvansickle.com/ffmpeg/
• Linux 64-bit: (20181210-g0e8eb07980): https://www.johnvansickle.com/ffmpeg/
• Mac OS/X (92718-g092cb17983): https://www.osxexperts.net/
• Mac OS/X (92718-g092cb17983): https://evermeet.cx/ffmpeg/
• Windows 32-bit (20181217-f22fcd4): https://ffmpeg.zeranoe.com/builds/win32/static/
• Windows 64-bit (20181217-f22fcd4): https://ffmpeg.zeranoe.com/builds/win64/static/

ffprobe-installer
https://www.npmjs.com/package/@ffprobe-installer/ffprobe
https://github.com/SavageCore/node-ffprobe-installer

• Linux (armhf, arm64, ia32, x64) (20210724-c253b18): https://www.johnvansickle.com/ffmpeg/
• macOS (x64) (103117-g1f58503013): https://evermeet.cx/ffmpeg/
• macOS (arm64) (4.4.1): https://formulae.brew.sh/formula/ffmpeg
• Windows 32-bit (20210804-7ab0207): https://github.com/sudo-nautilus/FFmpeg-Builds-Win32/
• Windows 64-bit (20210804-3b29864): https://www.gyan.dev/ffmpeg/builds/

When npm build command gets executed

Create JSON files with correct initial data inside

• available-videos
• current-download-videos
• data-videos
• user-settings

Run Script

• download-working-videos-for-untrunc.js

Hello everyone,

It's been a while since I last shared an update about the project. Some of you may be wondering what's been happening behind the scenes. While others potentially have forgotten why this project even exists.

I use this app quite often to watch my saved videos. It's much simpler than searching through my finder. Although other than watching videos, I don't seem to appreciate any additional features as particularly useful. While they are nice to have, something is missing, and I wonder if anyone feels the same. Do people enjoy this project, or are you okay with it slowly dying? I am fine with keeping the project as is and only fixing bugs when needed. But I'm also willing to completely redesign the project with a new system architecture and a wireframe to create a new foundation for rebuilding WatchVideoByLink.

A third option is also available: to do nothing, archive my creation, write of my loss, and let the project be as it is.

For any changes to be successful, support from the community is necessary. I want my efforts to be valued in one way or another and avoid previous mistakes where my efforts haven't been appreciated.

Stay safe,
Mohamed

Thanks for the app.

is it possible to add subtitle upload and subtitle options ( color - size - font , ... ) to app ?

thanks.

Descriptions are fairly technical jargon-heavy, simpler descriptions of what it is and how it can be used to achieve a typical goal with a real-world example.

Landing page with two sentences that explains WatchVideoByLink to a grandma, followed by animation or a 20-second video.

What is the difference between WatchVideoByLink and VLC?

Readme is not quickly understandable for what WatchVideoByLink is.

• What is WatchVideoByLink
• Use case example
• Visual representation of what WatchVideoByLink can do.
• Comparriosn between WatchVideoByLink and VLC (mabye other similar application also)
• Contributing.md

Readme Feedback

3 Tips For Making an Open Source Project in 2021 [Ultimate Guide]

Test cases no longer make sense, due to neglect, need to be redone.

Frontend

• basics.js
• currentVideoDownloads.js
• favicon.js
• folder.js
• folderPath.js
• index.js
• navigationBar.js
• notify.js
• optionMenu.js
• search.js
• showAvailableVideos.js
• videoPlayerButtons.js

Backend

• available-videos.js
• check-path-validity.js
• current-download-videos.js
• data-videos.js
• delete-data.js
• ffmpeg-download-compression.js
• ffmpeg-download-image.js
• ffmpeg-download-response.js
• ffmpeg-download-stream.js
• ffmpeg-download-trimed-video.js
• ffmpeg-download-video.js
• ffmpeg-path.js
• ffmpeg-unfinished-videos.js
• ffmpeg-upload-video.js
• stream-video-image.js
• user-settings.js
• youtubedl-download-video.js

As of now video/mp4 is being downloaded as a direct download which is maxed at 720p, its great for speed but not for video size (depending on video), application/x-mpegURL is recorded when an individual starts and stop the recoding, this can easily take huge amount of available space depending on the quality and length of the recorded video (can vary between 1gb to 5gb for 1 hour of content).

This is a problem, it could help minimize storage cost and increase number of videos able to contribute for storage.

The usage of FFMPEG is already utilize it could potentially be a great fit to use as video a tool for compression.

Describe the bug

videoLinkInput, videoTypeSelect, chooseVideoFile does not look the same between browsers
videoLinkContainer has different sizes between browsers

Expected behaviour

To look like the chrome version

Screenshots

Safari
Size: 670px x 445px

Chrome
Size: 682px x 434.31px

Firefox
Size: 719.7px x 431.984px

Additional context
Screenshots are taken on fullscreen browsers by a MacBook Pro 14”
All the styling for the above content can be found at client/styles/index.css

Navigation through the client scripts is an annoyance especially if one doesn't know the codebase, navigation should be as easy or better than backend scripts.

Client file structure needs to be restructured, each file should contain one major feature.

Current: https://github.com/MohamedBakoush/WatchVideoByLink/tree/master/client/scripts
Changes: https://github.com/MohamedBakoush/WatchVideoByLink/tree/client-file-restructure/client/scripts

This is for an improvement in readability/maintainability.

StreamVideo.js needs to be split up into smaller JS files, its becoming difficult to navigate/maintain.

Currently over 2K lines of code.

Describe the bug

When a folder gets deleted it deletes its content inside its folder, and the content the folder is in should only delete the content that's inside its folder

To Reproduce
Steps to reproduce the behaviour:

1. Go to /saved/videos
2. Create a folder
3. input video/folder inside
4. delete folder (inside the folder)
5. refresh
6. all data gone

Expected behaviour
Should only delete, the contents inside the folder (plus the folder itself)

Describe the bug

videoLinkContainer width doesn't go smaller then 339px

Messes up the navigation bar under 339px, as the navigation bar gets smaller due to webpage width, videoLinkContainer will not budge under 339px making any device under 339px annoying to use (Mobile S - 320px)

To Reproduce

1. Make the width of WatchVideoByLink homepage smaller than 339px on Inspect Element

Expected behaviour
The size of videoLinkContainer minimum width should be 320px

Screenshots

Chrome

Additional context
Screenshots are taken by a MacBook Pro 14”

Describe the bug
If download compression is true and the initial download (video/mp4) is not in the main folder before compression finishes at /saved/videos (due to moving the video file from the main folder into a created folder), videoID at available-videos.json won't update accordingly causing video/mp4 to be the main video file when watching due to the compressed video being inaccessible, making the compressed video a waste resources, time and space.

But if the compressed video is in the main folder when compression finishes, it works as expected

(Downloading works by Video/mp4 gets downloaded, then thumbnails (once completed video gets display video at /saved/video as video/mp4) and compression (once completed update video/mp4 to video/webm) if activated)

To Reproduce

1. Download video with compression activated
2. Wait for initial download (video/mp4) and thumbnails to be completed
3. Go to /saved/videos
4. move downloading video into a folder
5. wait for the compression to finish
6. Once completed, click to watch the compressed video, http://localhost:8080/video/filename (video/mp4) gets displayed when it should be http://localhost:8080/compressed/filename (video/WebM).

Expected behaviour

available-videos.json Should be

  "folder_filename": {
    "info": {
      "title": "folde_title",
      "inside-folder": "folder-main"
    },
    "content": {
      "video_filename": {
        "info": {
          "title": "video_filename",
          "videoLink": {
            "src": "/video/video_filename",
            "type": "video/mp4",
            "compressdSrc": "/compressed/video_filename",
            "compressedType": "video/webm"
          },
          "thumbnailLink": {...}
        }
      }
    }
  }

Actually

  "folder_filename": {
    "info": {
      "title": "folde_title",
      "inside-folder": "folder-main"
    },
    "content": {
      "video_filename": {
        "info": {
          "title": "video_filename",
          "videoLink": {
            "src": "/video/video_filename",
            "type": "video/mp4"
          },
          "thumbnailLink": {...}
        }
      }
    }
  }

Is your feature request related to a problem? Please describe.
youtube-dl deprecated

Describe the solution you'd like
Switch to youtube-dl-exec

Additional context
npm.im/youtube-dl
npm.im/youtube-dl-exec

Push folder path to history isn't available making refresh page or pressing presses previous page unable to work properly when the user is accessing the desired folder.

• Push folder by id to history - pushNewFolderIDToFolderIDPath
• Reset history to /saved/videos if previous url path wasn't /saved/videos - resetInsideFolderID
• Push multiple folder ids to history - newfolderIDPath
• Invalid Folder path, display main (/saved/videos)
• if error return undefined - getAvailableVideoDetailsByFolderPath
• display main or specified folder path - eachAvailableVideoDetails
• Fix 2 click previous page limitation bug

Describe the bug
When dragging and dropping, instead of reordering the videos inside the folders, it jumps to the player.

To Reproduce
Steps to reproduce the behavior:

1. Open WatchVideoByLink in Firefox.
2. Go to saved videos.
3. Click on any video, hold it and drag it to a folder.
4. The video appears to move to the folder
5. The video player is displayed.
6. Returns to saved videos. The video is in the original path.

Expected behavior
5. Folder view is shown and the video is within the folder.

What device are you on?
Desktop

Additional context
WatchVideoByLink: Latest build running in docker container running on centos (using docker-compose.yml from repository)
Firefox: 95.0.2 (64-bit) running on W10.

I can't reproduce this on Chrome.

JS Console errors:

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. folder.js:197:1
    inputSelectedIDIntoFolderID https://localhost/scripts/folder.js:197
    AsyncFunctionThrow self-hosted:699
    (Asíncrono: async)
    _onDragEnd https://localhost/scripts/showAvailableVideos.js:501
    (Asíncrono: EventListener.handleEvent)
    dragDropAvailableVideoDetails https://localhost/scripts/showAvailableVideos.js:349
    forEach self-hosted:208
    dragDropAvailableVideoDetails https://localhost/scripts/showAvailableVideos.js:347
    (Asíncrono: EventListener.handleEvent)
    dragDropAvailableVideoDetails https://localhost/scripts/showAvailableVideos.js:343
    folderOnClick https://localhost/scripts/showAvailableVideos.js:332
    onclick https://localhost/scripts/showAvailableVideos.js:274

Screenshot
(It's a gif, click it to view)

Self-hosting Video.js allows WatchVideoByLink to run offline.

https://docs.videojs.com/docs/guides/setup.html