Add a live streaming link to all page headers and navigation
Integrate a "LIVE" link with pulsing animation into the header navigation of multiple pages (FolxStadlPage, GeschichteLiedPage, GipfelstammtischPage, VideoPage) and the LivePage itself. This includes updating the LivePage's header to include a search bar and mobile menu toggle. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/H8zer6l
This commit is contained in:
sebastjanartic
parent
518d129634
commit
abee17e58e
8
.replit
8
.replit
@ -15,10 +15,6 @@ run = ["npm", "run", "start"]
|
||||
localPort = 5000
|
||||
externalPort = 80
|
||||
|
||||
[[ports]]
|
||||
localPort = 33305
|
||||
externalPort = 3002
|
||||
|
||||
[[ports]]
|
||||
localPort = 34033
|
||||
externalPort = 3001
|
||||
@ -27,6 +23,10 @@ externalPort = 3001
|
||||
localPort = 35637
|
||||
externalPort = 3000
|
||||
|
||||
[[ports]]
|
||||
localPort = 46809
|
||||
externalPort = 3002
|
||||
|
||||
[env]
|
||||
PORT = "5000"
|
||||
|
||||
|
||||
BIN
attached_assets/image_1758902218391.png
Normal file
BIN
attached_assets/image_1758902218391.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 816 KiB |
@ -127,6 +127,11 @@ export default function FolxStadlPage() {
|
||||
GIPFELSTAMMTISCH
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/live" className="relative text-red-500 hover:text-red-400 transition-colors group font-bold flex items-center space-x-1">
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-400 via-red-500 to-red-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="relative">
|
||||
@ -193,6 +198,14 @@ export default function FolxStadlPage() {
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
<Link
|
||||
href="/live"
|
||||
className="text-red-500 hover:text-red-400 transition-colors font-bold py-1 border-l-2 border-transparent hover:border-red-500 pl-3 flex items-center space-x-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@ -129,6 +129,11 @@ export default function GeschichteLiedPage() {
|
||||
GIPFELSTAMMTISCH
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/live" className="relative text-red-500 hover:text-red-400 transition-colors group font-bold flex items-center space-x-1">
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-400 via-red-500 to-red-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="relative">
|
||||
@ -195,6 +200,14 @@ export default function GeschichteLiedPage() {
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
<Link
|
||||
href="/live"
|
||||
className="text-red-500 hover:text-red-400 transition-colors font-bold py-1 border-l-2 border-transparent hover:border-red-500 pl-3 flex items-center space-x-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@ -129,6 +129,11 @@ export default function GipfelstammtischPage() {
|
||||
GIPFELSTAMMTISCH
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/live" className="relative text-red-500 hover:text-red-400 transition-colors group font-bold flex items-center space-x-1">
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-400 via-red-500 to-red-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="relative">
|
||||
@ -195,6 +200,14 @@ export default function GipfelstammtischPage() {
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
<Link
|
||||
href="/live"
|
||||
className="text-red-500 hover:text-red-400 transition-colors font-bold py-1 border-l-2 border-transparent hover:border-red-500 pl-3 flex items-center space-x-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { ChevronLeft, Maximize, Volume2, VolumeX, Radio } from 'lucide-react';
|
||||
import { ChevronLeft, Maximize, Volume2, VolumeX, Radio, Menu, X, Search } from 'lucide-react';
|
||||
import { Link } from 'wouter';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import VideoCard from '@/components/video-card';
|
||||
import AdSenseAd from '@/components/adsense-ad';
|
||||
@ -20,6 +21,8 @@ export default function LivePage() {
|
||||
const [volume, setVolume] = useState(1);
|
||||
const [isMuted, setIsMuted] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
// HLS stream URL
|
||||
const streamUrl = 'https://cdne.folxplay.tv/fxt/streams/ch-4/master.m3u8';
|
||||
@ -277,21 +280,139 @@ export default function LivePage() {
|
||||
<div className="bg-bunny-darker border-b border-white/10">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
|
||||
<Button variant="ghost" size="sm" className="text-white hover:bg-white/10">
|
||||
<ChevronLeft className="w-4 h-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
{/* Left side - Logo */}
|
||||
<div className="flex items-center space-x-6 flex-1">
|
||||
<Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity py-4">
|
||||
<div className="w-10 h-10 bg-[#da234d] rounded-lg flex items-center justify-center shadow-lg">
|
||||
<div className="w-0 h-0 border-l-[11px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-wide">video.folx.tv</h1>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
|
||||
<span className="text-red-500 font-bold text-sm uppercase tracking-wide">LIVE</span>
|
||||
{/* Right side - Navigation + Search */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Desktop navigation */}
|
||||
<div className="hidden md:flex items-center space-x-6">
|
||||
<nav className="flex space-x-6">
|
||||
<Link href="/" className="relative text-bunny-light hover:text-white transition-colors group">
|
||||
Startseite
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/folx-stadl" className="relative text-bunny-light hover:text-white transition-colors group">
|
||||
FOLX STADL
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/geschichte-lied" className="relative text-bunny-light hover:text-white transition-colors group">
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-white transition-colors group">
|
||||
GIPFELSTAMMTISCH
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/live" className="relative text-red-500 hover:text-red-400 transition-colors group font-bold flex items-center space-x-1">
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-400 via-red-500 to-red-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Suchen..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-56"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="md:hidden p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
|
||||
data-testid="button-mobile-menu-live"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="w-6 h-6 text-white" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6 text-white" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu dropdown */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
|
||||
<div className="px-6 py-4">
|
||||
{/* Navigation Section */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Navigation</h3>
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-bunny-light hover:text-white transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Startseite
|
||||
</Link>
|
||||
<Link
|
||||
href="/folx-stadl"
|
||||
className="text-bunny-light hover:text-white transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
FOLX STADL
|
||||
</Link>
|
||||
<Link
|
||||
href="/geschichte-lied"
|
||||
className="text-bunny-light hover:text-white transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
DIE GESCHICHTE DES LIEDES
|
||||
</Link>
|
||||
<Link
|
||||
href="/gipfelstammtisch"
|
||||
className="text-bunny-light hover:text-white transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
<Link
|
||||
href="/live"
|
||||
className="text-red-500 hover:text-red-400 transition-colors font-bold py-1 border-l-2 border-transparent hover:border-red-500 pl-3 flex items-center space-x-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Separator */}
|
||||
<div className="border-t border-white/10 mb-4"></div>
|
||||
|
||||
{/* Search Section */}
|
||||
<div>
|
||||
<h3 className="text-white text-xs font-semibold uppercase tracking-wider mb-3 opacity-70">Suchen</h3>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Suchen..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-[#da234d] focus:bg-white/15 transition-all w-full"
|
||||
/>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
|
||||
@ -396,6 +396,11 @@ export default function VideoPage() {
|
||||
GIPFELSTAMMTISCH
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
<Link href="/live" className="relative text-red-500 hover:text-red-400 transition-colors group font-bold flex items-center space-x-1">
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-400 via-red-500 to-red-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="relative">
|
||||
@ -462,6 +467,14 @@ export default function VideoPage() {
|
||||
>
|
||||
GIPFELSTAMMTISCH
|
||||
</Link>
|
||||
<Link
|
||||
href="/live"
|
||||
className="text-red-500 hover:text-red-400 transition-colors font-bold py-1 border-l-2 border-transparent hover:border-red-500 pl-3 flex items-center space-x-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
|
||||
<span>LIVE</span>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user