Spaces:

Alide21
/

YOUTUBELIVE

Sleeping

App Files Files Community

Alide21 commited on Feb 4

Commit

81bd079

verified ·

1 Parent(s): c3109de

Update main.py

Browse files

Files changed (1) hide show

main.py +55 -199

main.py CHANGED Viewed

@@ -12,14 +12,14 @@ TARGET_DATE = datetime(2026, 2, 19, 0, 0, 0)
 STREAM_KEY = os.environ.get("STREAM_KEY")
 STREAM_URL = "rtmp://a.rtmp.youtube.com/live2/"
 BG_IMAGE = "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=1920&auto=format&fit=crop"
-# ==========================================
 app = Flask(__name__)
 @app.route('/time_data')
 def time_data():
-    """نقطة نهاية (API) لتقديم بيانات الوقت المتبقي كـ JSON"""
     diff = TARGET_DATE - datetime.now()
     days = diff.days
     hours, rem = divmod(diff.seconds, 3600)
     minutes, seconds = divmod(rem, 60)
@@ -32,236 +32,92 @@ def time_data():
 @app.route('/')
 def home():
-    # واجهة المحاكاة المطورة باستخدام HTML/CSS/JS
-    return f"""
     <!DOCTYPE html>
     <html lang="ar" dir="rtl">
     <head>
         <meta charset="UTF-8">
-        <title>بث مباشر | يوتيوب</title>
-        <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap" rel="stylesheet">
         <style>
-            /* الأساسيات */
-            body {{ background-color: #181818; color: white; font-family: 'Cairo', sans-serif; margin: 0; display: flex; justify-content: center; }}
-            .container {{ width: 90%; max-width: 1200px; margin-top: 20px; }}
-            /* مشغل الفيديو مع حل مشكلة الوميض (الصورة ثابتة في الخلفية) */
-            .video-player {{
-                position: relative;
-                width: 100%;
-                aspect-ratio: 16/9;
-                background: url('{BG_IMAGE}') no-repeat center;
-                background-size: cover;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                overflow: hidden;
-            }}
-            .overlay {{ position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1; }}
-            .content-wrapper {{ z-index: 2; text-align: center; }}
-            .main-title {{ font-size: 3vw; font-weight: 900; margin-bottom: 30px; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }}
-            /* --- تصميم العداد القلاب الواقعي (Flip Clock) --- */
-            .countdown-row {{ display: flex; gap: 20px; justify-content: center; direction: ltr; }}
-            .time-unit {{ display: flex; flex-direction: column; align-items: center; }}
-            .flip-card {{
-                position: relative;
-                width: 7vw;
-                height: 9vw;
-                perspective: 1000px; /* عمق للحركة ثلاثية الأبعاد */
-                font-size: 5vw;
-                font-weight: bold;
-                color: white;
-                box-shadow: 0 4px 10px rgba(0,0,0,0.3);
-                border-radius: 8px;
-            }}
-            /* الجزء العلوي والسفلي من البطاقة */
-            .top, .bottom, .top-flip, .bottom-flip {{
-                position: absolute;
-                width: 100%;
-                height: 50%;
-                overflow: hidden;
-                backface-visibility: hidden; /* إخفاء الظهر عند القلب */
-                background: #4CAF50; /* لون العداد الأخضر */
-                display: flex;
-                justify-content: center;
-            }}
-            /* تنسيق الجزء العلوي */
-            .top, .top-flip {{
-                top: 0;
-                border-top-left-radius: 8px;
-                border-top-right-radius: 8px;
-                align-items: flex-end;
-                border-bottom: 1px solid rgba(0,0,0,0.1); /* خط المنتصف */
-                background: linear-gradient(180deg, #5DBE62 0%, #4CAF50 100%);
-            }}
-            /* تنسيق الجزء السفلي */
-            .bottom, .bottom-flip {{
-                bottom: 0;
-                border-bottom-left-radius: 8px;
-                border-bottom-right-radius: 8px;
-                align-items: flex-start;
-                background: linear-gradient(180deg, #4CAF50 0%, #388E3C 100%);
-            }}
-            /* ضبط موقع الرقم داخل النصفين */
-            .top span, .top-flip span {{ transform: translateY(50%); }}
-            .bottom span, .bottom-flip span {{ transform: translateY(-50%); }}
-            /* --- حركات القلب (Animations) --- */
-            .top-flip {{
-                transform-origin: bottom;
-                animation: flip-top 0.6s ease-in forwards;
-                z-index: 2; /* يظهر فوق الجزء السفلي أثناء الحركة */
-            }}
-            .bottom-flip {{
-                transform-origin: top;
-                transform: rotateX(90deg); /* يبدأ مخفياً */
-                animation: flip-bottom 0.6s ease-out 0.6s forwards; /* يبدأ بعد انتهاء النصف الأول */
-            }}
-            @keyframes flip-top {{
-                100% {{ transform: rotateX(-90deg); }}
-            }}
-            @keyframes flip-bottom {{
-                100% {{ transform: rotateX(0deg); }}
-            }}
-            .label {{ margin-top: 15px; font-size: 1.5vw; color: #ddd; font-weight: bold; }}
-            .video-info {{ margin-top: 15px; border-bottom: 1px solid #303030; padding-bottom: 15px; }}
-            .vid-title {{ font-size: 22px; font-weight: bold; }}
-            .meta {{ color: #aaa; font-size: 14px; margin-top: 5px; }}
         </style>
     </head>
     <body>
-        <div class="container">
-            <div class="video-player">
-                <div class="overlay"></div>
-                <div class="content-wrapper">
-                    <div class="main-title">كم باقي على رمضان 2026</div>
-                    <div class="countdown-row">
-                        <div class="time-unit" id="days-unit"></div>
-                        <div class="time-unit" id="hours-unit"></div>
-                        <div class="time-unit" id="minutes-unit"></div>
-                        <div class="time-unit" id="seconds-unit"></div>
-                    </div>
                 </div>
             </div>
-            <div class="video-info">
-                <div class="vid-title">بث مباشر 🔴 العد التنازلي (تصميم Flip واقعي)</div>
-                <div class="meta">من كل صوب • تحديث لحظي • بدون وميض</div>
-            </div>
         </div>
         <script>
-            // دالة لإنشاء هيكل بطاقة Flip
-            function createFlipCard(initialValue) {
-                const card = document.createElement('div');
-                card.className = 'flip-card';
-                card.innerHTML = `
-                    <div class="top"><span>${initialValue}</span></div>
-                    <div class="bottom"><span>${initialValue}</span></div>
-                `;
-                return card;
-            }
-            // دالة لتحديث البطاقة وإضافة حركة القلب إذا تغيرت القيمة
-            function updateCard(unitId, newValue) {
-                const unitElement = document.getElementById(unitId);
-                let card = unitElement.querySelector('.flip-card');
-                // إذا كانت البطاقة غير موجودة، قم بإنشائها
-                if (!card) {
-                    card = createFlipCard(newValue);
-                    const label = document.createElement('div');
-                    label.className = 'label';
-                    // تحديد التسمية الصحيحة
-                    const labels = { 'days-unit': 'أيام', 'hours-unit': 'ساعات', 'minutes-unit': 'دقائق', 'seconds-unit': 'ثواني' };
-                    label.textContent = labels[unitId];
-                    unitElement.appendChild(card);
-                    unitElement.appendChild(label);
-                    return;
-                }
-                const currentValue = card.querySelector('.top span').textContent;
-                // تحديث فقط إذا تغيرت القيمة لتشغيل الحركة
-                if (newValue !== currentValue) {
-                    // إضافة عناصر الحركة (التي ستقوم بالانقلاب)
-                    const topFlip = document.createElement('div');
-                    topFlip.className = 'top-flip';
-                    topFlip.innerHTML = `<span>${currentValue}</span>`;
-                    const bottomFlip = document.createElement('div');
-                    bottomFlip.className = 'bottom-flip';
-                    bottomFlip.innerHTML = `<span>${newValue}</span>`;
-                    card.appendChild(topFlip);
-                    card.appendChild(bottomFlip);
-                    // تحديث القيم الثابتة بعد انتهاء الحركة
-                    setTimeout(() => {
-                        card.querySelector('.top span').textContent = newValue;
-                        card.querySelector('.bottom span').textContent = newValue;
-                        card.removeChild(topFlip);
-                        card.removeChild(bottomFlip);
-                    }, 1200); // مدة الحركة الإجمالية (0.6s + 0.6s)
-                }
             }
-            // جلب البيانات وتحديث العداد كل ثانية
-            function updateCountdown() {
-                fetch('/time_data')
-                    .then(response => response.json())
-                    .then(data => {
-                        updateCard('days-unit', data.days);
-                        updateCard('hours-unit', data.hours);
-                        updateCard('minutes-unit', data.minutes);
-                        updateCard('seconds-unit', data.seconds);
-                    });
-            }
-            // تشغيل التحديث لأول مرة ثم كل 1000ms
-            updateCountdown();
-            setInterval(updateCountdown, 1000);
         </script>
     </body>
     </html>
     """
 def start_stream():
     if not STREAM_KEY: return
     target_ts = int(TARGET_DATE.timestamp())
-    # ملاحظة هامة: تأثير القلب الواقعي جداً (Animation) لا يمكن تنفيذه
-    # في البث المباشر باستخدام FFmpeg وحده لأنه يتطلب محرك رسم متقدم.
-    # الكود أدناه سيبث عداداً ثابتاً بخلفية خضراء كما في النسخة السابقة،
-    # وهو أفضل ما يمكن تقديمه تقنياً للبث المستمر.
     ffmpeg_cmd = [
         'ffmpeg', '-re', '-loop', '1', '-i', BG_IMAGE,
         '-f', 'lavfi', '-i', 'anullsrc',
         '-vf', (
-            f"scale=1280:720,"
-            f"drawbox=x=0:y=0:w=iw:h=ih:color=black@0.4:t=fill," # تعتيم للخلفية
-            f"drawtext=text='Ramadan 2026':x=(w-text_w)/2:y=150:fontsize=70:fontcolor=white:shadowcolor=black:shadowx=2:shadowy=2,"
-            # العداد بخلفية خضراء ثابتة للبث
-            f"drawtext=text=' %{{pts\\:localtime\\:{target_ts}\\:%d}}  :  %{{pts\\:localtime\\:{target_ts}\\:%H}}  :  %{{pts\\:localtime\\:{target_ts}\\:%M}}  :  %{{pts\\:localtime\\:{target_ts}\\:%S}} ':"
-            f"x=(w-text_w)/2:y=(h-text_h)/2+20:fontsize=90:fontcolor=white:box=1:boxcolor=#4CAF50@0.9:boxborderw=20"
         ),
-        '-vcodec', 'libx264', '-preset', 'veryfast', '-b:v', '3000k', '-maxrate', '3000k', '-bufsize', '6000k',
         '-pix_fmt', 'yuv420p', '-g', '60', '-f', 'flv',
         f"{STREAM_URL}{STREAM_KEY}"
     ]
-    subprocess.run(ffmpeg_cmd, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
 if __name__ == "__main__":
     threading.Thread(target=lambda: app.run(host='0.0.0.0', port=7860), daemon=True).start()
-    print("Real Flip Clock Simulation Started (No Flicker)...")
     while True:
         try: start_stream()
-        except: time.sleep(10)

 STREAM_KEY = os.environ.get("STREAM_KEY")
 STREAM_URL = "rtmp://a.rtmp.youtube.com/live2/"
 BG_IMAGE = "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=1920&auto=format&fit=crop"
 app = Flask(__name__)
 @app.route('/time_data')
 def time_data():
     diff = TARGET_DATE - datetime.now()
+    if diff.total_seconds() < 0:
+        return jsonify({'days': '00', 'hours': '00', 'minutes': '00', 'seconds': '00'})
     days = diff.days
     hours, rem = divmod(diff.seconds, 3600)
     minutes, seconds = divmod(rem, 60)
 @app.route('/')
 def home():
+    # استخدمنا رندر مباشر للنص لتجنب مشاكل f-string مع JavaScript
+    html_content = """
     <!DOCTYPE html>
     <html lang="ar" dir="rtl">
     <head>
         <meta charset="UTF-8">
+        <title>بث مباشر | رمضان 2026</title>
+        <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@700;900&display=swap" rel="stylesheet">
         <style>
+            body { background-color: #0f0f0f; color: white; font-family: 'Cairo', sans-serif; margin: 0; overflow: hidden; }
+            .video-player {
+                position: relative; width: 100vw; height: 100vh;
+                background: url('""" + BG_IMAGE + """') no-repeat center;
+                background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center;
+            }
+            .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
+            .content { z-index: 10; text-align: center; }
+            .title { font-size: 45px; margin-bottom: 30px; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); }
+            .countdown { display: flex; gap: 20px; direction: ltr; }
+            .unit { display: flex; flex-direction: column; align-items: center; }
+            .card {
+                background: linear-gradient(180deg, #4CAF50, #2E7D32);
+                width: 120px; height: 160px; border-radius: 12px;
+                font-size: 80px; font-weight: 900; display: flex;
+                justify-content: center; align-items: center;
+                box-shadow: 0 10px 20px rgba(0,0,0,0.4);
+                border: 1px solid rgba(255,255,255,0.1);
+            }
+            .label { margin-top: 10px; font-size: 20px; color: #4CAF50; font-weight: bold; }
         </style>
     </head>
     <body>
+        <div class="video-player">
+            <div class="overlay"></div>
+            <div class="content">
+                <div class="title">الوقت المتبقي على رمضان 2026</div>
+                <div class="countdown">
+                    <div class="unit"><div class="card" id="days">00</div><div class="label">أيام</div></div>
+                    <div class="unit"><div class="card" id="hours">00</div><div class="label">ساعة</div></div>
+                    <div class="unit"><div class="card" id="minutes">00</div><div class="label">دقيقة</div></div>
+                    <div class="unit"><div class="card" id="seconds">00</div><div class="label">ثانية</div></div>
                 </div>
             </div>
         </div>
         <script>
+            function update() {
+                fetch('/time_data').then(res => res.json()).then(data => {
+                    document.getElementById('days').innerText = data.days;
+                    document.getElementById('hours').innerText = data.hours;
+                    document.getElementById('minutes').innerText = data.minutes;
+                    document.getElementById('seconds').innerText = data.seconds;
+                });
             }
+            setInterval(update, 1000);
+            update();
         </script>
     </body>
     </html>
     """
+    return html_content
 def start_stream():
     if not STREAM_KEY: return
     target_ts = int(TARGET_DATE.timestamp())
+    # تحسين جودة فيديو اليوتيوب ليكون مشابهاً للتصميم الأخضر
     ffmpeg_cmd = [
         'ffmpeg', '-re', '-loop', '1', '-i', BG_IMAGE,
         '-f', 'lavfi', '-i', 'anullsrc',
         '-vf', (
+            f"scale=1280:720,setsar=1,"
+            f"drawbox=y=ih/2-100:color=black@0.6:width=iw:height=250:t=fill," # شريط خلفية للعداد
+            f"drawtext=text='Ramadan 2026':x=(w-text_w)/2:y=200:fontsize=60:fontcolor=white,"
+            # العداد الأخضر في البث
+            f"drawtext=text=' %{{pts\\:localtime\\:{target_ts}\\:%d}}   %{{pts\\:localtime\\:{target_ts}\\:%H}}   %{{pts\\:localtime\\:{target_ts}\\:%M}}   %{{pts\\:localtime\\:{target_ts}\\:%S}} ':"
+            f"x=(w-text_w)/2:y=(h-text_h)/2+30:fontsize=100:fontcolor=white:box=1:boxcolor=#4CAF50@1:boxborderw=30"
         ),
+        '-vcodec', 'libx264', '-preset', 'veryfast', '-b:v', '3500k', '-maxrate', '3500k', '-bufsize', '7000k',
         '-pix_fmt', 'yuv420p', '-g', '60', '-f', 'flv',
         f"{STREAM_URL}{STREAM_KEY}"
     ]
+    subprocess.run(ffmpeg_cmd)
 if __name__ == "__main__":
     threading.Thread(target=lambda: app.run(host='0.0.0.0', port=7860), daemon=True).start()
     while True:
         try: start_stream()
+        except: time.sleep(5)