18 |
19 |
20 | )
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/ui/src/pages/Developers/Access/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import './styles.scss'
4 |
5 | interface IProps {}
6 |
7 | export default class Card extends React.Component
18 |
19 |
20 | )
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/ui/src/pages/Developers/Home/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import './styles.scss'
4 |
5 | interface IProps {}
6 |
7 | export default class Card extends React.Component
18 |
19 |
20 | )
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/ui/src/pages/Developers/Search/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import './styles.scss'
4 |
5 | interface IProps {}
6 |
7 | export default class Card extends React.Component
18 |
19 |
20 | )
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/server/data/newfeedstats.json:
--------------------------------------------------------------------------------
1 | {
2 | "top1name": "Buzzsprout",
3 | "top1count": 1870,
4 | "top2name": "RSS.com",
5 | "top2count": 967,
6 | "top3name": "Captivate",
7 | "top3count": 381,
8 | "top4name": "Transistor",
9 | "top4count": 376,
10 | "top5name": "Blubrry",
11 | "top5count": 96,
12 | "top6name": "Podserve",
13 | "top6count": 43,
14 | "top7name": "Fireside",
15 | "top7count": 38,
16 | "top8name": "Podiant",
17 | "top8count": 2,
18 | "totalCount": 3773
19 | }
20 |
--------------------------------------------------------------------------------
/ui/images/chevron-back-outline.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/ui/images/chevron-forward-outline.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/ui/src/state/modules/users/schema.ts:
--------------------------------------------------------------------------------
1 | import { BaseState } from '../_abstract/schema';
2 |
3 | export interface User {
4 | id?: number,
5 | birthMonth?: number,
6 | birthDay?: number,
7 | birthYear?: number,
8 | firstName?: string,
9 | lastName?: string,
10 | email: string,
11 | hasPreexistingResults?: boolean,
12 | token?: string,
13 | facebookId?: string,
14 | avatar?: string,
15 | slug?: string,
16 | referralUri?: string,
17 | activeProfile?: boolean,
18 | }
19 |
20 | export interface UserState extends BaseState {
21 | data: User[]
22 | }
--------------------------------------------------------------------------------
/ui/src/components/ScrollToTop/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { withRouter } from 'react-router-dom';
3 |
4 | // from https://stackoverflow.com/questions/36904185/react-router-scroll-to-top-on-every-transition+&cd=1&hl=en&ct=clnk&gl=us
5 |
6 | function ScrollToTop({history}) {
7 | useEffect(() => {
8 | const unlisten = history.listen(() => {
9 | window.scrollTo(0, 0);
10 | });
11 | return () => {
12 | unlisten();
13 | }
14 | }, []);
15 |
16 | return (null);
17 | }
18 |
19 | export default withRouter(ScrollToTop);
20 |
--------------------------------------------------------------------------------
/ui/src/custom.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.scss' {
2 | const content: any
3 | export default content
4 | }
5 |
6 | declare module '*.svg' {
7 | const content: any
8 | export default content
9 | }
10 |
11 | declare module '*.png' {
12 | const content: any
13 | export default content
14 | }
15 |
16 | declare module '*.jpg' {
17 | const content: any
18 | export default content
19 | }
20 |
21 | declare module '*.otf' {
22 | const content: any
23 | export default content
24 | }
25 |
26 | declare module '*.ttf' {
27 | const content: any
28 | export default content
29 | }
30 |
--------------------------------------------------------------------------------
/ui/src/pages/Donations/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | export default class DonationThankYou extends React.PureComponent {
4 | render() {
5 | return (
6 |
7 |
16 | )
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/ui/images/feed.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
10 |
--------------------------------------------------------------------------------
/ui/images/download-outline.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/ui/src/components/Card/styles.scss:
--------------------------------------------------------------------------------
1 | .card {
2 | display: flex;
3 | flex-direction: column;
4 | height: inherit;
5 | padding: 20px;
6 | background: #ffffff;
7 | box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15);
8 | border-radius: 3px;
9 | }
10 |
11 | .card-header {
12 | display: inline-flex;
13 | flex-direction: row;
14 | }
15 |
16 | .card-title {
17 | // font-weight: bold;
18 | font-size: 20px;
19 | text-transform: uppercase;
20 | color: #708693;
21 | text-align: left;
22 | }
23 |
24 | .card-body {
25 | margin-top: 10px;
26 | height: calc(100% - 10px);
27 | // height: calc();
28 | }
29 |
--------------------------------------------------------------------------------
/ui/images/earth.svg:
--------------------------------------------------------------------------------
1 |
3 |
8 |
--------------------------------------------------------------------------------
/.github/workflows/validate-apps.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 | on:
3 | push:
4 | branches: [ master ]
5 | pull_request:
6 | branches: [ master ]
7 | workflow_dispatch:
8 | jobs:
9 | test:
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - uses: actions/checkout@v2
14 |
15 | - name: Validate JSON
16 | uses: nhalstead/validate-json-action@0.1.3
17 | with:
18 | # Relative file path under the repository of a JSON schema file to validate the other JSON files with.
19 | schema: server/data/apps-schema.json
20 | # One or more relative file paths under the repository (separated by comma) of the JSON files to validate with the schema provided.
21 | jsons: server/data/apps.json
22 |
--------------------------------------------------------------------------------
/ui/images/landing-bg.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/ui/src/components/InfiniteList/styles.scss:
--------------------------------------------------------------------------------
1 | .infinite-list{
2 |
3 | .infinite-list-header {
4 |
5 | .infinite-list-count-info {
6 | margin-top: 10px;
7 | display: flex;
8 | flex-direction: row;
9 | align-items: center;
10 |
11 | font-size: 12px;
12 |
13 | .button {
14 | margin: 0;
15 | }
16 |
17 | .count {
18 | margin: 0 0 0 auto;
19 | justify-self: flex-end;
20 | }
21 | }
22 |
23 | .infinite-list-item-unknown {
24 | text-align: center;
25 | }
26 | }
27 |
28 | .loader {
29 | text-align: center;
30 | margin: 0 auto;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/ui/images/link.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/ui/src/state/modules/users/reducers.ts:
--------------------------------------------------------------------------------
1 | import { createReducer } from 'reduxsauce';
2 | import { createBaseHandlers, BaseState } from '../_abstract';
3 | import { Creators, Types } from './actions';
4 |
5 | const INITIAL_STATE: BaseState = {
6 | data: [],
7 | errors: undefined,
8 | loading: false,
9 | hydrated: false
10 | }
11 |
12 | // ---------------- CREATE REDUCERS ----------------
13 |
14 | const crudReducers = createBaseHandlers('users', Creators, Types);
15 |
16 | // const customHandler = (state, { tab }) => crudReducers[Types.INDEX_SUCCESS](state, { data: null });
17 |
18 | const additionalReducers = {
19 | // [Types.CUSTOM_TYPE_REQUEST]: crudReducers[Types.INDEX_REQUEST]
20 | // [Types.CUSTOM_TYPE_SUCCESS]: customHandler,
21 | // [Types.CUSTOM_TYPE_ERROR]: crudReducers[Types.INDEX_ERROR]
22 | };
23 |
24 | export default createReducer(INITIAL_STATE, { ...crudReducers, ...additionalReducers });
--------------------------------------------------------------------------------
/ui/src/components/Card/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import './styles.scss'
4 |
5 | interface IProps {
6 | title?: string
7 | children?: any
8 | }
9 |
10 | export default class Card extends React.ComponentThank you!
8 |9 | It's people like you that help keeps podcasting as a 10 | platform for free speech possible. 11 |
12 |13 | Back to the home page 14 |
15 |
25 | {title && (
26 |
33 | )
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/ui/images/light_mode.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/ui/images/search.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/ui/src/components/Value/styles.scss:
--------------------------------------------------------------------------------
1 | .podcast-value {
2 | font-size: 18px;
3 |
4 | h4 {
5 | font-size: 18px;
6 | margin: 0 0 .5rem;
7 | }
8 |
9 | ul {
10 | margin: 0;
11 | padding-left: 0;
12 |
13 | li {
14 | display: flex;
15 | align-items: center;
16 | margin: .25rem 0;
17 | }
18 | }
19 |
20 | progress[value] {
21 | appearance: none;
22 | border: 0;
23 | border-radius: .25rem;
24 | width: 100px;
25 | height: 1rem;
26 | margin-right: .5rem;
27 | }
28 |
29 | progress[value]::-webkit-progress-bar {
30 | background-color: #eee;
31 | border-radius: .25rem;
32 | }
33 |
34 | // though both use the same styles, it does not work as a combined selector!
35 | progress[value]::-webkit-progress-value {
36 | background-color: var(--color-primary);
37 | border-radius: .25rem;
38 | }
39 | progress[value]::-moz-progress-bar {
40 | background-color: var(--color-primary);
41 | border-radius: .25rem;
42 | }
43 | }
44 |
45 | @media only screen and (max-width: 767px) {
46 | .podcast-value {
47 | font-size: 14px;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Podcastindex.org
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/ui/src/pages/Apps/AppsWebPart/SingleApp/styles.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --dimmed-color: #333;
3 |
4 | &[data-theme="dark"] {
5 | --dimmed-color: #808080;
6 | }
7 | }
8 |
9 | .podcastIndexAppsSingleApp {
10 | display: grid;
11 | grid-template-columns: 1fr 1fr 192px;
12 | grid-template-rows: 1fr;
13 | gap: 0px 32px;
14 | grid-template-rows: auto;
15 | margin-bottom: 16px;
16 | }
17 |
18 | .podcastIndexAppIdentifier {
19 | display: flex;
20 | }
21 |
22 | .podcastIndexAppIcon {
23 | align-self: center;
24 |
25 | img {
26 | width: 60px;
27 | height: 60px;
28 | border-radius: 5px;
29 | }
30 | }
31 |
32 | .podcastIndexAppTitleAndType {
33 | align-self: center;
34 | margin-left: 32px;
35 |
36 | .podcastIndexAppTitle {
37 | font-size: 24px;
38 | }
39 | .podcastIndexAppType {
40 | color: var(--dimmed-color);
41 | margin: 0;
42 | }
43 | }
44 |
45 | .podcastIndexAppSupportedElements {
46 | align-self: center;
47 | line-height: 1.5;
48 | }
49 |
50 | .podcastIndexAppPlatforms {
51 | align-self: center;
52 |
53 | color: var(--dimmed-color);
54 | line-height: 1.5;
55 | }
56 |
--------------------------------------------------------------------------------
/ui/src/state/modules/_abstract/actions.ts:
--------------------------------------------------------------------------------
1 | import { createActions } from 'reduxsauce';
2 | import pluralize from 'pluralize';
3 |
4 | export const createBaseActions = (name, additionalActions = {}) => {
5 | const moduleName = pluralize(name);
6 | return createActions(
7 | {
8 | indexRequest: [`${name}Ids`],
9 | indexSuccess: [moduleName],
10 | indexFailure: ['errors'],
11 | createRequest: [moduleName, 'tempId'],
12 | createSuccess: [moduleName, 'tempId'],
13 | createFailure: ['errors', 'tempId'],
14 | destroyRequest: ['id'],
15 | destroySuccess: ['id', 'response'],
16 | destroyFailure: ['id', 'errors'],
17 | showRequest: ['id'],
18 | showSuccess: ['id', moduleName],
19 | showFailure: ['id', 'errors'],
20 | updateRequest: ['id', moduleName],
21 | updateSuccess: ['id', moduleName],
22 | updateFailure: ['id', 'errors'],
23 | reset: [],
24 | resetErrors: [],
25 | ...additionalActions,
26 | },
27 | { prefix: `${pluralize(name).toUpperCase()}_` },
28 | )
29 | }
30 |
31 | export default { createBaseActions };
32 |
--------------------------------------------------------------------------------
/ui/src/components/KPI/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import './styles.scss'
4 |
5 | // Separate state props + dispatch props to their own interfaces.
6 | interface PropsFromState {
7 | big?: boolean
8 | title?: string
9 | value: string
10 | unit?: string
11 | trending?: {
12 | direction: 'up' | 'down'
13 | amount?: number
14 | }
15 | }
16 |
17 | // Combine both state + dispatch props - as well as any props we want to pass - in a union type.
18 | type AllProps = PropsFromState
19 |
20 | export default class KPI extends React.PureComponent
27 |
30 | )}
31 | {title}
28 |
29 | {children}
32 |
28 | {title &&
37 | )
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/server/assets/podigee.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/ui/src/routes.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Fragment } from "react";
3 | import { Route, Switch } from 'react-router-dom'
4 | import ScrollToTop from "./components/ScrollToTop";
5 | import AddFeed from "./pages/AddFeed";
6 | import Apps from './pages/Apps'
7 | import DonationThankYou from './pages/Donations'
8 |
9 | import Landing from './pages/landing'
10 | import Podcast from './pages/Podcast'
11 | import Search from './pages/Search'
12 | import Stats from './pages/Stats'
13 | import { history } from './state/store'
14 |
15 | const Routes: React.FunctionComponent = () => (
16 | {title}
}
29 |
30 |
36 | {value}
31 |
32 |
33 |
35 | {unit}
34 | Not Found
}/>
34 |
18 |
19 | (
23 |
39 |
40 | )
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/ui/src/components/SphinxChat/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import Avatar from '../../../images/pci_avatar.jpg'
3 |
4 | import './styles.scss'
5 |
6 | interface SphinxWidgetProps
7 | extends React.DetailedHTMLProps<
8 | React.HTMLAttributes
24 |
27 | )}
28 | />
29 | Podcasts
25 |Please search for a podcast above
26 |
20 |
37 | )
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/ui/src/components/ResultsEpisodes/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import EpisodesPlayer from "../EpisodesPlayer";
3 |
4 | import './styles.scss'
5 |
6 | interface IProps {
7 | episodes: Array<{}>
8 | initialDisplay?: number
9 | }
10 |
11 | export default class ResultsEpisodes extends React.PureComponent
22 |
36 | Your application or website missing?
23 |24 | {'Create a '} 25 | Pull Request 26 | {' to update the '} 27 | data file. 28 |
29 |30 | {'Also support namespace features? Add your app or website to the '} 31 | application list 32 | {' by creating a '} 33 | Pull Request. 34 |
35 |
44 |
51 | )
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/ui/src/pages/Apps/AppsWebPart/styles.scss:
--------------------------------------------------------------------------------
1 | .podcastIndexAppsWebPart > h4 {
2 | font-size: 20px;
3 | margin-top: 3px;
4 | margin-bottom: 3px;
5 | padding-top: 20px;
6 | padding-bottom: 10px;
7 | }
8 |
9 | .podcastIndexAppsHeader {
10 | display: grid;
11 | grid-template-columns: 1fr 1fr 192px;
12 | grid-template-rows: 1fr;
13 | gap: 0px 32px;
14 | grid-template-rows: auto;
15 | margin-top: 36px;
16 | }
17 | .podcastIndexAppsHeader > div > h4,
18 | .podcastIndexAppsHeader > h4 {
19 | font-size: 16px;
20 | font-weight: 700;
21 | margin: 0;
22 | }
23 |
24 | .podcastIndexAppsHeader > div > h4 {
25 | margin-left: 92px;
26 | }
27 |
28 | .podcastIndexAppList {
29 | padding: 0;
30 | }
31 |
32 | $podcastIndexAppsMobileLeftMargin: 84px;
33 | $podcastIndexAppsMobileTopPadding: 30px;
34 |
35 | @media only screen and (max-width: 767px) {
36 | .podcastIndexAppsHeader {
37 | display: none;
38 | }
39 | .podcastIndexAppsSingleApp {
40 | display: grid;
41 | grid-template-columns: 1fr;
42 | grid-template-rows: 1fr 1fr;
43 | gap: 0px 0px;
44 | grid-template-rows: auto;
45 | margin-top: 36px;
46 | }
47 |
48 | .podcastIndexAppPlatforms {
49 | display: none;
50 | }
51 |
52 | .podcastIndexAppTitleAndType {
53 | align-self: flex-start;
54 | margin-left: 24px;
55 | }
56 |
57 | .podcastIndexAppSupportedElements {
58 | margin-left: 84px;
59 | position: relative;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/ui/src/pages/Apps/AppsWebPart/FilterTags/styles.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --inactive-button-color: #c7c7c7;
3 | --inactive-button-hover-color: #b3b2b2;
4 |
5 | &[data-theme="dark"] {
6 | --inactive-button-color: #808080;
7 | --inactive-button-hover-color: #505050;
8 | }
9 | }
10 |
11 | .podcastIndexAppsFilterTags {
12 | font-weight: 700;
13 | margin: 0 0 12px 0;
14 | }
15 |
16 | .podcastIndexAppsFilterTags > button {
17 | cursor: pointer;
18 | margin: 8px 4px;
19 | padding: 4px 8px;
20 | border-radius: 20px;
21 | border: none;
22 | color: white;
23 | background-color: var(--color-primary);
24 | &:hover {
25 | background-color: darken($color: #e90000, $amount: 5%);
26 | }
27 | &.inactive {
28 | color: var(--fg-main);
29 | background: initial;
30 |
31 | background: var(--inactive-button-color);
32 | &:hover {
33 | background: var(--inactive-button-hover-color);
34 | }
35 | }
36 | &.clear-button {
37 | width: 47.88px;
38 | background-color: #aa0000;
39 | color: white;
40 | }
41 | &.clear-button:hover {
42 | background-color: darken($color: #aa0000, $amount: 5%);
43 | }
44 | }
45 |
46 | .podcastIndexAppsFilterTagContainer > h4 {
47 | cursor: pointer;
48 | user-select: none;
49 | margin: 0 0 8px 0;
50 | & > .podcastIndexAppsFilterArrow {
51 | font-size: 0.75em;
52 | }
53 | }
54 |
55 | .podcastIndexAppsFilterCategories {
56 | height: 0;
57 | overflow: hidden;
58 | transition: height 0.2s linear;
59 | }
60 |
--------------------------------------------------------------------------------
/ui/src/state/store.ts:
--------------------------------------------------------------------------------
1 | import { Store, combineReducers, applyMiddleware, createStore } from 'redux'
2 | import {
3 | connectRouter,
4 | RouterState,
5 | routerMiddleware,
6 | } from 'connected-react-router'
7 | import thunkMiddleware from 'redux-thunk'
8 | import { composeWithDevTools } from 'redux-devtools-extension'
9 | import { createBrowserHistory, History } from 'history'
10 | import { UserState, usersReducer } from './modules/users'
11 |
12 | // The top-level state object.
13 | //
14 | // `connected-react-router` already injects the router state typings for us,
15 | // so we can ignore them here.
16 | export interface ApplicationState {
17 | users: UserState
18 | router: RouterState
19 | }
20 | export const history = createBrowserHistory()
21 | // @ts-ignore: window error
22 | const initialState = window.INITIAL_REDUX_STATE
23 |
24 | // Whenever an action is dispatched, Redux will update each top-level application state property
25 | // using the reducer with the matching name. It's important that the names match exactly, and that
26 | // the reducer acts on the corresponding ApplicationState property type.
27 | export const createRootReducer = (history: History) =>
28 | combineReducers({
29 | users: usersReducer,
30 | router: connectRouter(history),
31 | })
32 |
33 | // create the composing function for our middlewares
34 | const composeEnhancers = composeWithDevTools({})
35 | const middlewares = [thunkMiddleware, routerMiddleware(history)]
36 | // We'll create our store with the combined reducers/sagas, and the initial Redux state that
37 | // we'll be passing from our entry point.
38 | export default createStore(
39 | createRootReducer(history),
40 | initialState,
41 | composeEnhancers(applyMiddleware(...middlewares))
42 | )
43 |
--------------------------------------------------------------------------------
/ui/src/components/Button/styles.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --button-background: #f7f7f7;
3 | --button-hover-color: #ededed;
4 |
5 | &[data-theme="dark"] {
6 | --button-background: #1a1a1a;
7 | --button-hover-color: #302d2d;
8 | }
9 | }
10 |
11 | .button {
12 | border-radius: 17px;
13 | transition: var(--transition-secs);
14 | font-family: var(--font-family-exp);
15 | font-size: 16px;
16 | color: var(--fg-main);
17 | background-color: var(--button-background);
18 | padding: 8px 20px;
19 | text-align: center;
20 | white-space: nowrap;
21 | display: block;
22 | &:hover {
23 | transition: var(--transition-secs);
24 | background: var(--button-hover-color);
25 | color: var(--fg-main);
26 | cursor: pointer;
27 | }
28 | &.primary {
29 | color: white;
30 | background-color: var(--color-primary);
31 | &:hover {
32 | background-color: darken($color: #e90000, $amount: 5%);
33 | }
34 | }
35 | &.big {
36 | font-size: 26px;
37 | border-radius: 22px;
38 | }
39 | &.small {
40 | font-size: 12px;
41 | border-radius: 13px;
42 | padding: 6px 13px;
43 | }
44 | &.slim {
45 | display: inline-block;
46 | }
47 | &.disabled {
48 | color: #7e7e7e !important;
49 | border-spacing: 0;
50 | border-width: 0;
51 | cursor: default;
52 | background: transparent;
53 | &:hover {
54 | background: transparent;
55 | cursor: default;
56 | }
57 | }
58 | }
59 |
60 | a,
61 | .button {
62 | text-decoration: none !important;
63 | }
64 |
65 | input,
66 | .button {
67 | outline: 0;
68 | border-spacing: 0;
69 | border-width: 0;
70 | text-decoration: none !important;
71 | }
72 |
--------------------------------------------------------------------------------
/ui/src/components/ResultsFeeds/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import InfiniteList from "../../components/InfiniteList";
3 | import ResultItem from '../../components/ResultItem'
4 |
5 | import { getImage } from '../../utils'
6 |
7 | import './styles.scss'
8 |
9 | interface IProps {
10 | results?: Array<{}>
11 | initialDisplay?: number
12 | }
13 |
14 | export default class ResultsFeeds extends React.PureComponent
37 |
47 | )
48 | }
49 |
50 | render() {
51 | const {results, initialDisplay} = this.props
52 | const {loading} = this.state
53 |
54 | return (
55 |
56 |
62 | )
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/ui/src/components/KPI/styles.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --kpi-title-color: #494949;
3 |
4 | &[data-theme="dark"] {
5 | --kpi-title-color: #cdcdcd;
6 | }
7 | }
8 |
9 | .kpi {
10 | display: flex;
11 | flex-direction: column;
12 |
13 | &.big {
14 | .kpi-trending {
15 | display: flex;
16 | }
17 | .kpi-title {
18 | flex: 1;
19 | opacity: 0.64;
20 | font-family: var(--font-family-exp);
21 | font-size: 20px;
22 | color: var(--kpi-title-color);
23 | text-align: left;
24 | margin-right: 50px;
25 | }
26 |
27 | .kpi-value {
28 | // font-weight: bold;
29 | font-family: var(--font-family-exp);
30 | line-height: 72px;
31 | font-size: 72px;
32 | color: #ff1c41;
33 | text-align: left;
34 | }
35 | .kpi-unit {
36 | margin-left: 10px;
37 | font-size: 45px;
38 | color: #bfccd6;
39 | text-align: left;
40 | }
41 | .kpi-metadata {
42 | justify-content: space-between;
43 | }
44 | }
45 | }
46 |
47 | .kpi-data {
48 | display: inline-flex;
49 | flex-direction: row;
50 | }
51 | .kpi-title {
52 | opacity: 0.63;
53 | text-transform: uppercase;
54 | font-size: 18px;
55 | color: var(--kpi-title-color);
56 | text-align: left;
57 | margin-bottom: 10px;
58 | }
59 | .kpi-value {
60 | font-size: 50px;
61 | font-family: var(--font-family-exp);
62 | line-height: 50px;
63 | color: #ff1c41;
64 | text-align: left;
65 | }
66 |
67 | .kpi-metadata {
68 | display: inline-flex;
69 | flex-direction: column;
70 | justify-content: flex-end;
71 | }
72 |
73 | .kpi-trending {
74 | display: none;
75 | }
76 |
77 | .kpi-unit {
78 | margin-left: 5px;
79 | font-size: 12px;
80 | color: #bfccd6;
81 | text-align: left;
82 | }
83 |
--------------------------------------------------------------------------------
/ui/src/components/CommentMenu/styles.scss:
--------------------------------------------------------------------------------
1 | .context-menu {
2 | all: unset;
3 | position: relative;
4 | }
5 |
6 | .context-menu svg {
7 | display: block;
8 | }
9 |
10 | .context-menu menu {
11 | position: absolute;
12 | top: 100%;
13 | right: 0;
14 | display: flex;
15 | flex-direction: column;
16 | background: var(--button-background);
17 | margin: 0;
18 | padding: .75rem;
19 | z-index: 1;
20 | border-radius: .25rem;
21 | box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
22 | }
23 |
24 | .context-menu menu a {
25 | white-space: nowrap;
26 | text-decoration: none;
27 | line-height: 2;
28 | }
29 |
30 | .dialog-homeinstance {
31 | border: 1px solid rgba(0, 0, 0, 0.25);
32 | border-radius: 0.5rem;
33 | box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
34 | width: calc((100% - 6px) - 2em);
35 | max-width: 28rem;
36 | }
37 |
38 | .dialog-homeinstance form {
39 | display: flex;
40 | flex-direction: column;
41 | gap: 0.5rem;
42 | margin: 0;
43 | }
44 |
45 | .dialog-homeinstance input {
46 | padding: 0.5rem;
47 | }
48 |
49 | .dialog-homeinstance menu {
50 | display: flex;
51 | flex-wrap: wrap;
52 | flex-direction: row;
53 | justify-content: flex-end;
54 | gap: .5rem;
55 | margin: 1.5rem 0 0 0;
56 | }
57 |
58 | .dialog-homeinstance button {
59 | border: none;
60 | padding: .5rem;
61 | border-radius: 4px;
62 | min-width: 4.5rem;
63 | background-color: #2962ff;
64 | font-size: 0.875rem;
65 | font-weight: 500;
66 | letter-spacing: .25px;
67 | line-height: 1rem;
68 | outline: none;
69 | color: #FFF;
70 | }
71 |
72 | .dialog-homeinstance button:hover {
73 | background-color: #2F7DE2;
74 | }
75 |
76 | .dialog-homeinstance button[type="reset"] {
77 | background-color: transparent;
78 | box-shadow: inset 0 0 0 1px #DADCE0;
79 | color: #2962ff;
80 | }
81 |
82 | .dialog-homeinstance button[type="reset"]:hover {
83 | background-color: #EAF2FD;
84 | }
--------------------------------------------------------------------------------
/server/assets/musixmatch.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/ui/src/components/Boostagram/styles.scss:
--------------------------------------------------------------------------------
1 |
2 | .boostagram-corner{
3 | display: flex;
4 | margin: 0 0 8px 0;
5 | align-items: center;
6 | height: 90px
7 | }
8 | .boostagram-corner > div{
9 | width: 260px
10 | }
11 |
12 | .boostagram-corner textarea{
13 | flex-grow:1;
14 | margin: 0 16px;
15 | font-size: 1.2em;
16 | border-radius: 5px;
17 | height: 88px;
18 | resize: none;
19 | padding: 8px
20 | }
21 |
22 | .boostagram-corner label{
23 | font-size: 1.1em;
24 | font-weight: 550;
25 | }
26 |
27 | .boostagram-corner input{
28 | border:1px solid gray;
29 | padding: 8px;
30 | font-size: 1.1em;
31 | font-weight: 550;
32 | text-align: right ;
33 | width: 100px;
34 | margin-right: 4px;
35 | border-radius: 5px
36 | }
37 |
38 | .boostagram-corner .boostagram-sender-name{
39 | width: 100%;
40 | text-align: left;
41 | margin: 0 0 8px 0;
42 | height: 41px;
43 | display:flex;
44 | align-items: center;
45 | justify-content: center;
46 | }
47 |
48 | .boostagram-corner .boostagram-sender-name input{
49 | width: 100%;
50 | text-align: left;
51 | margin: 0
52 | }
53 |
54 | .boostagram-corner .boostagram-sat-input{
55 | width: 100%;
56 | text-align: left;
57 | height: 41px;
58 | display:flex;
59 | align-items: center;
60 | justify-content: center;
61 | }
62 |
63 |
64 | .boostagram-corner input:focus{
65 | border:2px solid black;
66 | }
67 |
68 | .boostagram-corner button{
69 | margin: 0 0 0 16px;
70 | padding: 8px 12px;
71 | width: 100px;
72 | border: none;
73 | background-color: #E90000;
74 | border-radius: 5px;
75 | color: #fff;
76 | cursor: pointer;
77 | font-size: 1.1em;
78 | font-weight: 600;
79 | }
80 |
81 |
82 |
--------------------------------------------------------------------------------
/ui/src/pages/Stats/StatsCard/styles.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --bg-color: #ffffff;
3 |
4 | &[data-theme="dark"] {
5 | --bg-color: #180e0e;
6 | }
7 | }
8 |
9 | .kpi-card {
10 | display: inline-flex;
11 | flex-direction: row;
12 | justify-content: center;
13 | align-items: center;
14 | width: inherit;
15 | .card {
16 | display: inline-flex;
17 | flex-direction: column;
18 | width: inherit;
19 | padding: 30px;
20 | // box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15);
21 | background: var(--bg-color);
22 | border-radius: 12px;
23 | }
24 | .kpi-massive-title {
25 | font-family: var(--font-family-exp);
26 | font-size: 32px;
27 | color: var(--fg-main);
28 | text-align: left;
29 | }
30 | .kpi-massive-value {
31 | font-family: var(--font-family-exp);
32 | font-weight: bold;
33 | font-size: 186px;
34 | color: #ff1c41;
35 | text-align: left;
36 | }
37 | .kpi-title-2 {
38 | margin-top: 40px;
39 | }
40 | }
41 |
42 | .kpi-row {
43 | width: 100%;
44 | display: inline-flex;
45 | flex-direction: row;
46 | justify-content: flex-start;
47 | flex-wrap: wrap;
48 | margin: -7px -20px;
49 | margin-top: 30px;
50 |
51 | .kpi {
52 | margin: 7px 20px;
53 | }
54 | }
55 |
56 | @media only screen and (max-width: 1167px) {
57 | .kpi-massive-value {
58 | font-size: 100px !important;
59 | }
60 | }
61 |
62 | @media only screen and (max-width: 767px) {
63 | .kpi-massive-title {
64 | font-size: 26px !important;
65 | }
66 | .kpi-massive-value {
67 | font-size: 56px !important;
68 | }
69 | .kpi-card {
70 | margin: 0 10px;
71 | width: calc(100% - 20px);
72 | .card {
73 | max-width: 500px;
74 | }
75 | }
76 | /* phones */
77 | .kpi-row {
78 | flex-direction: column !important;
79 | }
80 | .kpi {
81 | margin-top: 15px;
82 | margin-bottom: 15px;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/ui/src/pages/Stats/NewFeedStatsCard/styles.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --kpi-bg-color: #f3f3f3;
3 |
4 | &[data-theme="dark"] {
5 | --kpi-bg-color: #302d2d;
6 | }
7 | }
8 |
9 | .kpi-card {
10 | display: inline-flex;
11 | flex-direction: row;
12 | justify-content: center;
13 | align-items: center;
14 | width: inherit;
15 | .card {
16 | display: inline-flex;
17 | flex-direction: column;
18 | width: inherit;
19 | padding: 30px;
20 | // box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15);
21 | background: var(--kpi-bg-color);
22 | border-radius: 12px;
23 | }
24 | .kpi-massive-title {
25 | font-family: var(--font-family-exp);
26 | font-size: 32px;
27 | color: var(--fg-main);
28 | text-align: left;
29 | }
30 | .kpi-massive-value {
31 | font-family: var(--font-family-exp);
32 | font-weight: bold;
33 | font-size: 186px;
34 | color: #ff1c41;
35 | text-align: left;
36 | }
37 | .kpi-title-2 {
38 | margin-top: 40px;
39 | }
40 | }
41 |
42 | .kpi-row {
43 | width: 100%;
44 | display: inline-flex;
45 | flex-direction: row;
46 | justify-content: flex-start;
47 | flex-wrap: wrap;
48 | margin: -7px -20px;
49 | margin-top: 30px;
50 |
51 | .kpi {
52 | margin: 7px 20px;
53 | }
54 | }
55 |
56 | @media only screen and (max-width: 1167px) {
57 | .kpi-massive-value {
58 | font-size: 100px !important;
59 | }
60 | }
61 |
62 | @media only screen and (max-width: 767px) {
63 | .kpi-massive-title {
64 | font-size: 26px !important;
65 | }
66 | .kpi-massive-value {
67 | font-size: 56px !important;
68 | }
69 | .kpi-card {
70 | margin: 0 10px;
71 | width: calc(100% - 20px);
72 | .card {
73 | max-width: 500px;
74 | }
75 | }
76 | /* phones */
77 | .kpi-row {
78 | flex-direction: column !important;
79 | }
80 | .kpi {
81 | margin-top: 15px;
82 | margin-bottom: 15px;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/ui/src/state/modules/_abstract/reducer.ts:
--------------------------------------------------------------------------------
1 | import { Reducer, AnyAction } from 'redux'
2 | import { BaseState } from './schema';
3 | import pluralize from 'pluralize';
4 |
5 | // Type-safe initialState!
6 | export const INITIAL_STATE: BaseState = {
7 | data: [],
8 | errors: undefined,
9 | loading: false,
10 | hydrated: false
11 | }
12 |
13 |
14 | export const createBaseHandlers = (name: string, actions: object, Types: any) => {
15 | const requestReducer: Reducer
40 |
41 |
60 |
61 | )
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/ui/src/pages/Podcast/Value4Value/styles.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --selected-page-color: #f2f2f2;
3 |
4 | &[data-theme="dark"] {
5 | --selected-page-color: #505050;
6 | }
7 | }
8 |
9 | .v4v {
10 | margin: 0 auto;
11 | padding: 0 10px;
12 | position: relative;
13 | z-index: 1;
14 | width: 1024px;
15 |
16 | h2 {
17 | font-size: 24px;
18 | }
19 |
20 | .pages {
21 | .page-buttons {
22 | display: flex;
23 | flex-direction: row;
24 | flex-wrap: wrap;
25 | row-gap: 15px;
26 | column-gap: 5px;
27 | justify-content: center;
28 |
29 | .page {
30 | min-width: 20px;
31 |
32 | border-radius: 9px;
33 | padding: 6px 9px;
34 | color: var(--fg-main);
35 |
36 | &.selected {
37 | background: var(--selected-page-color);
38 | }
39 | }
40 |
41 | &.hidden {
42 | display: None;
43 | }
44 | }
45 |
46 | .page-menu-row {
47 | text-align: center;
48 | display: none;
49 |
50 | .pages-menu {
51 | width: 100px;
52 |
53 | border-radius: 4px;
54 | transition: var(--transition-secs);
55 | font-family: var(--font-family-exp);
56 | font-size: 16px;
57 | padding: 2px 5px;
58 | text-align: center;
59 | white-space: nowrap;
60 | }
61 | }
62 | }
63 | }
64 |
65 | @media only screen and (max-width: 720px) {
66 | /* phones */
67 | .v4v {
68 | .pages {
69 | .page-buttons {
70 | row-gap: 20px;
71 | .page {
72 | font-size: 18px;
73 | }
74 | }
75 | }
76 | }
77 | }
78 |
79 | @media only screen and (max-width: 620px) {
80 | /* phones */
81 | .v4v {
82 | .pages {
83 | .page-buttons {
84 | display: none;
85 | }
86 |
87 | .page-menu-row {
88 | display: block;
89 | }
90 | }
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/server/assets/podcastaddict.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
35 |
--------------------------------------------------------------------------------
/ui/src/components/Value/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import { titleizeString } from '../../utils'
4 | import './styles.scss'
5 |
6 | interface IProps {
7 | model: {
8 | type: string
9 | method: string
10 | suggested: string
11 | }
12 | destinations?: Array<{
13 | name: string
14 | type: string
15 | address: string
16 | split: string
17 | }>
18 | }
19 |
20 | type PodState = { copyMessage: string };
21 |
22 | export default class Value extends React.PureComponent
42 | Total podcasts in the index ...
43 |
44 | {total}
45 |
46 | Shows published in the last ...
47 |
48 |
49 |
59 |
58 |
69 | )
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/ui/src/pages/styles.scss:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | .landing-content,
6 | .page-content {
7 | position: relative;
8 | z-index: 1;
9 | padding: 0 10px 20px 10px;
10 | margin: 0 auto;
11 | max-width: 1200px;
12 | }
13 |
14 | .hero-pitch {
15 | display: flex;
16 | font-family: var(--font-family-exp);
17 | width: inherit;
18 | margin: auto;
19 | margin-top: 30px;
20 | margin-bottom: 80px;
21 | }
22 |
23 | .hero-pitch-left {
24 | display: inline-flex;
25 | flex: 1;
26 | flex-direction: column;
27 | justify-content: center;
28 | audio {
29 | outline: none;
30 | }
31 | h5 {
32 | max-width: 400px;
33 | }
34 | .listen-row {
35 | display: flex;
36 | flex-direction: row;
37 | align-items: center;
38 | }
39 | .subscribe-badge {
40 | margin-left: 10px;
41 |
42 | img {
43 | width: 50px;
44 | height: 50px;
45 | }
46 | }
47 | }
48 |
49 | .hero-pitch-text {
50 | // font-family: var(--font-family-exp);
51 | font-size: 55px;
52 | color: var(--fg-main);
53 | }
54 |
55 | .hero-pitch-subtitle {
56 | font-size: 22px;
57 | max-width: 425px;
58 | color: var(--text-color);
59 | margin-bottom: 10px;
60 | }
61 |
62 | .hero-pitch-right {
63 | display: inline-flex;
64 | flex: 1;
65 | flex-direction: column;
66 | justify-content: center;
67 | align-items: center;
68 | width: inherit;
69 | // height: 640px;
70 | }
71 |
72 | .info-section {
73 | margin-top: 50px;
74 | h3 {
75 | margin: 22px 0;
76 | }
77 | p {
78 | font-family: var(--font-family-exp);
79 | font-size: 18px;
80 | line-height: 20px;
81 | color: var(--text-color);
82 | }
83 | .donation-providers {
84 | width: 100%;
85 | display: flex;
86 | flex-direction: row;
87 |
88 | .paypal,
89 | .sphinx-chat {
90 | flex: 1;
91 | text-align: center;
92 | }
93 |
94 | .paypal {
95 | form {
96 | .button {
97 | margin: 0 auto;
98 | }
99 | }
100 | }
101 | }
102 | }
103 |
104 | #donate {
105 | margin-bottom: 20px;
106 | }
107 |
108 | .footer {
109 | margin-top: 40px;
110 | padding-top: 20px;
111 | border-top: 1px solid #dbdbdb;
112 | }
113 |
114 | @import './mobile.scss';
115 |
--------------------------------------------------------------------------------
/ui/src/pages/Stats/NewFeedStatsCard/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import KPI from '../../../components/KPI'
4 | import Card from '../../../components/Card'
5 |
6 | import './styles.scss'
7 |
8 | interface IProps {
9 | total: number
10 | top1name: string
11 | top1count: number
12 | top2name: string
13 | top2count: number
14 | top3name: string
15 | top3count: number
16 | top4name: string
17 | top4count: number
18 | top5name: string
19 | top5count: number
20 | }
21 |
22 | export default class NewFeedStatsCard extends React.ComponentValue for Value via {titleizeString(model.type)}
59 |-
60 | {destinations.map(dest => (
61 |
- 62 | 63 | {knownDeadNodes[dest.address] && ⚠️} 64 | {dest.name} 65 | 66 | ))} 67 |
62 |
63 |
79 |
80 | )
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/ui/src/styles.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: D-DIN;
3 | src: url(../fonts/D-DIN.otf) format('otf');
4 | font-weight: normal;
5 | }
6 |
7 | @font-face {
8 | font-family: D-DIN-Bold;
9 | src: url(../fonts/D-DIN-Bold.otf) format('otf');
10 | font-weight: bold;
11 | }
12 |
13 | @font-face {
14 | font-family: D-DINExp;
15 | src: url(../fonts/D-DINExp.otf) format('otf');
16 | font-weight: normal;
17 | }
18 | @font-face {
19 | font-family: D-DINExp-Bold;
20 | src: url(../fonts/D-DINExp-Bold.otf) format('otf');
21 | font-weight: bold;
22 | }
23 |
24 | @font-face {
25 | font-family: DINAlternate-Bold;
26 | src: url(../fonts/DIN-Alternate-Bold.ttf) format('ttf');
27 | font-weight: bold;
28 | }
29 |
30 | :root {
31 | --transition-secs: 0.2s;
32 | --bg-main: #ffffff;
33 | --fg-main: #2d2d2d;
34 | --text-color: #868686;
35 | --link-color: #002752;
36 | --link-hover-color: #cc2799;
37 | --color-primary: #e90000;
38 | --font-family: D-DIN, sans-serif;
39 | --font-family-bold: D-DIN-Bold, sans-serif;
40 | --font-family-exp: D-DINExp, sans-serif;
41 | --font-family-exp-bold: D-DINExp-Bold, sans-serif;
42 | --font-alt: DINAlternate-Bold, sans-serif;
43 |
44 | &[data-theme="dark"] {
45 | --bg-main: #080808;
46 | --fg-main: #f1f1f1;
47 | --text-color: #d9d9d9;
48 | --link-color: #fff;
49 | }
50 | }
51 |
52 | body {
53 | min-height: 100vh;
54 | // max-width: 100vw;
55 | font-family: var(--font-family);
56 | margin: 0;
57 | color: var(--fg-main);
58 | background-color: var(--bg-main);
59 | overflow-y: scroll; // Disable scrolling on body
60 | }
61 |
62 | h1 {
63 | font-family: var(--font-family-exp);
64 | font-weight: bold;
65 | font-size: 55px;
66 | }
67 |
68 | h2 {
69 | font-family: var(--font-family-exp);
70 | font-weight: bold;
71 | font-size: 44px;
72 | }
73 |
74 | h3 {
75 | font-family: var(--font-family-exp);
76 | font-weight: bold;
77 | font-size: 33px;
78 | }
79 |
80 | h4 {
81 | font-family: var(--font-family-exp);
82 | font-weight: bold;
83 | font-size: 27px;
84 | }
85 |
86 | a:link,
87 | a:visited,
88 | a:active {
89 | color: var(--link-color);
90 | }
91 |
92 | a:hover {
93 | color: var(--link-hover-color);
94 | }
95 |
96 | .landing-graphic {
97 | opacity: 0.75;
98 | top: 120px;
99 | left: -300px;
100 | position: absolute;
101 | z-index: -1000;
102 | }
103 |
104 | @media only screen and (max-width: 767px) {
105 | /* phones */
106 | .landing-graphic {
107 | display: none;
108 | }
109 | .hide-mobile {
110 | display: none;
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/ui/src/components/Player/styles.scss:
--------------------------------------------------------------------------------
1 | .player-info {
2 | display: inline-flex;
3 | flex-direction: column;
4 | align-items: center;
5 | width: 100%;
6 | }
7 |
8 | .player-bottom {
9 | display: inline-flex;
10 | flex-direction: column;
11 | align-items: center;
12 | width: inherit;
13 | margin-top: 5px;
14 | padding: 0 10px;
15 | // width: calc100%;
16 | }
17 |
18 | .player-media-controls {
19 | width: calc(100% - 20px);
20 | .player-show-title {
21 | a {
22 | color: var(--fg-main);
23 | }
24 |
25 | p {
26 | font-size: 20px;
27 | font-family: var(--font-family);
28 | font-weight: bold;
29 | text-align: center;
30 | width: 450px;
31 | white-space: nowrap;
32 | overflow: hidden;
33 | text-overflow: ellipsis;
34 | margin-bottom: 5px;
35 | color: var(--fg-main);
36 | }
37 | }
38 | .player-podcast-name {
39 | text-align: center;
40 | width: 450px;
41 | white-space: nowrap;
42 | overflow: hidden;
43 | text-overflow: ellipsis;
44 | margin-bottom: 5px;
45 |
46 | a {
47 | font-size: 16px;
48 | font-family: var(--font-family);
49 | color: var(--fg-main);
50 | }
51 | }
52 | .player-feed-button {
53 | cursor: pointer;
54 | }
55 | p {
56 | margin: 5px 0 0;
57 | font-family: var(--font-family-exp);
58 | font-size: 14px;
59 | //line-height: 16px;
60 | color: var(--text-color);
61 | }
62 | .rhap_container {
63 | outline: none;
64 | box-shadow: none;
65 | button {
66 | outline: none;
67 | }
68 | .rhap_volume-bar-area {
69 | outline: none;
70 | }
71 | .rhap_progress-container {
72 | outline: none;
73 | }
74 | .rhap_progress-indicator {
75 | width: 15px;
76 | height: 15px;
77 | top: -5px;
78 | background: var(--color-primary);
79 | }
80 | .rhap_play-pause-button {
81 | svg path {
82 | fill: var(--color-primary);
83 | }
84 | }
85 | }
86 | }
87 | :root[data-theme="dark"] {
88 | .rhap_container {
89 | background-color: var(--bg-main);
90 | }
91 | .rhap_time {
92 | color: var(--fg-main);
93 | }
94 | }
95 |
96 | @media only screen and (max-width: 520px) {
97 | .player-show-title p {
98 | max-width: 350px;
99 | }
100 | .player-podcast-name {
101 | max-width: 350px;
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/ui/images/brand-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/ui/src/pages/Stats/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Stats } from 'webpack'
3 |
4 | import NewFeedStatsCard from './NewFeedStatsCard'
5 | import StatsCard from "./StatsCard";
6 |
7 | import './styles.scss'
8 |
9 |
10 | interface IProps {}
11 |
12 |
13 |
14 | export default class Card extends React.Component
64 | Host submitted feeds (30 days)...
65 |
66 | {total.toLocaleString()}
67 |
68 |
78 |
81 |
90 | )
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/ui/src/components/ResultItem/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import {Link} from "react-router-dom";
4 | import {truncateString} from '../../utils'
5 | import NoImage from '../../../images/no-cover-art.png'
6 |
7 | import './styles.scss'
8 |
9 | interface IProps {
10 | title?: string
11 | description?: string
12 | author?: string
13 | categories?: any
14 | image?: any
15 | id?: string
16 | className?: string
17 | }
18 |
19 | export default class ResultItem extends React.PureComponentNo Categories
41 | )
42 | }
43 | // Only render a max of 5 categories
44 | return categoryArray.slice(0, 5).map((cat, i) => (
45 |
46 | {cat}
47 |
48 | ))
49 | }
50 |
51 | render() {
52 | const {title, description, author, categories, image, id, className} = this.props
53 | // const { open } = this.state
54 | return (
55 |
56 |
81 | )
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/ui/src/pages/mobile.scss:
--------------------------------------------------------------------------------
1 | @media only screen and (min-width: 1168px) {
2 | /* tablets and desktop */
3 | .landing-content,
4 | .page-content {
5 | width: 100%;
6 | }
7 | .hero-pitch {
8 | flex-direction: row;
9 | }
10 | }
11 |
12 | /* TABLETS PORTRAIT */
13 | @media only screen and (max-width: 1167px) {
14 | /* tablets and desktop */
15 | .landing-content,
16 | .page-content {
17 | min-width: 768px;
18 | }
19 | // .hero-pitch {
20 | // align-items: center;
21 | // flex-direction: column;
22 | // flex-flow: column;
23 | // text-align: center;
24 | // }
25 | .hero-pitch-text {
26 | font-size: 42px;
27 | }
28 | .hero-pitch-subtitle {
29 | margin-top: 0 !important;
30 | max-width: 100% !important;
31 | font-size: 20px;
32 | }
33 | .info-section {
34 | padding: 0 20px;
35 | }
36 | .hero-pitch-right {
37 | margin-top: 40px;
38 | // padding: 0 10px;
39 | }
40 | }
41 |
42 | @media only screen and (max-width: 1010px) {
43 | .results-page, .results-list, .v4v {
44 | width: 100% !important;
45 | }
46 | }
47 |
48 | @media only screen and (max-width: 980px) {
49 | .hero-pitch {
50 | align-items: center;
51 | flex-direction: column;
52 | flex-flow: column;
53 | text-align: center;
54 | max-width: 600px;
55 | }
56 | .hero-pitch-text {
57 | padding: 0 30px;
58 | }
59 | .hero-pitch-subtitle {
60 | padding: 0 30px;
61 | }
62 | .results-page, .results-list, .v4v {
63 | width: 100% !important;
64 | }
65 | .hero-pitch-left {
66 | padding: 0 20px;
67 | align-items: center;
68 | h5 {
69 | text-align: center;
70 | padding: 0 10px;
71 | }
72 | .listen-row {
73 | justify-content: center;
74 | padding: 0 10px;
75 | }
76 | }
77 | .info-section {
78 | .donation-providers {
79 | width: 100%;
80 | flex-direction: column;
81 | }
82 | }
83 | }
84 |
85 | @media only screen and (max-width: 767px) {
86 | .hero-pitch {
87 | margin-top: 0px;
88 | margin-bottom: 40px;
89 | }
90 | .hero-pitch-left {
91 | align-items: center;
92 | padding: 0 0;
93 | h5 {
94 | padding: 0 0;
95 | width: calc(100% - 20px);
96 | margin: inherit auto;
97 | }
98 | .listen-row {
99 | padding: 0 0;
100 | width: calc(100% - 20px);
101 | margin: 0 auto;
102 | }
103 | }
104 | /* phones */
105 | .landing-content,
106 | .page-content {
107 | min-width: 350px;
108 | max-width: 600px;
109 | width: 100%;
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/ui/src/components/SearchBar/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import SearchIcon from '../../../images/search.svg'
3 | import './styles.scss'
4 |
5 | interface IProps {
6 | search?: string
7 | searchType?: string
8 | onSearchChange: (evt: React.ChangeEvent
57 |
77 |
58 |
59 | 
{
63 | ev.target.src = NoImage
64 | }}
65 | loading="lazy"
66 | />
67 |
68 |
69 |
70 |
76 | {title}
71 | by {author}
72 |
73 | {this.renderCategories(categories)}
74 |
75 | 78 | {truncateString(description)} 79 |
80 |
55 |
84 | )
85 | }
86 |
87 | export default AppsWebPart
88 |
--------------------------------------------------------------------------------
/_old/dev/style/default.css:
--------------------------------------------------------------------------------
1 | /* ----- Developer Search Page ----- */
2 | @keyframes spin {
3 | 0% { transform: rotate(0deg); }
4 | 100% { transform: rotate(359deg); }
5 | }
6 | div.pageContentWrapper.DeveloperSearch div#divSearch svg.loading {
7 | animation: spin 2s linear infinite;
8 | text-align: center;
9 | display: block;
10 | margin-left:auto;
11 | margin-right:auto;
12 | }
13 | div.pageContentWrapper.DeveloperSearch div#divSearch ul li.podcast {
14 | padding:10px;
15 |
16 | }
17 | div.pageContentWrapper.DeveloperSearch div#divSearch ul li.podcast + li.podcast {
18 | border-top: solid #ccc 1px;
19 | }
20 | div.pageContentWrapper.DeveloperSearch div#divSearch ul li.podcast img.albumart {
21 | margin-right:20px;
22 | width:128px;
23 | }
24 | div.pageContentWrapper.DeveloperSearch div#divSearch ul li.podcast div.infocard {
25 | max-width:900px;
26 | }
27 | div.pageContentWrapper.DeveloperSearch div#divSearch ul li.podcast a.subscribeBadge {
28 | margin-bottom:8px;
29 | display: inline-block;
30 | }
31 | div.pageContentWrapper.DeveloperSearch div#divSearch ul li.podcast div.infocard p.description {
32 | overflow-wrap: break-word;
33 | word-break: break-all;
34 | }
35 | div.pageContentWrapper.DeveloperSearch div#divSearch ul li.podcast audio {
36 | outline:none;
37 | }
38 | div.pageContentWrapper.DeveloperSearch div#divSearch ul li.podcast video {
39 | outline:none;
40 | max-width:100%;
41 | }
42 | div.pageContentWrapper.DeveloperSearch div#divSearch ul li.podcast div.enclosurePlayer {
43 |
44 | margin-left:auto;
45 | margin-right:auto;
46 | }
47 | div.pageContentWrapper.DeveloperSearch div#divSearch input.feedSearch {
48 | width:80%;
49 | margin-auto:left;
50 | margin-auto:right;
51 | }
52 | div.pageContentWrapper.DeveloperSearch div#divSearch div.searchForm {
53 | text-align: center;
54 | }
55 | div.pageContentWrapper.DeveloperSearch div#divMain span.feedDisplayTitle {
56 | font-size:medium;
57 | color:blueviolet;
58 | }
59 |
60 |
61 | /* ----- Developer Documentation Page ----- */
62 | div.pageContentWrapper.DeveloperDocs div.row.developerDocs {
63 | margin-top:60px;
64 | }
65 |
66 | div.pageContentWrapper.DeveloperDocs div.row.developerDocs p {
67 | padding-left:10px;
68 | }
69 |
70 | div.pageContentWrapper.DeveloperDocs div.row.developerDocs div.codeExampleBlock {
71 | background-color:#e9e9e9;
72 | border-radius:12px;
73 | padding:20px;
74 | }
75 |
76 | div.pageContentWrapper.DeveloperDocs div.row.developerDocs div.codeExampleBlock div.code {
77 | margin-left:10px;
78 | }
79 |
80 | div.pageContentWrapper.DeveloperDocs div.row.developerDocs h4 {
81 | margin-bottom:20px;
82 | }
83 |
84 | div.pageContentWrapper.DeveloperDocs div.row.developerDocs div.codeExampleBlock {
85 | margin-bottom:30px;
86 | }
87 | div.pageContentWrapper.DeveloperDocs div.row.developerDocs li.api-endpoint {
88 | border-left: solid #ddd 4px;
89 | margin-top:10px;
90 | border-bottom: solid white 0;
91 | }
92 |
93 | div.pageContentWrapper.DeveloperDocs div.row.developerDocs li.api-endpoint-write {
94 | border-left: solid orange 4px;
95 | }
--------------------------------------------------------------------------------
/ui/src/components/Button/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Link } from 'react-router-dom'
3 |
4 | import './styles.scss'
5 |
6 | interface IProps {
7 | className?: string
8 | big?: boolean
9 | small?: boolean
10 | slim?: boolean
11 | primary?: boolean
12 | link?: boolean
13 | children?: any
14 | style?: string
15 | href?: string
16 | type?: string
17 | alt?: string
18 | onClick?: (e?: any) => void
19 | disabled?: boolean
20 | dataValue?: string
21 | selected?: boolean
22 | }
23 |
24 | export default class Button extends React.PureComponentSupporting Apps, Directories and Hosting Companies
61 |
62 |
69 |
70 |
63 |
64 |
66 | App
65 |Supported Elements
67 |Platforms
68 |-
71 | {filteredApps
72 | .sort(function (a, b) {
73 | if (a.supportedElements > b.supportedElements) {
74 | return -1
75 | }
76 | if (a.supportedElements < b.supportedElements) {
77 | return 1
78 | }
79 | return 0
80 | })
81 | .map((item) => SingleApp(item))}
82 |
{buttonEl}
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/ui/src/utils.ts:
--------------------------------------------------------------------------------
1 | import queryStringHelper from 'query-string'
2 | import NoImage from '../images/no-cover-art.png'
3 |
4 | export const updateTitle = (tile?: string) => {
5 | let newTitle = 'Podcastindex.org'
6 | if (tile !== undefined)
7 | newTitle = tile + ' | ' + newTitle
8 | document.title = newTitle
9 | }
10 |
11 | export const encodeSearch = (searchString: string): string => {
12 | return encodeURIComponent(searchString)
13 | }
14 |
15 | export const cleanSearchQuery = (queryString: string, field: string = 'q'): string => {
16 | let params = queryStringHelper.parse(queryString)
17 | let queryAr = params[field] as string
18 | if (!queryAr) {
19 | return ''
20 | }
21 | return queryAr
22 | }
23 |
24 | export const truncateString = (input: string) => {
25 | if (input.length > 200)
26 | return `${input.substring(0, 300)}...`
27 | else
28 | return input
29 | }
30 |
31 | export const titleizeString = (input: string) => {
32 | return input
33 | .split(/\W+/gi)
34 | .map(w => w.charAt(0).toUpperCase() + w.slice(1))
35 | .join(' ')
36 | }
37 |
38 | export const getPrettyDate = (time: number, includeTime: boolean = true) => {
39 | // Javascript epoch is in milliseconds; datePublished is in seconds
40 | const dateObj = new Date(time * 1000)
41 | if (includeTime)
42 | return dateObj.toLocaleString()
43 | return dateObj.toLocaleDateString()
44 | }
45 |
46 | export const getISODate = (time: number): string => {
47 | // Javascript epoch is in milliseconds; datePublished is in seconds
48 | const dateObj = new Date(time * 1000)
49 | return dateObj.toISOString()
50 | }
51 |
52 |
53 | export const fixURL = (url: string) => {
54 | if (url === undefined || url === null) {
55 | return url
56 | } else {
57 | url = url.trim()
58 | if (url !== '') {
59 | let prefix = url.substring(0, 4).toLowerCase()
60 | if (prefix !== 'http')
61 | url = `http://${url}`
62 | }
63 | }
64 | return url
65 | }
66 |
67 | export const isValidURL = (urlString: string) => {
68 | try {
69 | let url = new URL(urlString)
70 | return url.protocol === 'http:' || url.protocol === 'https:'
71 | } catch (_) {
72 | return false
73 | }
74 | }
75 |
76 | /**
77 | * Return the best image available
78 | *
79 | * If item doesn't contain an image, returns a placeholder image
80 | *
81 | * @param item the episode, item, or feed to get image for
82 | */
83 | export const getImage = (item) => {
84 | return item.artwork || item.image || item.feedImage || NoImage
85 | }
86 |
87 | /**
88 | * Encodes text to URL safe base64
89 | *
90 | * Based on example from https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem
91 | *
92 | * @param text the text to encode
93 | * @return the base 64 encoded text
94 | */
95 | export const encodeURLSafeBase64 = (text: string): string => {
96 | const binString = Array.from(new TextEncoder().encode(text), (byte) =>
97 | String.fromCodePoint(byte),
98 | ).join('')
99 | // since Podlink doesn't need trailing =, remove them
100 | return btoa(binString).replace(/=+$/, '');
101 | }
102 |
--------------------------------------------------------------------------------
/ui/images/transcript.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
27 |
--------------------------------------------------------------------------------
/ui/src/pages/Apps/AppsWebPart/SingleApp/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import './styles.scss'
4 |
5 | function SingleApp(app) {
6 | return (
7 |
9 |
28 |
29 |
10 | 
13 |
14 |
13 |
15 |
16 | {app.appName}
17 |
18 |
27 |
19 | {app.appType.map((type, j) => (
20 |
30 | {app.supportedElements
31 | .sort((a, b) => (a.elementName > b.elementName ? 1 : -1))
32 | .map((suppElement, j) => (
33 |
34 | {j > 0 && ', '}
35 |
36 | {suppElement.elementName}
37 |
38 |
39 | ))}
40 |
41 |
42 |
43 | {app.platforms
44 | .sort((a, b) => (a > b ? 1 : -1))
45 | .map((platform, j) => {
46 | const hideNAAppPlatformOnMobile = platform === 'N/A'
47 | const platformLink = app.platformLinks?.[platform]
48 |
49 | return (
50 |
58 | {j > 0 && ', '}
59 | {platformLink ? (
60 |
65 | {platform}
66 |
67 | ) : (
68 | platform
69 | )}
70 |
71 | )
72 | })}
73 |
74 |
130 |
137 |
138 | )
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/_old/dev/style/style.css:
--------------------------------------------------------------------------------
1 | #divHome a { text-decoration: none; }
2 | .aPreauthLogout { float:right; }
3 | #divNavSearchResults { display:none; }
4 | img { outline:none; }
5 | .bodyspacer {
6 | padding-top: 30px;
7 | }
8 | .smallspacer {
9 | padding-top: 20px;
10 | }
11 | #divPageTitle h1 {
12 | font-size: 250%;
13 | margin-left: auto;
14 | margin-right: auto;
15 | }
16 | #imgSpinner,.imgSpinner {
17 | display:none;
18 | }
19 | #navSpinner {
20 | display:none;
21 | }
22 | .imgSpinner,.spinner {
23 | display:none;
24 | }
25 | #spnTweetWarning {
26 | display:none;
27 | font-weight:bold !important;
28 | color: #f30 !important;
29 | text-shadow:0 0 9px #777 !important;
30 | }
31 | .urlinput {
32 | width: 400px;
33 | }
34 | .hourinput {
35 | width:30px;
36 | }
37 | .dropTarget {
38 | border:dashed green 2px;
39 | }
40 | #divSubscribeUpload {
41 | display:none;
42 | }
43 | .elHidden {
44 | display:none;
45 | }
46 | #divMessageBox {
47 | position:fixed;
48 | top:0;
49 | left:0;
50 | z-index:99999;
51 | text-align:center;
52 | }
53 | #messagebox {
54 | position:relative;
55 | display:block;
56 | width:500px;
57 | padding:50px 20px;
58 | margin-left:auto;
59 | margin-right:auto;
60 | font-size:14px;
61 | text-align:center;
62 | border-radius:2px;
63 | }
64 | #messagebox #btnMessageBoxClose {
65 | position:absolute;
66 | bottom:0;
67 | right:0;
68 | }
69 | .msggood {
70 | background:#9acd32;
71 | border:1px solid #006400;
72 | font-weight:bold !important;
73 | color: #006400 !important;
74 | }
75 | .msgwarn {
76 | background:#ffd700;
77 | border:1px solid #b8860b;
78 | font-weight:bold !important;
79 | color: #f30 !important;
80 | }
81 | .msgbad {
82 | background:#cd5c5c;
83 | border:1px solid #700;
84 | font-weight:bold !important;
85 | color: #700 !important;
86 | }
87 | .table tbody tr:hover td,
88 | .table tbody tr:hover th {
89 | background-color: inherit;
90 | }
91 |
92 | /**** Transitions ****/
93 |
94 | .transitions-enabled.masonry,
95 | .transitions-enabled.masonry .masonry-brick {
96 | -webkit-transition-duration: 0.7s;
97 | -moz-transition-duration: 0.7s;
98 | -ms-transition-duration: 0.7s;
99 | -o-transition-duration: 0.7s;
100 | transition-duration: 0.7s;
101 | }
102 |
103 | .transitions-enabled.masonry {
104 | -webkit-transition-property: height, width;
105 | -moz-transition-property: height, width;
106 | -ms-transition-property: height, width;
107 | -o-transition-property: height, width;
108 | transition-property: height, width;
109 | }
110 |
111 | .transitions-enabled.masonry .masonry-brick {
112 | -webkit-transition-property: left, right, top;
113 | -moz-transition-property: left, right, top;
114 | -ms-transition-property: left, right, top;
115 | -o-transition-property: left, right, top;
116 | transition-property: left, right, top;
117 | }
118 |
119 |
120 | /* disable transitions on container */
121 | .transitions-enabled.infinite-scroll.masonry {
122 | -webkit-transition-property: none;
123 | -moz-transition-property: none;
124 | -ms-transition-property: none;
125 | -o-transition-property: none;
126 | transition-property: none;
127 | }
128 |
129 | .black_overlay{
130 | position: absolute;
131 | top: 0%;
132 | left: 0%;
133 | width: 100%;
134 | height: 100%;
135 | background-color: #222;
136 | z-index:1001;
137 | -moz-opacity: 0.8;
138 | opacity:.80;
139 | filter: alpha(opacity=80);
140 | }
141 |
142 | .white_content {
143 | display: none;
144 | position: absolute;
145 | top: 25%;
146 | left: 25%;
147 | width: 50%;
148 | height: 50%;
149 | padding: 16px;
150 | border: 16px solid orange;
151 | background-color: white;
152 | z-index:1002;
153 | overflow: auto;
154 | }
155 |
156 | .center {
157 | float: none;
158 | margin-left: auto;
159 | margin-right: auto;
160 | }
161 |
162 | header {
163 | margin-bottom:20px;
164 | }
--------------------------------------------------------------------------------