TelegramIndex-Fork/app/templates/info.html

{% include 'header.html' %}
            
            <div class="p-4 space-y-8">
                {% if found %}
                    {% if media %}
                        <h1 class="text-blue-500 text-center text-lg md:text-xl lg:text-2xl xl:text-3xl w-full break-all">
                            Download {{name}}
                        </h1>
                        
                        <div class="mx-auto w-full md:w-3/4 lg:w-2/5 p-2">
                            {% if media.image %}
                                <img class="mx-auto rounded" src="../{{id}}/thumbnail" alt="{{name}}">
                            {% elif media.video %}
                                <video id="my-video-player" class="mx-auto rounded" controls poster="../{{id}}/thumbnail">
                                    <source src="../{{id}}/download" type="{{ media.type }}" />
                                </video>
                            {% elif media.audio %}
                                <audio class="mx-auto" controls autoplay muted src="../{{id}}/download" type="{{ media.type }}"></audio>
                            {% endif %}
                            
                            {% if caption %}
                            
                                <div class="mx-auto mt-1">
                                    <div class="flex justify-center text-gray-300 font-mono text-xs lg:text-sm xl:text-lg">
                                        <p class="text-left w-full rounded p-4 bg-gray-900 shadow-lg"> {{ caption|safe }} </p>
                                    </div>
                                    {% if reply_btns %}
                                        <div class="w-full block">
                                            {% for row in reply_btns %}
                                                <div class="flex justify-center">
                                                    {% for btn in row %}
                                                        <a class="p-2 m-1 flex-1 border rounded bg-white border-blue-500 text-center text-blue-500 hover:bg-blue-500 hover:text-white transition ease-in duration-150" href="{{ btn.url }}" target="_blank"> {{btn.text}} </a>
                                                    {% endfor %}
                                                </div>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            
                            {% endif %}
                            
                        </div>
                        
                        <div class="text-center text-white text-sm md:text-base xl:text-2xl">
                    
                            <a class="rounded p-3 bg-indigo-500 hover:bg-indigo-700 shadow-lg" href="../{{id}}/download">Download Now! ({{ size }})</a>
                        
                        </div>
                    {% else %}
                        <div class="mx-auto flex flex-wrap justify-center w-full md:w-3/4 mt-1">
                            <div class="flex justify-center text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
                                <p class="text-left rounded p-4 bg-gray-900 w-full shadow-lg"> {{ text|safe }} </p>
                            </div>
                            {% if reply_btns %}
                                <div class="w-full block">
                                    {% for row in reply_btns %}
                                        <div class="flex justify-center">
                                            {% for btn in row %}
                                                <a class="p-2  m-1 flex-1 border rounded bg-white border-blue-500 text-center text-blue-500 hover:bg-blue-500 hover:text-white transition ease-in duration-150" href="{{ btn.url }}" target="_blank"> {{btn.text}} </a>
                                            {% endfor %}
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                    
                {% else %}
                    <h1 class="text-blue-500 text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl">Ooops...</h1>
                
                    <p class="text-center text-sm md:text-base lg:text-xl xl:text-2xl font-semibold">
                        {{ reason }}
                    </p>
                {% endif %}
                
            </div>
            
        <script>
            var myFP = fluidPlayer(
                'my-video-player',{
                    "layoutControls": {
                        "controlBar": {
                            "autoHideTimeout": 3,
                            "animated": true,
                            "autoHide": true
                        },
                        "logo": {
                            "imageUrl": null,
                            "position": "top left",
                            "clickUrl": null,
                            "opacity": 1
                        },
                        "htmlOnPauseBlock": {
                            "html": null,
                            "height": null,
                            "width": null
                        },
                        "autoPlay": false,
                        "mute": true,
                        "allowTheatre": true,
                        "playPauseAnimation": true,
                        "playbackRateEnabled": true,
                        "allowDownload": false,
                        "playButtonShowing": true,
                        "fillToContainer": true,
                        "posterImage": ""
                    },
                    "vastOptions": {
                        "adList": [],
                        "adCTAText": false,
                        "adCTATextPosition": ""
                    }
                }
            );
        </script>

{% include 'footer.html' %}