47 | {!!title && (
48 |
49 | {title} {moreLink &&
51 | )}
52 |
54 |
49 | {title} {moreLink &&
51 | )}
52 | {hasSearchButton && moreLink &&
53 | {children}
55 | -
6 | {new Array(13).fill(0).map((_, i) => (
7 |
- 11 | {`${`${i * 2}`.padStart(2, '0')}:00`} 12 | {i < 12 && ( 13 | 14 | )} 15 | 16 | ))} 17 |
8 | {[...new Array(10)].map((_, index) => (
9 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/loader.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'preact/hooks';
2 |
3 | export const Loader = () => {
4 | const needleRef = useRef
14 | {index}
15 |
16 | ))}
17 |
31 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/components/podcast-card.tsx:
--------------------------------------------------------------------------------
1 | import { getPodcastUrlID, normalizedUrlWithoutScheme, slugify, stripHtml } from '~/lib/utils';
2 | import { Podcast } from '~/store/types';
3 | import { Card, CardContent } from './ui/card';
4 |
5 | interface Props {
6 | podcast: Podcast;
7 | size?: 'default' | 'large';
8 | }
9 |
10 | export const PodcastCard = ({ podcast, size }: Props) => {
11 | if (size === 'large') {
12 | return (
13 |
14 |
32 |
38 |
39 |
18 |
23 | 19 | {podcast.title} 20 |
21 |{stripHtml(podcast.description)}
22 |
35 |
44 |
53 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/src/components/radio-station-card.tsx:
--------------------------------------------------------------------------------
1 | import { Bookmark, Play, Trash2 } from 'lucide-preact';
2 | import { Badge } from '~/components/ui/badge';
3 | import { useRadioBrowser } from '~/hooks/useRadioBrowser';
4 | import { cn } from '~/lib/utils';
5 | import { playerState } from '~/store/signals/player';
6 | import {
7 | addRadioBrowserStation,
8 | addRecentlyVisitedRadioStation,
9 | deleteBrowserStation,
10 | followedRadioStationIDs,
11 | getRadioStationLanguage,
12 | RADIO_BROWSER_PARAM_PREFIX,
13 | } from '~/store/signals/radio';
14 | import { RadioStation } from '~/store/types';
15 | import { Button } from './ui/button';
16 |
17 | interface Props {
18 | station: RadioStation;
19 | size?: 'default' | 'large';
20 | hasDeleteHidden?: boolean;
21 | }
22 |
23 | export const RadioStationCard = ({ station, size = 'default', hasDeleteHidden = false }: Props) => {
24 | const { setStationClick } = useRadioBrowser();
25 |
26 | const onClickPlay = (e: { preventDefault: () => void; stopPropagation: () => void }) => {
27 | e.preventDefault();
28 | e.stopPropagation();
29 | addRadioBrowserStation(station);
30 | addRecentlyVisitedRadioStation(station.id);
31 | playerState.value = {
32 | playType: 'radio',
33 | isPlaying: true,
34 | contentID: station.id,
35 | title: station.name,
36 | description: '',
37 | imageUrl: station.logosource,
38 | streams: station.streams,
39 | pageLocation: `/radio-station/${station.id}`,
40 | };
41 | if (station.stationuuid) {
42 | setStationClick(station.stationuuid);
43 | }
44 | };
45 |
46 | const handleDeleteStation = (e: { preventDefault: () => void; stopPropagation: () => void }) => {
47 | e.preventDefault();
48 | e.stopPropagation();
49 | if (
50 | station.id.startsWith(RADIO_BROWSER_PARAM_PREFIX) &&
51 | confirm(
52 | `This is a locally saved station (from RadioBrowser).\n\nAre you sure you want to delete "${station.name}"?`,
53 | )
54 | ) {
55 | deleteBrowserStation(station.id);
56 | }
57 | };
58 |
59 | const RadioFlag = () => {
60 | const stationLanguage = getRadioStationLanguage(station);
61 | if (!stationLanguage?.flag) return null;
62 |
63 | return (
64 |
45 | 
46 |
52 |
47 |
48 | {podcast.title}
49 |
50 |
51 |
80 |
139 |
140 | );
141 | }
142 |
143 | return (
144 |
145 |
81 |
90 |
101 |
91 | 
92 |
93 |
100 |
102 |
132 | {followedRadioStationIDs.value.includes(station.id) && (
133 | 110 | {station.name} 111 | {!hasDeleteHidden && station.id.startsWith(RADIO_BROWSER_PARAM_PREFIX) && ( 112 | 121 | )} 122 |
123 |
124 |
127 | {genre}
128 |
129 | ))}
130 |
131 |
146 |
155 |
171 |
172 | );
173 | };
174 |
--------------------------------------------------------------------------------
/src/components/share-button.tsx:
--------------------------------------------------------------------------------
1 | import { Share2 } from 'lucide-preact';
2 | import { useCallback } from 'preact/hooks';
3 | import { cn } from '~/lib/utils';
4 | import { uiState } from '~/store/signals/ui';
5 |
6 | type Props = {
7 | hasDarkBackground: boolean;
8 | shareUrl?: string;
9 | className?: string;
10 | };
11 |
12 | export function ShareButton({ hasDarkBackground, shareUrl, className }: Props) {
13 | const handleShare = useCallback(async () => {
14 | if (!navigator.share) return;
15 | try {
16 | await navigator.share({
17 | title: uiState.value.headerTitle || '1tuner.com | listen to radio & podcasts',
18 | url: shareUrl || window?.location.href,
19 | });
20 | } catch (error) {
21 | console.error('Error sharing:', error);
22 | }
23 | }, [shareUrl, uiState.value.headerTitle]);
24 |
25 | return (
26 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import { cva, type VariantProps } from 'class-variance-authority';
2 | import { HTMLAttributes } from 'preact/compat';
3 | import { cn } from '~/lib/utils';
4 |
5 | const badgeVariants = cva(
6 | 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
7 | {
8 | variants: {
9 | variant: {
10 | default: 'border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80',
11 | secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
12 | destructive: 'border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80',
13 | outline: 'text-foreground',
14 | },
15 | },
16 | defaultVariants: {
17 | variant: 'default',
18 | },
19 | },
20 | );
21 |
22 | export interface BadgeProps extends HTMLAttributes
156 |
157 |
164 |
170 |
165 |
166 | {station.name}
167 |
168 |
169 |
115 |
153 | );
154 |
155 | return (
156 |
116 | {
121 | setSearchTerm((e.target as HTMLInputElement).value);
122 | setHighlightedIndex(0);
123 | }}
124 | placeholder="Type to search..."
125 | class="w-full px-3 py-2 border rounded-md focus:outline-hidden focus:ring-2"
126 | />
127 |
128 | -
129 | {!filteredOptions.length ? (
130 |
- No options found 131 | ) : ( 132 | filteredOptions.map((option, index) => ( 133 |
- { 138 | onChangeOption(option.value); 139 | closePopover(); 140 | }} 141 | class={cn( 142 | 'px-4 py-2 cursor-pointer flex items-center gap-2', 143 | 'hover:bg-accent hover:text-accent-foreground', 144 | index === highlightedIndex && 'bg-accent text-accent-foreground', 145 | )} 146 | > 147 | {option.label} 148 | 149 | )) 150 | )} 151 |
157 | {trigger || defaultTrigger}
158 | {!useNativePopover && isOpen && content}
159 | {useNativePopover && content}
160 |
161 | );
162 | }
163 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import { forwardRef, InputHTMLAttributes } from 'preact/compat';
2 | import { cn } from '~/lib/utils';
3 |
4 | const Input = forwardRef-
20 | {options.map((option) => {
21 | return (
22 |
-
23 |
31 |
32 | );
33 | })}
34 |
19 |
31 |
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
1 | import type { ComponentProps } from 'preact';
2 | import { cn } from '~/lib/utils';
3 |
4 | type Props = ComponentProps<'input'> & {
5 | label?: string;
6 | };
7 |
8 | export function Switch({ label, ...props }: Props) {
9 | return (
10 |
11 |
28 | {label && {label}}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | interface Window {
2 | __HEAD_DATA__?: HeadData;
3 | chrome: {
4 | cast: {
5 | initialized: boolean;
6 | ApiConfig: typeof chrome.cast.ApiConfig;
7 | initialize: (
8 | apiConfig: chrome.cast.ApiConfig,
9 | successCallback: () => void,
10 | errorCallback: (error: Error) => void,
11 | ) => void;
12 | SessionRequest: typeof chrome.cast.SessionRequest;
13 | isAvailable: boolean;
14 | requestSession: (
15 | successCallback: (session: chrome.cast.Session) => void,
16 | errorCallback: (error: Error) => void,
17 | ) => void;
18 | media: {
19 | LoadRequest: typeof chrome.cast.media.LoadRequest;
20 | MediaInfo: typeof chrome.cast.media.MediaInfo;
21 | GenericMediaMetadata: typeof chrome.cast.media.GenericMediaMetadata;
22 | };
23 | };
24 | };
25 | __onGCastApiAvailable?: (isAvailable: boolean) => void;
26 | }
27 |
28 | // declare namespace chrome.cast {
29 | // interface Session {
30 | // loadMedia(request: media.LoadRequest, arg1: (media: any) => void, arg2: (error: any) => void): unknown;
31 | // media: any;
32 | // stop: () => void;
33 | // }
34 |
35 | // class ApiConfig {
36 | // constructor(
37 | // sessionRequest: SessionRequest,
38 | // sessionListener: (session: Session) => void,
39 | // receiverListener: (availability: string) => void,
40 | // );
41 | // }
42 |
43 | // class SessionRequest {
44 | // constructor(applicationId: string);
45 | // }
46 |
47 | // namespace media {
48 | // interface LoadRequest {
49 | // mediaInfo: MediaInfo;
50 | // }
51 |
52 | // interface MediaInfo {
53 | // contentUrl: string;
54 | // contentType: string;
55 | // metadata?: GenericMediaMetadata;
56 | // }
57 |
58 | // interface GenericMediaMetadata {
59 | // title?: string;
60 | // subtitle?: string;
61 | // images?: ImageInfo[];
62 | // }
63 |
64 | // interface ImageInfo {
65 | // url: string;
66 | // }
67 |
68 | // interface Media {
69 | // getEstimatedTime(): number;
70 | // seek(request: any): unknown;
71 | // duration(
72 | // arg0: string,
73 | // playerState: any,
74 | // currentTime: (arg0: string, playerState: any, currentTime: any, duration: any) => unknown,
75 | // duration: any,
76 | // ): unknown;
77 | // currentTime(arg0: string, playerState: any, currentTime: any, duration: any): unknown;
78 | // addUpdateListener(handleMediaStatusUpdate: (isAlive: boolean) => void): unknown;
79 | // removeUpdateListener(): unknown;
80 | // playerState: any;
81 | // play: (request?: any) => void;
82 | // pause: (request?: any) => void;
83 | // }
84 |
85 | // class LoadRequest {
86 | // autoplay: boolean;
87 | // constructor(mediaInfo: MediaInfo);
88 | // }
89 |
90 | // class MediaInfo {
91 | // constructor(url: string, contentType: string);
92 | // metadata: GenericMediaMetadata;
93 | // }
94 |
95 | // class GenericMediaMetadata {
96 | // constructor();
97 | // title: string;
98 | // subtitle: string;
99 | // images: ImageInfo[];
100 | // }
101 | // }
102 | // }
103 |
--------------------------------------------------------------------------------
/src/hooks/useHead.ts:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect } from 'preact/hooks';
2 |
3 | export type HeadData = {
4 | title: string;
5 | description?: string;
6 | image?: string;
7 | url?: string;
8 | type?: string;
9 | };
10 |
11 | export const defaultHeadData = {
12 | title: '1tuner | listen to radio and podcasts',
13 | description: 'Listen to radio and podcasts for free. Discover new music and shows, create your own playlists.',
14 | image: `${import.meta.env.VITE_BASE_URL}/assets/social-share.jpg`,
15 | url: import.meta.env.VITE_BASE_URL,
16 | type: 'website',
17 | };
18 |
19 | export const useHead = (data: HeadData) => {
20 | // For prerendering
21 | if (
22 | typeof window === 'undefined' &&
23 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
24 | (typeof (globalThis as any).__HEAD_DATA__ === 'undefined' || (globalThis as any).__HEAD_DATA__.title !== data.title)
25 | ) {
26 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
27 | (globalThis as any).__HEAD_DATA__ = { ...defaultHeadData, ...data, title: `${data.title} | 1tuner.com` };
28 | }
29 |
30 | useLayoutEffect(() => {
31 | if (typeof document === 'undefined') return;
32 |
33 | const updateMetaTag = (property: string, content: string) => {
34 | let element = document.querySelector(`meta[property="${property}"]`);
35 | if (!element) {
36 | element = document.createElement('meta');
37 | element.setAttribute('property', property);
38 | document.head.appendChild(element);
39 | }
40 | element.setAttribute('content', content);
41 | };
42 |
43 | const updateHead = (newData: HeadData) => {
44 | document.title = newData.title ? `${newData.title} | 1tuner.com` : defaultHeadData.title;
45 | updateMetaTag('og:title', newData.title || defaultHeadData.title);
46 | updateMetaTag('og:description', newData.description || '');
47 | updateMetaTag('og:image', newData.image || defaultHeadData.image);
48 | updateMetaTag('og:url', newData.url || defaultHeadData.url);
49 | updateMetaTag('og:type', newData.type || defaultHeadData.type);
50 | };
51 | updateHead(data);
52 |
53 | return () => {
54 | if (typeof document === 'undefined') return;
55 | updateHead(defaultHeadData);
56 | };
57 | }, [data]);
58 | };
59 |
--------------------------------------------------------------------------------
/src/hooks/useNoise.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useRef } from 'preact/hooks';
2 | import { settingsState } from '~/store/signals/settings';
3 |
4 | export const useNoise = () => {
5 | const audioContextRef = useRef
32 |
135 | );
136 | };
137 |
--------------------------------------------------------------------------------
/src/pages/homepage/index.tsx:
--------------------------------------------------------------------------------
1 | import { computed } from '@preact/signals';
2 | import { For } from '@preact/signals/utils';
3 | import { ContentSection } from '~/components/content-section';
4 | import { PodcastCard } from '~/components/podcast-card';
5 | import { RadioStationCard } from '~/components/radio-station-card';
6 | import { ShareButton } from '~/components/share-button';
7 | import { styleClass } from '~/lib/styleClass';
8 | import { featuredPodcasts, recentlyVisitedPodcasts } from '~/store/signals/podcast';
9 | import { recentlyVisitedRadioStations } from '~/store/signals/radio';
10 | import { hasAppUpdatedMessage } from '~/store/signals/ui';
11 |
12 | const homepagePodcasts = computed(() => {
13 | if (recentlyVisitedPodcasts.value.length > 10) {
14 | return recentlyVisitedPodcasts.value.slice(0, 10);
15 | }
16 | return (recentlyVisitedPodcasts.value || [])
17 | .concat(featuredPodcasts.value.filter((p) => !recentlyVisitedPodcasts.value.some((rp) => p.id === rp.id)))
18 | .slice(0, 10);
19 | });
20 |
21 | export const Homepage = () => {
22 | return (
23 | <>
24 | About
33 |
34 | Welcome to 1tuner.com — your personal mix of online radio and podcasts!
35 |
36 | Create your perfect listening day by building a playlist that automatically switches between your favorite radio
37 | streams.
38 |
40 | This is a free web app. No account needed. No ads. 💡 Tip: Add it to your home screen for the best experience! 41 |
42 |Privacy, cookies, tracking...
43 |I guess I'm not that much interested in you! But here’s what you should know:
44 |-
45 |
- 46 | Your recently played stations/podcasts, your playlists and settings, are stored in your browser (locally) to 47 | keep things running smoothly. You can manage this data on the{' '} 48 | 49 | Settings 50 | {' '} 51 | page — or just clear your browser data to reset everything. 52 | 53 |
- 54 | For visitor statistics I use{' '} 55 | 56 | Cloudflare Web Analytics 57 | 58 | . No personal data is shared or stored. 59 | 60 |
- 61 | Audio and logos are loaded directly from radio stations or podcast sources, or via{' '} 62 | 63 | cloudinary.com 64 | 65 | . Some of these sources may track media requests (just FYI). 66 | 67 |
- 68 | Podcast search is powered by{' '} 69 | 70 | podcastindex.org 71 | {' '} 72 | or the Apple iTunes Search API — you can change this on the{' '} 73 | 74 | Settings 75 | {' '} 76 | page. 77 | 78 |
- 79 | For podcast episode data, the RSS feed is fetched directly from the podcast source. If it fails, it is fetched 80 | via a pass-through server (currently using a{' '} 81 | 82 | Cloudflare Worker 83 | 84 | ). 85 | 86 |
-
87 | For extended radio data I use{' '}
88 |
89 | radio-browser.info
90 |
91 | , which is a free and open API for radio stations.
92 |
93 | If a regular search doesn't return results or you'd like to explore more, an extra search can be performed via 94 | their server. When you play a station, a click is registered on their end for stats purposes — but no personal 95 | data is shared or stored. 96 |
97 |
Who made this?
99 |
100 | This is a side project by{' '}
101 |
102 | Robin Bakker
103 |
104 | .
105 | Curious how it all started? Check out:{' '}
106 |
112 | Creating a web app as side project
113 |
114 | . Find the code on{' '}
115 |
116 | GitHub
117 |
118 | .
119 |
120 | Do you miss a feature? Spotted a bug? Oh no! Please let me know:{' '}
121 |
122 | @1tuner.com
123 |
124 | .
125 |
127 | Or{' '} 128 | 129 | buy me a ☕ + 🍪 130 | 131 | ! 132 |
133 |v{APP_VERSION}
134 |
29 |
36 |
30 | 
31 |
32 |
31 |
33 |
35 | -
39 |
-
42 |
43 |
44 | )}
45 |
-
51 |
-
54 |
55 |
56 | )}
57 |
65 | ℹ️ 1tuner has been updated! You can now "follow" radio stations and podcasts, and lots of other 66 | improvements where made. I hope you like it! 67 |
68 | )} 69 |
70 | With this free app you can listen to online{' '}
71 |
72 | radio stations
73 |
74 | ,{' '}
75 |
76 | podcasts
77 | {' '}
78 | and create{' '}
79 |
80 | playlists
81 |
82 | .
83 | Just add this site to your homescreen and you're good to go!
84 |
86 | This app stores information in your browser to save your preferences and Cloudflare Web Analytics is used 87 | for basic analytics.{' '} 88 | 89 | Read more 90 | 91 |
92 | 93 |
9 |
11 |
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/pages/playlist/playlist.module.css:
--------------------------------------------------------------------------------
1 | .timeline li::after {
2 | position: absolute;
3 | content: '';
4 | display: block;
5 | top: 1.4rem;
6 | bottom: 0.2rem;
7 | left: calc(50%);
8 | border-right: 0.1rem dashed currentColor;
9 | }
10 |
11 | .timeline > li:last-child:after {
12 | display: none;
13 | }
14 |
--------------------------------------------------------------------------------
/src/pages/playlists/types.ts:
--------------------------------------------------------------------------------
1 | import { RadioStation } from '~/store/types';
2 |
3 | export interface PlaylistData {
4 | url: string;
5 | name: string;
6 | stations: RadioStation[];
7 | stationPercentages: StationPercentage[];
8 | }
9 |
10 | export interface StationPercentage {
11 | stationID: string;
12 | logo: string;
13 | name: string;
14 | startTime: string;
15 | endTime: string;
16 | percentage: number;
17 | startPercentage: number;
18 | isActive: boolean;
19 | }
20 |
21 | export enum RuleDestination {
22 | Nothing = 0,
23 | RadioStation = 1,
24 | Playlist = 2,
25 | }
26 |
--------------------------------------------------------------------------------
/src/pages/playlists/usePlaylists.ts:
--------------------------------------------------------------------------------
1 | import { ChangeEvent } from 'preact/compat';
2 | import { useCallback, useMemo, useState } from 'preact/hooks';
3 | import { useHead } from '~/hooks/useHead';
4 | import { playlistUtil } from '~/lib/playlistUtil';
5 | import { playlistRules, playlists } from '~/store/signals/playlist';
6 | import { getRadioStation } from '~/store/signals/radio';
7 | import { PlaylistItem, PlaylistRuleType, RadioStation } from '~/store/types';
8 | import { PlaylistData, RuleDestination, StationPercentage } from './types';
9 |
10 | export const usePlaylists = () => {
11 | const startHour = 6;
12 | const endHour = 21;
13 | const [ruleDestinationValue, setRuleDestinationValue] = useStatePage not found... 😢
10 |Maybe try another page?
12 |Loading...
;
21 | if (!podcasts?.length) return null;
22 | const slugTitle = slugify(title);
23 | if (podcasts.length <= (nrToSmall || 999)) {
24 | return (
25 |
27 | {podcasts.map((podcast) => (
28 |
31 | -
42 | {podcasts.map((podcast) => (
43 |
-
44 |
45 |
46 | ))}
47 |
48 |
57 |
155 | );
156 | };
157 |
--------------------------------------------------------------------------------
/src/pages/podcasts/usePodcasts.ts:
--------------------------------------------------------------------------------
1 | import { useLocation } from 'preact-iso';
2 | import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
3 | import { useHead } from '~/hooks/useHead';
4 | import { validationUtil } from '~/lib/validationUtil';
5 | import { isDBLoaded } from '~/store/db/db';
6 | import {
7 | clearLastPodcastSearchResult,
8 | lastPodcastSearchResult,
9 | setLastPodcastSearchResult,
10 | } from '~/store/signals/podcast';
11 | import { settingsState } from '~/store/signals/settings';
12 | import { uiIsScrolled } from '~/store/signals/ui';
13 | import { Podcast, PodcastSearchProvider } from '~/store/types';
14 |
15 | export const usePodcasts = () => {
16 | const { query, route } = useLocation();
17 | const [searchTerm, setSearchTerm] = useState(lastPodcastSearchResult.value?.query || '');
18 | const [isLoading, setIsLoading] = useState(false);
19 | const searchTimeout = useRef
63 |
109 |
64 |
108 |
65 |
107 |
66 |
106 | 73 | Podcasts 74 |
75 |
76 |
105 |
77 |
104 |
78 |
80 | {searchTerm && (
81 |
88 | )}
89 | setSearchTerm((e.target as HTMLInputElement).value)}
95 | class={cn(
96 | 'w-full bg-white/80 dark:bg-black/80 focus:ring-primary pl-10',
97 | searchTerm && 'pr-15',
98 | '[&::-webkit-search-cancel-button]:hidden',
99 | )}
100 | autofocus={!!searchTerm}
101 | maxLength={MAX_SEARCH_LENGTH}
102 | />
103 |
110 | {typeof window === 'undefined' && (globalThis as any).__PRERENDER_PODCASTS__ && (
111 | <>{renderPodcastList((globalThis as any).__PRERENDER_PODCASTS__, 'Podcasts')}
112 | )}
113 | {isLoading ? (
114 |
154 |