diff options
Diffstat (limited to 'front-end/src')
| -rw-r--r-- | front-end/src/App.css | 322 | ||||
| -rw-r--r-- | front-end/src/App.jsx | 298 | ||||
| -rw-r--r-- | front-end/src/assets/react.svg | 1 | ||||
| -rw-r--r-- | front-end/src/main.jsx | 9 |
4 files changed, 630 insertions, 0 deletions
diff --git a/front-end/src/App.css b/front-end/src/App.css new file mode 100644 index 0000000..1548a0d --- /dev/null +++ b/front-end/src/App.css @@ -0,0 +1,322 @@ +/* src/App.css */ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.App { + text-align: center; + min-height: 100vh; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +.App-header { + background: rgba(255, 255, 255, 0.1); + padding: 2rem; + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +.App-header h1 { + color: white; + margin-bottom: 1.5rem; + font-size: 2.5rem; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); +} + +.channel-selector { + max-width: 600px; + margin: 0 auto; +} + +.selector-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +} + +.selector-header label { + color: white; + font-size: 1.1rem; + font-weight: bold; +} + +.refresh-button { + padding: 0.4rem 0.8rem; + border: none; + border-radius: 15px; + background: rgba(255, 255, 255, 0.2); + color: white; + cursor: pointer; + font-size: 0.9rem; + transition: all 0.3s ease; +} + +.refresh-button:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.3); + transform: rotate(45deg); +} + +.refresh-button:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.channel-select { + width: 100%; + padding: 0.8rem 1.2rem; + border: none; + border-radius: 25px; + font-size: 1rem; + background: rgba(255, 255, 255, 0.9); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + margin-bottom: 1rem; +} + +.channel-select:focus { + outline: none; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); +} + +.channel-info { + color: rgba(255, 255, 255, 0.9); + font-size: 0.9rem; +} + +.channel-info strong { + color: #74b9ff; +} + +.main-content { + padding: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.loading, .error, .no-channels, .no-videos, .no-selection { + color: white; + font-size: 1.2rem; + padding: 2rem; + background: rgba(255, 255, 255, 0.1); + border-radius: 15px; + backdrop-filter: blur(10px); + margin: 1rem 0; +} + +.error { + color: #ff6b6b; +} + +.no-channels, .no-selection { + color: #ffd93d; +} + +.no-videos { + color: #ffd93d; +} + +.retry-button { + margin-top: 1rem; + padding: 0.5rem 1rem; + border: none; + border-radius: 20px; + background: rgba(255, 255, 255, 0.2); + color: white; + cursor: pointer; + transition: all 0.3s ease; +} + +.retry-button:hover { + background: rgba(255, 255, 255, 0.3); +} + +.videos-container h2 { + color: white; + margin-bottom: 2rem; + font-size: 2rem; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); +} + +.videos-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.video-card { + background: rgba(255, 255, 255, 0.1); + border-radius: 15px; + overflow: hidden; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + transition: all 0.3s ease; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +.video-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); + border-color: rgba(255, 255, 255, 0.3); +} + +.video-thumbnail { + position: relative; + height: 180px; + overflow: hidden; +} + +.thumbnail-image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.video-card:hover .thumbnail-image { + transform: scale(1.05); +} + +.play-button { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 3rem; + color: white; + text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); + opacity: 0.9; + transition: all 0.3s ease; +} + +.video-card:hover .play-button { + opacity: 1; + transform: translate(-50%, -50%) scale(1.1); +} + +.video-info { + padding: 1.5rem; + text-align: left; +} + +.video-title { + color: white; + font-size: 1.1rem; + font-weight: bold; + margin-bottom: 0.8rem; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + position: relative; + cursor: help; +} + +.video-author, .video-date { + color: rgba(255, 255, 255, 0.8); + font-size: 0.9rem; + margin-bottom: 0.5rem; +} + +.channel-link { + color: #74b9ff; + text-decoration: none; +} + +.channel-link:hover { + text-decoration: underline; +} + +.video-summary { + margin: 1rem 0; + padding: 0.8rem; + background: rgba(255, 255, 255, 0.1); + border-radius: 8px; + border-left: 3px solid #74b9ff; +} + +.video-summary p { + color: rgba(255, 255, 255, 0.9); + font-size: 0.85rem; + line-height: 1.4; + margin: 0; + transition: all 0.3s ease; +} + +.video-summary p.collapsed { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.video-summary p.expanded { + display: block; + overflow: visible; +} + +.expand-button { + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.3); + color: #74b9ff; + padding: 0.3rem 0.8rem; + border-radius: 12px; + font-size: 0.75rem; + cursor: pointer; + margin-top: 0.5rem; + transition: all 0.3s ease; +} + +.expand-button:hover { + background: rgba(255, 255, 255, 0.25); + transform: translateY(-1px); +} + +.video-actions { + margin-top: 1rem; +} + +.watch-button { + display: inline-block; + padding: 0.6rem 1.2rem; + background: #ff4757; + color: white; + text-decoration: none; + border-radius: 20px; + font-weight: bold; + transition: all 0.3s ease; + font-size: 0.9rem; +} + +.watch-button:hover { + background: #ff6b81; + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3); +} + +/* Responsive design */ +@media (max-width: 768px) { + .selector-header { + flex-direction: column; + gap: 0.5rem; + align-items: flex-start; + } + + .videos-grid { + grid-template-columns: 1fr; + } + + .App-header h1 { + font-size: 2rem; + } + + .video-info { + padding: 1rem; + } +} diff --git a/front-end/src/App.jsx b/front-end/src/App.jsx new file mode 100644 index 0000000..a540e47 --- /dev/null +++ b/front-end/src/App.jsx @@ -0,0 +1,298 @@ +// src/App.js +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; +import './App.css'; + +const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://127.0.0.1:4000'; + +function App() { + const [videos, setVideos] = useState([]); + const [channels, setChannels] = useState([]); + const [loading, setLoading] = useState(true); + const [channelsLoading, setChannelsLoading] = useState(true); + const [error, setError] = useState(null); + const [selectedChannelId, setSelectedChannelId] = useState(''); + const [expandedDescriptions, setExpandedDescriptions] = useState({}); + + const fetchChannels = async () => { + try { + setChannelsLoading(true); + const response = await axios.get(`${API_BASE_URL}/subs-info`); + + if (response.data && Array.isArray(response.data)) { + const formattedChannels = response.data.map(channel => { + // Extract the channel ID from the _id field + const channelId = channel._id.replace('yt:channel:', ''); + return { + id: channelId, + _id: channel._id, + last_video_update: channel.last_video_update, + new_vids: channel.new_vids, + time_between_fetches: channel.time_between_fetches, + videos: channel.videos + }; + }); + setChannels(formattedChannels); + } + } catch (err) { + console.error('Error fetching channels:', err); + setError('Failed to fetch available channels.'); + } finally { + setChannelsLoading(false); + } + }; + + const fetchVideos = async (channelId) => { + try { + setLoading(true); + setError(null); + setExpandedDescriptions({}); // Reset expanded states when fetching new videos + + const apiUrl = `${API_BASE_URL}/vid-from-link/yt:channel:${channelId}`; + const response = await axios.get(apiUrl); + + if (response.data && Array.isArray(response.data)) { + setVideos(response.data); + } else { + throw new Error('Invalid response format'); + } + } catch (err) { + setError('Failed to fetch videos. Please check the channel and ensure the API is running.'); + console.error('Error fetching videos:', err); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchChannels(); + }, []); + + useEffect(() => { + if (selectedChannelId) { + fetchVideos(selectedChannelId); + } + }, [selectedChannelId]); + + const handleChannelChange = (e) => { + setSelectedChannelId(e.target.value); + }; + + const handleRefreshChannels = () => { + fetchChannels(); + }; + + const toggleDescription = (videoId) => { + setExpandedDescriptions(prev => ({ + ...prev, + [videoId]: !prev[videoId] + })); + }; + + const formatDate = (dateString) => { + try { + return new Date(dateString).toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + } catch { + return dateString; + } + }; + + const formatRelativeTime = (dateString) => { + try { + const date = new Date(dateString); + const now = new Date(); + const diffInHours = Math.floor((now - date) / (1000 * 60 * 60)); + + if (diffInHours < 1) { + return 'Just now'; + } else if (diffInHours < 24) { + return `${diffInHours}h ago`; + } else { + const diffInDays = Math.floor(diffInHours / 24); + return `${diffInDays}d ago`; + } + } catch { + return dateString; + } + }; + + return ( + <div className="App"> + <header className="App-header"> + <h1>YouTube Channel Videos</h1> + + <div className="channel-selector"> + <div className="selector-header"> + <label htmlFor="channel-select">Select Channel:</label> + <button + onClick={handleRefreshChannels} + className="refresh-button" + disabled={channelsLoading} + > + {channelsLoading ? 'Refreshing...' : '↻ Refresh'} + </button> + </div> + + <select + id="channel-select" + value={selectedChannelId} + onChange={handleChannelChange} + className="channel-select" + disabled={channelsLoading || channels.length === 0} + > + {channelsLoading ? ( + <option value="">Loading channels...</option> + ) : channels.length === 0 ? ( + <option value="">No channels available</option> + ) : ( + <> + <option value="">Choose a channel...</option> + {channels.map((channel) => ( + <option key={channel.id} value={channel.id}> + {channel.id} ({channel.videos} videos, {channel.new_vids} new) + </option> + ))} + </> + )} + </select> + + {selectedChannelId && channels.length > 0 && ( + <div className="channel-info"> + <p> + Selected: <strong>{selectedChannelId}</strong> + {channels.find(ch => ch.id === selectedChannelId)?.last_video_update && ( + <span> • Last updated: {formatRelativeTime(channels.find(ch => ch.id === selectedChannelId).last_video_update)}</span> + )} + </p> + </div> + )} + </div> + </header> + + <main className="main-content"> + {channelsLoading && <div className="loading">Loading channels...</div>} + + {error && ( + <div className="error"> + {error} + <button onClick={() => selectedChannelId && fetchVideos(selectedChannelId)} className="retry-button"> + Try Again + </button> + </div> + )} + + {!channelsLoading && channels.length === 0 && !error && ( + <div className="no-channels"> + <h3>No channels available</h3> + <p>No YouTube channels found in the subscription list.</p> + <button onClick={handleRefreshChannels} className="retry-button"> + Refresh Channels + </button> + </div> + )} + + {loading && selectedChannelId && ( + <div className="loading">Loading videos for {selectedChannelId}...</div> + )} + + {!loading && !error && selectedChannelId && ( + <div className="videos-container"> + <h2> + Latest Videos from {selectedChannelId} + {videos.length > 0 && ` (${videos.length})`} + </h2> + <div className="videos-grid"> + {videos.sort((a, b) => new Date(b.published) - new Date(a.published)).map((video) => ( + <div key={video.id} className="video-card"> + <div className="video-thumbnail"> + <img + src={video.thumbnail} + alt={video.title} + className="thumbnail-image" + onError={(e) => { + e.target.src = 'https://via.placeholder.com/300x180/333/fff?text=No+Thumbnail'; + }} + /> + <div className="play-button">▶</div> + </div> + + <div className="video-info"> + <h3 + className="video-title" + title={video.title} + > + {video.title} + </h3> + <p className="video-author"> + By: <a + href={video.author_channel} + target="_blank" + rel="noopener noreferrer" + className="channel-link" + > + {video.author} + </a> + </p> + <p className="video-date">Published: {formatDate(video.published)}</p> + {video.updated && ( + <p className="video-date">Updated: {formatDate(video.updated)}</p> + )} + + {video.summary && ( + <div className="video-summary"> + <p className={expandedDescriptions[video.id] ? 'expanded' : 'collapsed'}> + {video.summary} + </p> + {video.summary.length > 100 && ( + <button + className="expand-button" + onClick={() => toggleDescription(video.id)} + > + {expandedDescriptions[video.id] ? 'Show Less' : 'Show More'} + </button> + )} + </div> + )} + + <div className="video-actions"> + <a + href={video.link} + target="_blank" + rel="noopener noreferrer" + className="watch-button" + > + Watch on YouTube + </a> + </div> + </div> + </div> + ))} + </div> + </div> + )} + + {!loading && !error && selectedChannelId && videos.length === 0 && ( + <div className="no-videos"> + <h3>No videos found for this channel</h3> + <p>The channel might not have any videos or there was an issue loading them.</p> + </div> + )} + + {!channelsLoading && !selectedChannelId && channels.length > 0 && ( + <div className="no-selection"> + <h3>Please select a channel to view videos</h3> + <p>Choose a channel from the dropdown above to see its latest videos.</p> + </div> + )} + </main> + </div> + ); +} + +export default App; diff --git a/front-end/src/assets/react.svg b/front-end/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/front-end/src/assets/react.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file diff --git a/front-end/src/main.jsx b/front-end/src/main.jsx new file mode 100644 index 0000000..3d9da8a --- /dev/null +++ b/front-end/src/main.jsx @@ -0,0 +1,9 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + <StrictMode> + <App /> + </StrictMode>, +) |
