Spaces:

Taf2023
/

Share-YouTube

Running

App Files Files Community

Taf2023 commited on Aug 17

Commit

5565235

verified ·

1 Parent(s): e02f7fd

Upload 6 files

Browse files

Files changed (6) hide show

__init__.cpython-311.pyc +0 -0
index.html +70 -0
post.cpython-311.pyc +0 -0
script.js +361 -0
style.css +360 -0
user.cpython-311.pyc +0 -0

__init__.cpython-311.pyc ADDED Viewed

Binary file (152 Bytes). View file

index.html ADDED Viewed

	@@ -0,0 +1,70 @@

+<!DOCTYPE html>
+<html lang="th">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Share YouTube - แชร์วิดีโอและโน๊ตกับเพื่อน</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <h1><i class="fab fa-youtube"></i> Share YouTube</h1>
+                <p>แชร์วิดีโอและโน๊ตกับเพื่อน</p>
+            </div>
+        </header>
+        <!-- Share Form -->
+        <div class="share-section">
+            <div class="share-card">
+                <h2><i class="fas fa-share"></i> แชร์ลิงก์ YouTube</h2>
+                <form id="shareForm">
+                    <div class="form-group">
+                        <label for="name"><i class="fas fa-user"></i> ชื่อของคุณ:</label>
+                        <input type="text" id="name" name="name" required placeholder="กรอกชื่อของคุณ">
+                    </div>
+                    <div class="form-group">
+                        <label for="youtube_link"><i class="fab fa-youtube"></i> ลิงก์ YouTube:</label>
+                        <input type="url" id="youtube_link" name="youtube_link" required placeholder="https://www.youtube.com/watch?v=...">
+                    </div>
+                    <div class="form-group">
+                        <label for="note"><i class="fas fa-sticky-note"></i> โน๊ตสั้นๆ:</label>
+                        <textarea id="note" name="note" required placeholder="เขียนโน๊ตสั้นๆ เกี่ยวกับวิดีโอนี้..."></textarea>
+                    </div>
+                    <button type="submit" class="btn-share">
+                        <i class="fas fa-share"></i> แชร์
+                    </button>
+                </form>
+            </div>
+        </div>
+        <!-- Shared Links Feed -->
+        <div class="feed-section">
+            <h2><i class="fas fa-list"></i> ลิงก์ที่แชร์</h2>
+            <div id="linksContainer">
+                <!-- Shared links will be loaded here -->
+            </div>
+        </div>
+    </div>
+    <!-- Loading Spinner -->
+    <div id="loadingSpinner" class="loading-spinner">
+        <i class="fas fa-spinner fa-spin"></i>
+        <p>กำลังโหลด...</p>
+    </div>
+    <!-- Success Message -->
+    <div id="successMessage" class="success-message">
+        <i class="fas fa-check-circle"></i>
+        <span id="successText">แชร์สำเร็จ!</span>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

post.cpython-311.pyc ADDED Viewed

Binary file (5.01 kB). View file

script.js ADDED Viewed

	@@ -0,0 +1,361 @@

+// API Base URL
+const API_BASE_URL = '/api';
+// DOM Elements
+const shareForm = document.getElementById('shareForm');
+const linksContainer = document.getElementById('linksContainer');
+const loadingSpinner = document.getElementById('loadingSpinner');
+const successMessage = document.getElementById('successMessage');
+const successText = document.getElementById('successText');
+// Initialize app
+document.addEventListener('DOMContentLoaded', function() {
+    loadLinks();
+    // Handle form submission
+    shareForm.addEventListener('submit', handleShareSubmit);
+});
+// Handle share form submission
+async function handleShareSubmit(e) {
+    e.preventDefault();
+    const formData = new FormData(shareForm);
+    const data = {
+        name: formData.get('name'),
+        note: formData.get('note'),
+        youtube_link: formData.get('youtube_link')
+    };
+    // Validate YouTube URL
+    if (!isValidYouTubeURL(data.youtube_link)) {
+        alert('กรุณากรอกลิงก์ YouTube ที่ถูกต้อง');
+        return;
+    }
+    try {
+        showLoading(true);
+        const response = await fetch(`${API_BASE_URL}/posts`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data)
+        });
+        if (!response.ok) {
+            throw new Error('เกิดข้อผิดพลาดในการแชร์');
+        }
+        const result = await response.json();
+        // Show success message
+        showSuccessMessage('แชร์สำเร็จ!');
+        // Clear form
+        shareForm.reset();
+        // Reload links
+        await loadLinks();
+    } catch (error) {
+        console.error('Error sharing link:', error);
+        alert('เกิดข้อผิดพลาดในการแชร์: ' + error.message);
+    } finally {
+        showLoading(false);
+    }
+}
+// Load all shared links
+async function loadLinks() {
+    try {
+        showLoading(true);
+        const response = await fetch(`${API_BASE_URL}/posts`);
+        if (!response.ok) {
+            throw new Error('ไม่สามารถโหลดลิงก์ได้');
+        }
+        const links = await response.json();
+        displayLinks(links);
+    } catch (error) {
+        console.error('Error loading links:', error);
+        linksContainer.innerHTML = `
+            <div style="text-align: center; color: #666; padding: 20px;">
+                <i class="fas fa-exclamation-triangle"></i>
+                <p>ไม่สามารถโหลดลิงก์ได้: ${error.message}</p>
+            </div>
+        `;
+    } finally {
+        showLoading(false);
+    }
+}
+// Display links in the container
+function displayLinks(links) {
+    if (links.length === 0) {
+        linksContainer.innerHTML = `
+            <div style="text-align: center; color: #666; padding: 40px;">
+                <i class="fab fa-youtube" style="font-size: 3rem; margin-bottom: 15px;"></i>
+                <p>ยังไม่มีลิงก์ที่แชร์</p>
+                <p>เป็นคนแรกที่แชร์ลิงก์ YouTube!</p>
+            </div>
+        `;
+        return;
+    }
+    linksContainer.innerHTML = links.map(link => createLinkCard(link)).join('');
+    // Add event listeners for like and comment buttons
+    addLinkEventListeners();
+}
+// Create HTML for a single link card
+function createLinkCard(link) {
+    const videoId = extractYouTubeVideoId(link.youtube_link);
+    const embedUrl = videoId ? `https://www.youtube.com/embed/${videoId}` : '';
+    const timeAgo = getTimeAgo(new Date(link.created_at));
+    return `
+        <div class="link-card" data-link-id="${link.id}">
+            <div class="link-header">
+                <span class="user-name">
+                    <i class="fas fa-user"></i> ${escapeHtml(link.name)}
+                </span>
+                <span class="timestamp">${timeAgo}</span>
+            </div>
+            <div class="link-note">
+                ${escapeHtml(link.note)}
+            </div>
+            ${embedUrl ? `
+                <div class="youtube-embed">
+                    <iframe src="${embedUrl}"
+                            title="YouTube video player"
+                            frameborder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            allowfullscreen>
+                    </iframe>
+                </div>
+            ` : `
+                <div class="youtube-link">
+                    <a href="${link.youtube_link}" target="_blank" rel="noopener noreferrer">
+                        <i class="fab fa-youtube"></i> ดูวิดีโ���ใน YouTube
+                    </a>
+                </div>
+            `}
+            <div class="link-actions">
+                <button class="action-btn like-btn" data-link-id="${link.id}">
+                    <i class="fas fa-heart"></i>
+                    <span class="like-count">${link.likes}</span>
+                </button>
+                <button class="action-btn comment-btn" data-link-id="${link.id}">
+                    <i class="fas fa-comment"></i>
+                    คอมเมนต์
+                </button>
+            </div>
+            <div class="comments-section" id="comments-${link.id}" style="display: none;">
+                <div class="comment-form">
+                    <input type="text" placeholder="เขียนคอมเมนต์..." class="comment-input">
+                    <button type="button" class="add-comment-btn" data-link-id="${link.id}">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+                <div class="comments-list" id="comments-list-${link.id}">
+                    <!-- Comments will be loaded here -->
+                </div>
+            </div>
+        </div>
+    `;
+}
+// Add event listeners for link interactions
+function addLinkEventListeners() {
+    // Like buttons
+    document.querySelectorAll('.like-btn').forEach(btn => {
+        btn.addEventListener('click', handleLike);
+    });
+    // Comment buttons
+    document.querySelectorAll('.comment-btn').forEach(btn => {
+        btn.addEventListener('click', toggleComments);
+    });
+    // Add comment buttons
+    document.querySelectorAll('.add-comment-btn').forEach(btn => {
+        btn.addEventListener('click', handleAddComment);
+    });
+    // Enter key for comment input
+    document.querySelectorAll('.comment-input').forEach(input => {
+        input.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                const linkId = this.closest('.comments-section').id.split('-')[1];
+                const btn = document.querySelector(`.add-comment-btn[data-link-id="${linkId}"]`);
+                btn.click();
+            }
+        });
+    });
+}
+// Handle like button click
+async function handleLike(e) {
+    const linkId = e.currentTarget.dataset.linkId;
+    const likeBtn = e.currentTarget;
+    const likeCount = likeBtn.querySelector('.like-count');
+    try {
+        const response = await fetch(`${API_BASE_URL}/posts/${linkId}/like`, {
+            method: 'POST'
+        });
+        if (!response.ok) {
+            throw new Error('ไม่สามารถถูกใจได้');
+        }
+        const result = await response.json();
+        likeCount.textContent = result.likes;
+        // Add visual feedback
+        likeBtn.classList.add('liked');
+        setTimeout(() => likeBtn.classList.remove('liked'), 1000);
+    } catch (error) {
+        console.error('Error liking post:', error);
+        alert('เกิดข้อผิดพลาดในการถูกใจ');
+    }
+}
+// Toggle comments section
+async function toggleComments(e) {
+    const linkId = e.currentTarget.dataset.linkId;
+    const commentsSection = document.getElementById(`comments-${linkId}`);
+    if (commentsSection.style.display === 'none') {
+        commentsSection.style.display = 'block';
+        await loadComments(linkId);
+    } else {
+        commentsSection.style.display = 'none';
+    }
+}
+// Load comments for a specific link
+async function loadComments(linkId) {
+    try {
+        const response = await fetch(`${API_BASE_URL}/posts/${linkId}/comments`);
+        if (!response.ok) {
+            throw new Error('ไม่สามารถโหลดคอมเมนต์ได้');
+        }
+        const comments = await response.json();
+        const commentsList = document.getElementById(`comments-list-${linkId}`);
+        if (comments.length === 0) {
+            commentsList.innerHTML = '<p style="text-align: center; color: #666; padding: 10px;">ยังไม่มีคอมเมนต์</p>';
+        } else {
+            commentsList.innerHTML = comments.map(comment => `
+                <div class="comment">
+                    <div class="comment-author">
+                        <i class="fas fa-user"></i> ${escapeHtml(comment.name)}
+                    </div>
+                    <div class="comment-text">${escapeHtml(comment.comment)}</div>
+                </div>
+            `).join('');
+        }
+    } catch (error) {
+        console.error('Error loading comments:', error);
+    }
+}
+// Handle add comment
+async function handleAddComment(e) {
+    const linkId = e.currentTarget.dataset.linkId;
+    const commentsSection = document.getElementById(`comments-${linkId}`);
+    const commentInput = commentsSection.querySelector('.comment-input');
+    const commentText = commentInput.value.trim();
+    if (!commentText) {
+        alert('กรุณาเขียนคอมเมนต์');
+        return;
+    }
+    // Simple name prompt (in real app, you'd have user authentication)
+    const name = prompt('กรุณากรอกชื่อของคุณ:');
+    if (!name) return;
+    try {
+        const response = await fetch(`${API_BASE_URL}/posts/${linkId}/comments`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                name: name,
+                comment: commentText
+            })
+        });
+        if (!response.ok) {
+            throw new Error('ไม่สามารถเพิ่มคอมเมนต์ได้');
+        }
+        // Clear input
+        commentInput.value = '';
+        // Reload comments
+        await loadComments(linkId);
+        showSuccessMessage('เพิ่มคอมเมนต์สำเร็จ!');
+    } catch (error) {
+        console.error('Error adding comment:', error);
+        alert('เกิดข้อผิดพลาดในการเพิ่มคอมเมนต์');
+    }
+}
+// Utility functions
+function isValidYouTubeURL(url) {
+    const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)[a-zA-Z0-9_-]{11}/;
+    return youtubeRegex.test(url);
+}
+function extractYouTubeVideoId(url) {
+    const regex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/;
+    const match = url.match(regex);
+    return match ? match[1] : null;
+}
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+function getTimeAgo(date) {
+    const now = new Date();
+    const diffInSeconds = Math.floor((now - date) / 1000);
+    if (diffInSeconds < 60) return 'เมื่อสักครู่';
+    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} นาทีที่แล้ว`;
+    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} ชั่วโมงที่แล้ว`;
+    return `${Math.floor(diffInSeconds / 86400)} วันที่แล้ว`;
+}
+function showLoading(show) {
+    loadingSpinner.style.display = show ? 'block' : 'none';
+}
+function showSuccessMessage(message) {
+    successText.textContent = message;
+    successMessage.style.display = 'flex';
+    setTimeout(() => {
+        successMessage.style.display = 'none';
+    }, 3000);
+}

style.css ADDED Viewed

	@@ -0,0 +1,360 @@

+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    color: #333;
+}
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+/* Header */
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+.header-content h1 {
+    font-size: 2.5rem;
+    color: #FF0000;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+.header-content p {
+    font-size: 1.1rem;
+    color: #666;
+}
+/* Share Section */
+.share-section {
+    margin-bottom: 30px;
+}
+.share-card {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+.share-card h2 {
+    color: #333;
+    margin-bottom: 25px;
+    font-size: 1.5rem;
+    text-align: center;
+}
+.form-group {
+    margin-bottom: 20px;
+}
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: #555;
+}
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 12px 15px;
+    border: 2px solid #e1e5e9;
+    border-radius: 10px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.9);
+}
+.form-group input:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #FF0000;
+    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
+.form-group textarea {
+    resize: vertical;
+    min-height: 80px;
+}
+.btn-share {
+    width: 100%;
+    padding: 15px;
+    background: linear-gradient(45deg, #FF0000, #CC0000);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+.btn-share:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3);
+}
+.btn-share:active {
+    transform: translateY(0);
+}
+/* Feed Section */
+.feed-section {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+.feed-section h2 {
+    color: #333;
+    margin-bottom: 25px;
+    font-size: 1.5rem;
+    text-align: center;
+}
+/* Link Card */
+.link-card {
+    background: #fff;
+    border: 1px solid #e1e5e9;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+}
+.link-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+.link-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+.link-header .user-name {
+    font-weight: 600;
+    color: #333;
+    margin-right: 10px;
+}
+.link-header .timestamp {
+    color: #888;
+    font-size: 0.9rem;
+}
+.link-note {
+    margin-bottom: 15px;
+    color: #555;
+    line-height: 1.5;
+}
+.youtube-embed {
+    margin-bottom: 15px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+.youtube-embed iframe {
+    width: 100%;
+    height: 315px;
+    border: none;
+}
+.link-actions {
+    display: flex;
+    gap: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #e1e5e9;
+}
+.action-btn {
+    background: none;
+    border: none;
+    padding: 8px 15px;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+.like-btn {
+    color: #666;
+}
+.like-btn:hover,
+.like-btn.liked {
+    background: rgba(255, 0, 0, 0.1);
+    color: #FF0000;
+}
+.comment-btn {
+    color: #666;
+}
+.comment-btn:hover {
+    background: rgba(0, 123, 255, 0.1);
+    color: #007bff;
+}
+/* Comments Section */
+.comments-section {
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #e1e5e9;
+}
+.comment-form {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+.comment-form input {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    font-size: 0.9rem;
+}
+.comment-form button {
+    padding: 8px 15px;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+.comment-form button:hover {
+    background: #0056b3;
+}
+.comment {
+    background: #f8f9fa;
+    padding: 10px 15px;
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+.comment-author {
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 5px;
+}
+.comment-text {
+    color: #555;
+    font-size: 0.9rem;
+}
+/* Loading Spinner */
+.loading-spinner {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(255, 255, 255, 0.95);
+    padding: 30px;
+    border-radius: 15px;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    display: none;
+}
+.loading-spinner i {
+    font-size: 2rem;
+    color: #FF0000;
+    margin-bottom: 10px;
+}
+/* Success Message */
+.success-message {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: #28a745;
+    color: white;
+    padding: 15px 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    display: none;
+    align-items: center;
+    gap: 10px;
+    z-index: 1000;
+}
+.success-message i {
+    font-size: 1.2rem;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 15px;
+    }
+    .header-content h1 {
+        font-size: 2rem;
+    }
+    .share-card,
+    .feed-section {
+        padding: 20px;
+    }
+    .youtube-embed iframe {
+        height: 200px;
+    }
+    .link-actions {
+        flex-wrap: wrap;
+    }
+}
+/* Animation */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.link-card {
+    animation: fadeInUp 0.5s ease;
+}

user.cpython-311.pyc ADDED Viewed

Binary file (3.4 kB). View file