Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Video Player & Landing Page #15

Open
rsoorajs opened this issue Oct 29, 2021 · 9 comments
Open

Video Player & Landing Page #15

rsoorajs opened this issue Oct 29, 2021 · 9 comments
Labels
enhancement New feature or request todo todo

Comments

@rsoorajs
Copy link

There is an Idea,If you included a landing page,with a download button and video player for that It will be awsome. If itsnt video,Then Just download button.

the bot should give output url like

https://demosite.com/hello.html

If you can add feature in main or development branch it will be great Or can you say where to add this landing page script in your code ?

Thank you

        stream_file = """
<div id='vidiv'>    
    
    <title>Download """ + str(file_name[:-4]) + """</title>
    <link rel="icon" href="https://i.imgur.com/SeYCR1M.jpg" type="image/gif" sizes="16x16"> 
    <link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
    <script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>
    <video id="video-fully-responsive">
        <source src="/""" + str(file_id) + """/""" + str(file_name) + """" type="video/mp4"/>
    </video>
    <script type="text/javascript">
        var video = document.querySelector("video");
        var src = video.firstElementChild
        src.addEventListener('error', function(evt) {
            // video.addEventListener('play', function(evt) {
            //     document.getElementById('vidiv').style.display = 'none';
            // })
            document.getElementById('vidiv').style.display = 'none';
        });
        
        fluidPlayer(
            "video-fully-responsive",
            {
                layoutControls: {
                    title: """ + str(json.dumps(file_name[:-4])) + """,
                    playButtonShowing: true,
                    fillToContainer: true,
                    preload: false,
                    controlBar: {
                        autoHide: true,
                        autoHideTimeout: 3,
                        animated: true
                    },
                    playbackRateEnabled: true,
                    allowTheatre: true
                }
            }
        );
        
        
    </script>
    
</div>
"""
    else: 
        stream_file = ''

    htmltext = """
<!DOCTYPE html>
<head>
    <meta name="referrer" content="always" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-158041490-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-158041490-1');
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .container {
            text-align: center;
            margin: 0% auto;
        }
        
        @media (orientation: landscape) {
            .container {
                max-width: 750px;
            }
        }
        
        .main {
            /* border: 1px solid DodgerBlue;  */
            padding: 0px 2%;
        }
        
        h1 {
            margin-top: 5%;
            color: grey;
            width: fit-width;
            word-wrap: break-word;
            line-height: 20px;
        }
        
        .filename {
            color: DodgerBlue;
            font-size: calc(10px + 1.1vw);
            word-wrap: break-word;
            font-weight: bold;
        }
        
        #video-fully-responsive {
            width: 100%;
        }
        
        #vast_video_loading_video-fully-responsive {
            height: 0;
        }
        
        .btn {
            background-color: DodgerBlue;
            border: none;
            color: white;
            padding: 12px 30px;
            cursor: pointer;
            font-size: 20px;
            margin: 0% auto;
            margin-top: 20px;
            /* margin-bottom: 20px; */
            width: 100%;
        }
        
        .btn:hover {
            background-color: RoyalBlue;
        }
        
        .btnn {
            background-color: #f0ad4e;
            border: none;
            color: white;
            padding: 5px;
            cursor: pointer;
            font-size: 15px;
            margin: 0% auto;
            margin-top: 10px;
            margin-bottom: 20px;
            width: 20%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <p class="filename">""" + str(file_name) + """</p>
            """ + stream_file + """
            <a href="/""" + str(file_id) + """/""" + str(file_name) + """">
                <button class="btn"><i class="fa fa-download"></i> Download</button>
            </a>
            <a href="https://telegram.me/filestolink" target="_blank" style="text-decoration: none;">
                <button class="btnn">Join our channel</button>
            </a>
        </div>
    </div>
    <div class="ads" style="text-align: center;">
       
    </div>```
@EverythingSuckz EverythingSuckz added the enhancement New feature or request label Nov 11, 2021
@ghost
Copy link

ghost commented Nov 30, 2021

yes, I second this, it'd be great to be able to stream it natively in the browser instead of opening the link in a video player.

@EverythingSuckz
Copy link
Owner

yes, I second this, it'd be great to be able to stream it natively in the browser instead of opening the link in a video player.

I've already implemented this in the beta branch even tho it's unstable, it can be used in most of the cases.
=> demo

@EverythingSuckz
Copy link
Owner

@EverythingSuckz Another way could be to have two different buttons, one would lead to direct download and the other one would stream the file in this way. I guess it'd be less clunky and more convenient for users. Just a suggestion.

As I said before.. it's already implemented. see this post.

@ghost
Copy link

ghost commented Nov 30, 2021

@EverythingSuckz Yup I saw, was just suggesting an alternative way that'd serve the same purpose.

@EverythingSuckz EverythingSuckz added the todo todo label Nov 25, 2022
@MuhammadBayiz
Copy link

the demo hasn't been updated in years, would you consider updating it or add the streaming option to the main branch?

@EverythingSuckz
Copy link
Owner

the demo hasn't been updated in years, would you consider updating it or add the streaming option to the main branch?

The main reason why I haven't merged it is because it was not great. The user interface was imperfect, and I am not proficient in frontend development. Furthermore, I believed that the in-browser player was sufficient for streaming most media files, and there were no plans to implement a frontend for this project. I only created it at that time. However, if I have sufficient time, I may consider updating it and merging it in the future.

@MuhammadBayiz
Copy link

The user interface was imperfect, and I am not proficient in frontend development.

A Fullscreen Video Player with a video player like JWPlayer or Plyr would be enough. It could be used as an embed link that will do. Also it isn't necessary to have full page just to show the video in my opinion.

However, if I have sufficient time, I may consider updating it and merging it in the future.

We really appreciate your work take your time. Btw amazing project, it's been amazing having open source project's like this project.

@MuhammadBayiz
Copy link

Any news? I know you have allot to do but will there be any update about this issue or will update the WEBUI Branch to Up-to-date with the main branch?

@samud008
Copy link

@EverythingSuckz
Broh pls add the frontend with the Video Player. That all we ask for 😭

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request todo todo
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@rsoorajs @MuhammadBayiz @EverythingSuckz @samud008