{content.title}

{content.director} | {content.releaseYear} | {content.duration}

\n \n

\n {content.qualities.map(q => (\n \n ))}\n

\n \n

\n {formatTime(currentTime)}\n {formatTime(duration)}\n

\n \n \n

About the Movie

{content.description}

\n Genre: {content.genre}\n Rating: ⭐ {content.rating}\n Languages: {content.languages.join(\", \")}\n {content.cast && (\n

Cast

{content.cast.join(\", \")}

\n )}\n

\n );\n}\n\nfunction ContentCard({ content, onPlay }) {\n return (\n

{content.title}

{content.genre} | ⭐ {content.rating}

{content.description}

\n \n {content.languages.map(lang => (\n {lang}\n ))}\n \n {content.videoUrl && (\n \n )}\n

\n );\n}\n\nfunction App() {\n const [selectedGenre, setSelectedGenre] = useState(null);\n const [selectedLanguage, setSelectedLanguage] = useState(null);\n const [playingContent, setPlayingContent] = useState(null);\n const [searchQuery, setSearchQuery] = useState(\"\");\n\n const filteredContent = useMemo(() => {\n return MOCK_CONTENT.filter(content => \n (!selectedGenre || content.genre === selectedGenre) &&\n (!selectedLanguage || content.languages.includes(selectedLanguage)) &&\n (searchQuery === \"\" || \n content.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\n content.description.toLowerCase().includes(searchQuery.toLowerCase()) ||\n content.genre.toLowerCase().includes(searchQuery.toLowerCase()) ||\n content.languages.some(lang => lang.toLowerCase().includes(searchQuery.toLowerCase()))\n )\n );\n }, [selectedGenre, selectedLanguage, searchQuery]);\n\n const genres = [...new Set(MOCK_CONTENT.map(content => content.genre))];\n const languages = [...new Set(MOCK_CONTENT.flatMap(content => content.languages))];\n\n return (\n

\n {playingContent && (\n setPlayingContent(null)} \n />\n )}\n

🎬 JioStream

\n setSearchQuery(e.target.value)}\n className=\"search-input\"\n />\n

\n \n {genres.map(genre => (\n \n ))}\n

\n \n {languages.map(lang => (\n \n ))}\n

\n {filteredContent.map(content => (\n \n ))}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n JioStream - Your Content Hub\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\n/* Previous CSS remains the same, with additional styles */\n.video-controls {\n background-color: #333;\n padding: 10px;\n}\n\n.progress-bar {\n width: 100%;\n margin-bottom: 10px;\n}\n\n.progress-bar input[type=\"range\"] {\n width: 100%;\n -webkit-appearance: none;\n background: transparent;\n}\n\n.progress-bar input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 15px;\n height: 15px;\n background: #e50914;\n cursor: pointer;\n border-radius: 50%;\n}\n\n.time-display {\n display: flex;\n justify-content: space-between;\n color: white;\n font-size: 0.8em;\n}\n\n.cast-section {\n margin-top: 10px;\n}\n\n.cast-section h4 {\n margin: 0 0 5px 0;\n color: #e50914;\n}\n\n.cast-section p {\n margin: 0;\n font-size: 0.9em;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Parvezalam6/ottPlatformApp/code/main.tsx","extension","actionData","errors"]