6 |
7 | [](https://github.com/stanleyowen/loofi/releases)
8 | [](https://github.com/stanleyowen/loofi/network)
9 | [](https://github.com/stanleyowen/loofi/stargazers)
10 | [](https://github.com/stanleyowen/loofi/blob/master/LICENSE)
11 |
12 | [](https://github.com/stanleyowen/loofi/actions/workflows/codeql-analysis.yml)
13 | [](https://github.com/stanleyowen/loofi/actions/workflows/semgrep.yml)
14 | [](https://github.com/stanleyowen/loofi/actions/workflows/tauri-test-build.yml)
15 | [](https://app.netlify.com/sites/loofi/deploys)
16 | [](https://github.com/stanleyowen/loofi/actions/workflows/tauri-publish.yml)
17 |
18 | [](https://github.com/stanleyowen/loofi/releases)
19 | [](https://github.com/stanleyowen/loofi/releases)
20 | [](https://github.com/stanleyowen/loofi/releases)
21 |
22 |
23 | 24 | 25 | Loofi is an **open source** LoFi Streaming of application built with **Typescript, Electron, React, Firebase**. 26 | 27 | If you find this project useful, leave a 🌟 to keep a beginner motivated 😊. 28 | 29 | ## Stargazers and Contributors 30 | 31 | [](https://github.com/stanleyowen/loofi/stargazers) 32 | [](https://github.com/stanleyowen/loofi/network/members) 33 | 34 | ## LICENSE 35 | 36 | [MIT](LICENSE) 37 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Suggest an idea for LoFi Player 3 | labels: [enhancement] 4 | body: 5 | - type: textarea 6 | attributes: 7 | label: Problem Description 8 | description: Please add a clear and concise description of the problem you are seeking to solve with this feature request. 9 | - type: textarea 10 | attributes: 11 | label: Solution/Idea 12 | description: Describe the solution you'd like in a clear and concise manner. 13 | validations: 14 | required: true 15 | - type: textarea 16 | attributes: 17 | label: Alternatives 18 | description: A clear and concise description of any alternative solutions or features you've considered. 19 | validations: 20 | required: true 21 | - type: markdown 22 | attributes: 23 | value: | 24 | --- 25 | 26 | Please include a list of what the feature should and shouldn't do by filling in the table below. 27 | 28 | 'Must' implies that the feature should not ship without this capability. 29 | 'Should' is something we should push hard for, but is not absolutely required to ship. 30 | 'Could' is a nice-to-have; a good stretch goal that isn't painful if we don't achieve it. 31 | 'Won't' is a clear statement that the proposal/feature will intentionally not have that capability. 32 | 33 | This list will evolve and grow as the proposal becomes more refined over time. 34 | A good rule of thumb is to start your proposal with no more than 7 high-level requirements. 35 | - type: textarea 36 | attributes: 37 | label: Priorities 38 | description: Describe all the elements of the idea and how important they are. 39 | value: | 40 | | Capability | Priority | 41 | | :---------- | :------- | 42 | | This proposal will allow developers to accomplish W | Must | 43 | | This proposal will allow end users to accomplish X | Should | 44 | | This proposal will allow developers to accomplish Y | Could | 45 | | This proposal will allow end users to accomplish Z | Won't | 46 | - type: input 47 | id: app-version 48 | attributes: 49 | label: LoFi Player Version 50 | description: What version of LoFi Player are you using? 51 | placeholder: v1.0.0 52 | validations: 53 | required: true 54 | - type: input 55 | attributes: 56 | label: Operating System Version 57 | description: What operating system version are you using? On Windows, click Start button > Settings > System > About. On macOS, click the Apple Menu > About This Mac. On Linux, use lsb_release or uname -a. 58 | placeholder: e.g. Windows 10 21H1, macOS Catalina 10.15.7, or Ubuntu 20.04 59 | validations: 60 | required: true 61 | - type: textarea 62 | attributes: 63 | label: Additional comment 64 | description: Add any other comment or screenshots about the feature request here. -------------------------------------------------------------------------------- /.github/workflows/tauri-test-build.yml: -------------------------------------------------------------------------------- 1 | name: 'Tauri Test Build' 2 | on: [pull_request] 3 | 4 | jobs: 5 | test-tauri: 6 | strategy: 7 | fail-fast: false 8 | matrix: 9 | platform: [macos-latest, ubuntu-latest, windows-latest] 10 | 11 | runs-on: ${{ matrix.platform }} 12 | steps: 13 | - name: Checkout repository 14 | uses: actions/checkout@v4 15 | 16 | - name: install dependencies (ubuntu only) 17 | if: matrix.platform == 'ubuntu-latest' 18 | run: | 19 | sudo apt-get update 20 | sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf libsoup2.4-dev libjavascriptcoregtk-4.1-dev 21 | sudo ln -sf /usr/lib/x86_64-linux-gnu/pkgconfig/webkit2gtk-4.1.pc /usr/lib/x86_64-linux-gnu/pkgconfig/webkit2gtk-4.0.pc 22 | sudo ln -sf /usr/lib/x86_64-linux-gnu/pkgconfig/javascriptcoregtk-4.1.pc /usr/lib/x86_64-linux-gnu/pkgconfig/javascriptcoregtk-4.0.pc 23 | sudo ln -sf /usr/include/webkitgtk-4.1 /usr/include/webkitgtk-4.0 24 | sudo ln -sf /usr/lib/x86_64-linux-gnu/libwebkit2gtk-4.1.so /usr/lib/x86_64-linux-gnu/libwebkit2gtk-4.0.so 25 | sudo ln -sf /usr/lib/x86_64-linux-gnu/libjavascriptcoregtk-4.1.so /usr/lib/x86_64-linux-gnu/libjavascriptcoregtk-4.0.so 26 | 27 | - name: Rust setup 28 | uses: dtolnay/rust-toolchain@stable 29 | with: 30 | # Those targets are only used on macos runners so it's in an `if` to slightly speed up windows and linux builds. 31 | targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }} 32 | toolchain: 1.79.0 33 | 34 | - name: Rust cache 35 | uses: swatinem/rust-cache@v2 36 | with: 37 | workspaces: './src-tauri -> target' 38 | 39 | - name: Sync node version and setup node 40 | uses: actions/setup-node@v4 41 | with: 42 | node-version: 'lts/*' 43 | cache: 'yarn' 44 | 45 | - name: Install frontend dependencies 46 | run: yarn install 47 | 48 | - name: Building tauri app 49 | uses: tauri-apps/tauri-action@v0 50 | env: 51 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 52 | TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }} 53 | TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }} 54 | REACT_APP_ALLOW_BETA: false 55 | REACT_APP_API_KEY: ${{ secrets.REACT_APP_API_KEY }} 56 | REACT_APP_AUTH_DOMAIN: ${{ secrets.REACT_APP_AUTH_DOMAIN }} 57 | REACT_APP_DB_URL: ${{ secrets.REACT_APP_DB_URL }} 58 | REACT_APP_PROJECT_ID: ${{ secrets.REACT_APP_PROJECT_ID }} 59 | REACT_APP_STORAGE_BUCKET: ${{ secrets.REACT_APP_STORAGE_BUCKET }} 60 | REACT_APP_SENDER_ID: ${{ secrets.REACT_APP_SENDER_ID }} 61 | REACT_APP_ID: ${{ secrets.REACT_APP_ID }} 62 | REACT_APP_MEASUREMENT_ID: ${{ secrets.REACT_APP_MEASUREMENT_ID }} -------------------------------------------------------------------------------- /src/components/settings.component.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Tab, Tabs } from '@mui/material'; 3 | 4 | import About from './about.component'; 5 | import Preferences from './preferences.component'; 6 | import Experimental from './experimental.component'; 7 | import { 8 | AboutSolid, 9 | AboutOutline, 10 | PreferencesSolid, 11 | PreferencesOutline, 12 | ExperimentalSolid, 13 | ExperimentalOutline, 14 | } from '../lib/icons.component'; 15 | 16 | interface TabPanelProps { 17 | children?: React.ReactNode; 18 | index: number; 19 | value: number; 20 | } 21 | function TabPanel(props: TabPanelProps) { 22 | const { children, value, index, ...other } = props; 23 | return ( 24 |
31 | {value === index &&
33 | );
34 | }
35 |
36 | // eslint-disable-next-line
37 | const Settings = ({ updateAppToLatestVersion }: any) => {
38 | const [tabIndex, setTabIndex] = useState{children}
}
32 |
42 | setTabIndex(index)}
46 | className="w-20 tab"
47 | >
48 | {['Preferences', 'Experimental', 'About'].map((tab, index) => {
49 | const component: { [key: string]: any } = {
50 | AboutSolid,
51 | AboutOutline,
52 | PreferencesSolid,
53 | PreferencesOutline,
54 | ExperimentalSolid,
55 | ExperimentalOutline,
56 | };
57 | const SolidIcon = component[`${tab}Solid`];
58 | const OutlineIcon = component[`${tab}Outline`];
59 | return (
60 |
75 |
76 |
78 |
79 |
81 |
82 |
84 |
85 | );
86 | };
87 |
88 | export default Settings;
89 |
--------------------------------------------------------------------------------
/.github/workflows/tauri-publish.yml:
--------------------------------------------------------------------------------
1 | name: 'Tauri Publish'
2 | on:
3 | push:
4 | branches: [main]
5 |
6 | jobs:
7 | publish-tauri:
8 | permissions:
9 | contents: write
10 | strategy:
11 | fail-fast: false
12 | matrix:
13 | platform: [macos-latest, ubuntu-latest, windows-latest]
14 |
15 | runs-on: ${{ matrix.platform }}
16 | steps:
17 | - name: Checkout repository
18 | uses: actions/checkout@v4
19 |
20 | - name: install dependencies (ubuntu only)
21 | if: matrix.platform == 'ubuntu-latest'
22 | run: |
23 | sudo apt-get update
24 | sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf libsoup2.4-dev libjavascriptcoregtk-4.1-dev
25 | sudo ln -sf /usr/lib/x86_64-linux-gnu/pkgconfig/webkit2gtk-4.1.pc /usr/lib/x86_64-linux-gnu/pkgconfig/webkit2gtk-4.0.pc
26 | sudo ln -sf /usr/lib/x86_64-linux-gnu/pkgconfig/javascriptcoregtk-4.1.pc /usr/lib/x86_64-linux-gnu/pkgconfig/javascriptcoregtk-4.0.pc
27 | sudo ln -sf /usr/include/webkitgtk-4.1 /usr/include/webkitgtk-4.0
28 | sudo ln -sf /usr/lib/x86_64-linux-gnu/libwebkit2gtk-4.1.so /usr/lib/x86_64-linux-gnu/libwebkit2gtk-4.0.so
29 | sudo ln -sf /usr/lib/x86_64-linux-gnu/libjavascriptcoregtk-4.1.so /usr/lib/x86_64-linux-gnu/libjavascriptcoregtk-4.0.so
30 |
31 | - name: Rust setup
32 | uses: dtolnay/rust-toolchain@stable
33 | with:
34 | # Those targets are only used on macos runners so it's in an `if` to slightly speed up windows and linux builds.
35 | targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
36 | toolchain: 1.79.0
37 |
38 | - name: Rust cache
39 | uses: swatinem/rust-cache@v2
40 | with:
41 | workspaces: './src-tauri -> target'
42 |
43 | - name: Sync node version and setup node
44 | uses: actions/setup-node@v4
45 | with:
46 | node-version: 'lts/*'
47 | cache: 'yarn'
48 |
49 | - name: Install frontend dependencies
50 | run: yarn install
51 |
52 | - name: Building tauri app
53 | uses: tauri-apps/tauri-action@v0
54 | env:
55 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
56 | TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
57 | TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
58 | REACT_APP_ALLOW_BETA: false
59 | REACT_APP_API_KEY: ${{ secrets.REACT_APP_API_KEY }}
60 | REACT_APP_AUTH_DOMAIN: ${{ secrets.REACT_APP_AUTH_DOMAIN }}
61 | REACT_APP_DB_URL: ${{ secrets.REACT_APP_DB_URL }}
62 | REACT_APP_PROJECT_ID: ${{ secrets.REACT_APP_PROJECT_ID }}
63 | REACT_APP_STORAGE_BUCKET: ${{ secrets.REACT_APP_STORAGE_BUCKET }}
64 | REACT_APP_SENDER_ID: ${{ secrets.REACT_APP_SENDER_ID }}
65 | REACT_APP_ID: ${{ secrets.REACT_APP_ID }}
66 | REACT_APP_MEASUREMENT_ID: ${{ secrets.REACT_APP_MEASUREMENT_ID }}
67 | with:
68 | tagName: v__VERSION__
69 | releaseName: 'Loofi v__VERSION__'
70 | releaseBody: 'See the assets to download this version and install.'
71 | releaseDraft: true
72 | prerelease: false
--------------------------------------------------------------------------------
/src/components/navbar.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Tooltip, IconButton } from '@mui/material';
3 | import { ChevronLeft, ChevronRight, GitHub } from '../lib/icons.component';
4 |
5 | // eslint-disable-next-line
6 | const Navbar = ({ properties, handleChange }: any) => {
7 | const [property, setProperty] = useState({
8 | disablePrevious: true,
9 | disableForward: true,
10 | });
11 |
12 | useEffect(() => {
13 | setProperty({
14 | disablePrevious:
15 | properties.history?.length > 1 && properties.action > 0
16 | ? false
17 | : true,
18 | disableForward:
19 | properties.action + 1 < properties.history?.length
20 | ? false
21 | : true,
22 | });
23 | }, [properties]);
24 |
25 | const triggerAction = (type: 'next' | 'previous') => {
26 | if (type === 'previous')
27 | handleChange({
28 | id: 'activeTab',
29 | value: properties.history[properties.action - 1],
30 | goBackward: true,
31 | });
32 | else
33 | handleChange({
34 | id: 'activeTab',
35 | value: properties.history[properties.action + 1],
36 | goForward: true,
37 | });
38 | };
39 |
40 | return (
41 |
42 |
86 | );
87 | };
88 |
89 | export default Navbar;
90 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
16 |
17 |
18 |
43 |
44 |
53 |
54 |
45 | triggerAction('previous')}
47 | disabled={property.disablePrevious}
48 | >
49 |
51 |
52 |
55 |
60 |
69 |
70 |
61 | triggerAction('next')}
63 | disabled={property.disableForward}
64 | >
65 |
67 |
68 |
71 |
76 |
81 |
83 |
84 |
85 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/src/components/preferences.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Switch, Button, Accordion, AccordionSummary } from '@mui/material';
3 |
4 | import Theme from '../lib/theme.json';
5 | import {
6 | Themes,
7 | Expand,
8 | ThemesApp,
9 | SaveLocation,
10 | } from '../lib/icons.component';
11 |
12 | // eslint-disable-next-line
13 | const About = () => {
14 | const [activeTab, setActiveTab] = useState
52 |
53 |
81 |
95 | );
96 | };
97 |
98 | export default About;
99 |
--------------------------------------------------------------------------------
/src/components/download.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { Alert, AlertTitle, Button, Tooltip } from '@mui/material';
3 | import { Windows, MacOS, Linux, ExternalLink } from '../lib/icons.component';
4 | import axios from 'axios';
5 |
6 | const About = () => {
7 | const [properties, setProperties] = useState
55 |
58 |
59 | Themes
57 |
60 | {Theme.map((theme) => {
61 | return (
62 |
77 | );
78 | })}
79 |
80 |
82 | setContinuePreviousState(e.target.checked)}
92 | />
93 |
94 |
83 |
88 |
85 |
87 | Continue where you left off
86 |
23 |
27 | INFO
28 | Currently, Loofi doesn't support
34 |
125 | );
126 | };
127 |
128 | export default About;
129 |
--------------------------------------------------------------------------------
/src/components/sidebar.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import {
3 | Button,
4 | Dialog,
5 | Tooltip,
6 | DialogActions,
7 | DialogContent,
8 | DialogContentText,
9 | } from '@mui/material';
10 | import {
11 | ExperimentalOutline,
12 | Download,
13 | HomeSolid,
14 | HomeOutline,
15 | SettingsSolid,
16 | SettingsOutline,
17 | SearchSolid,
18 | SearchOutline,
19 | } from '../lib/icons.component';
20 |
21 | // eslint-disable-next-line
22 | const SideBar = ({ handleChange, properties }: any) => {
23 | const [isOpen, setDialog] = useState32-bit{' '}
29 | systems. If you are running a 32-bit system, you
30 | can still use it Loofi via Web. By default, Loofi installation
31 | are on Intel x86_64 architecture. To install Loofi
32 | on ARM architecture, please refer to source code.
33 |
35 |
124 |
36 |
59 |
37 |
58 | Windows
39 |40 | {properties?.downloadURL['windows-x86_64']?.msi 41 | ?.split('/') 42 | ?.pop()} 43 |
44 | 57 |
60 |
83 |
61 |
82 | macOS
63 |64 | {properties?.downloadURL['darwin-x86_64']?.dmg 65 | ?.split('/') 66 | ?.pop()} 67 |
68 | 81 |
84 |
107 |
85 |
106 | Linux
87 |88 | {properties?.downloadURL['linux-x86_64']?.appImage 89 | ?.split('/') 90 | ?.pop()} 91 |
92 | 105 |
108 |
113 | Source Code
123 |
46 |
148 | );
149 | };
150 |
151 | export default SideBar;
152 |
--------------------------------------------------------------------------------
/src/components/search.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Close } from '../lib/icons.component';
3 | import { Skeleton, TextField, IconButton } from '@mui/material';
4 |
5 | const Search = ({ song, songData, handleSong }: any) => {
6 | const items: any = {
7 | music: [],
8 | author: [],
9 | };
10 | const [results, setResult] = useState
47 | {list.map((tab, index) => {
48 | const components: { [key: string]: any } = {
49 | Download,
50 | HomeSolid,
51 | HomeOutline,
52 | SearchSolid,
53 | SearchOutline,
54 | SettingsSolid,
55 | SettingsOutline,
56 | };
57 | const SolidIcon = components[`${tab}Solid`];
58 | const OutlineIcon = components[`${tab}Outline`];
59 | return (
60 | switchTab(tab.toLowerCase())}
66 | >
67 |
85 |
86 | );
87 | })}
88 | {process.env.REACT_APP_ALLOW_BETA === 'true' &&
89 | !window.__TAURI_METADATA__ ? (
90 | process.env.REACT_APP_CONTEXT === 'production' ? (
91 |
101 | ) : (
102 |
116 | )
117 | ) : null}
118 |
119 |
120 |
147 |
59 |
75 | );
76 | }
77 | else if (results?.music?.length > 0)
78 | results.music.map((music: any, index: any) => {
79 | return items.music.push(
80 |
60 |
74 |
66 |
67 |
73 |
81 |
99 | );
100 | });
101 | if (results?.author?.length > 0)
102 | results.author.map((music: any, index: any) => {
103 | return items.author.push(
104 |
82 | 
83 |
98 |
84 |
97 |
85 |
88 |
96 | {music.title}
86 |{music.author}
87 |
105 |
123 | );
124 | });
125 | }
126 |
127 | const ClearQuery = (e: React.MouseEvent
106 |
107 |
122 |
108 |
121 |
109 |
112 |
120 | {music.title}
110 |{music.author}
111 |
145 |
189 | );
190 | };
191 |
192 | export default Search;
193 |
--------------------------------------------------------------------------------
/src/components/controls.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Slider, IconButton, Button } from '@mui/material';
3 | import {
4 | Play,
5 | Pause,
6 | Audio,
7 | MutedAudio,
8 | SkipNext,
9 | SkipPrevious,
10 | } from '../lib/icons.component';
11 |
12 | interface Queue {
13 | queue: [];
14 | currentIndex: number;
15 | }
16 |
17 | interface Property {
18 | duration: number;
19 | progress: number;
20 | volume: number;
21 | muted: boolean;
22 | }
23 |
24 | // eslint-disable-next-line
25 | const Controls = ({ song, songData, handleSong }: any) => {
26 | const [queue, setQueue] = useState
146 | setKeyword(e.target.value)}
152 | id="search-query"
153 | autoFocus
154 | autoComplete="off"
155 | InputProps={{
156 | endAdornment:
160 | {items.music.length !== 0 ? (
161 |
162 |
169 | ) : null}
170 | {items.author.length !== 0 ? (
171 |
163 | Songs
164 |
165 |
166 | {items.music}
167 |
168 |
172 |
179 | ) : null}
180 | {keyword &&
181 | !isFetching &&
182 | results.music?.length === 0 &&
183 | results.author?.length === 0 ? (
184 |
173 | Artists
174 |
175 |
176 | {items.author}
177 |
178 |
185 | No Results Found for {keyword}
186 |
187 | ) : null}
188 |
120 |
198 | );
199 | };
200 |
201 | export default Controls;
202 |
--------------------------------------------------------------------------------
/src/components/app.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from 'react';
2 | import { initializeApp } from 'firebase/app';
3 | import { getDatabase, ref, onValue } from 'firebase/database';
4 | import { getFirestore, collection, addDoc } from 'firebase/firestore';
5 | import {
6 | Alert,
7 | Slide,
8 | Snackbar,
9 | LinearProgress,
10 | SlideProps,
11 | AlertTitle,
12 | Button,
13 | } from '@mui/material';
14 | import {
15 | checkUpdate,
16 | installUpdate,
17 | onUpdaterEvent,
18 | } from '@tauri-apps/api/updater';
19 | import { relaunch } from '@tauri-apps/api/process';
20 |
21 | import Navbar from './navbar.component';
22 | import BaseLayout from './base.component';
23 | import Controls from './controls.component';
24 | import packageInfo from '../../package.json';
25 | import { AppInterface } from '../lib/interfaces.component';
26 | import { ExternalLink } from '../lib/icons.component';
27 |
28 | type TransitionProps = Omit
121 | 
122 |
127 |
128 |
123 |
126 | {song.title}
124 | {song.author}
125 |
129 |
173 |
174 |
130 |
133 | skipAudio(queue.currentIndex, 'previous')
134 | }
135 | className={
136 | `p-10 no-font ` +
137 | (queue.currentIndex === 0 ? '' : ' font-black')
138 | }
139 | >
140 |
142 |
143 |
147 | skipAudio(queue.currentIndex, 'next')}
149 | className="p-10 no-font font-black"
150 | >
151 |
153 |
154 | {SkipPrevious()}
141 |
144 | {song.playing ?
146 | {SkipNext()}
152 |
155 | triggerDuration(value)}
167 | />
168 |
172 |
159 | 00:00
160 |
161 |
169 | {parseTime(property.duration ? property.duration : 0)}
170 |
171 |
175 |
197 |
176 |
187 | handleChange('volume', value)}
194 | />
195 |
196 |
167 | {data.length === 0 ?
247 | );
248 | };
249 |
250 | export default App;
251 |
--------------------------------------------------------------------------------
/src/components/home.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Skeleton } from '@mui/material';
3 |
4 | interface Music {
5 | title: string;
6 | author: string;
7 | image: string;
8 | audio: HTMLAudioElement;
9 | }
10 |
11 | const Home = ({ song, songData, handleSong }: any) => {
12 | const [greeting, setGreeting] = useState
172 |
194 |
195 | You are offline. Some functionality may be unavailable.
196 |
197 |
198 |
199 |
200 |
201 | Loofi Desktop is up to date.
202 |
203 |
204 |
205 |
209 |
210 |
211 | Update Available
212 |
213 |
244 |
245 |
246 |
173 |
185 |
186 |
214 | A new version of Loofi Desktop is available! Version{' '}
215 | {updateDialog.version} is now available—you have{' '}
216 | {packageInfo.version}.
217 |
223 | View the release notes
226 |
227 | Would you like to update now?
228 |
48 |
65 | ) : (
66 |
49 |
64 |
56 |
67 |
83 | )
84 | );
85 | }
86 | return skeleton;
87 | }
88 |
89 | return (
90 |
68 |
82 |
74 |
75 |
81 |
91 |
211 | );
212 | };
213 |
214 | export default Home;
215 |
--------------------------------------------------------------------------------
/src/components/about.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Button, Tooltip, Accordion, AccordionSummary } from '@mui/material';
3 | import packageInfo from '../../package.json';
4 | import {
5 | Expand,
6 | Warning,
7 | License,
8 | Feedback,
9 | Resources,
10 | Checkmark,
11 | Changelog,
12 | AboutOutline,
13 | Contributors,
14 | PrivacyPolicy,
15 | CopyToClipboard as CopyToClipboardIcon,
16 | CheckUpdate,
17 | } from '../lib/icons.component';
18 | import { LoadingButton } from '@mui/lab';
19 |
20 | const About = ({ updateAppToLatestVersion }: any) => {
21 | const [copiedToClipboard, setCopiedToClipboard] = useState<
22 | boolean | string
23 | >(false);
24 | const [isFetching, setIsFetching] = useStateGood {greeting}
92 |
93 | {songData?.length !== 0
94 | ? songData.map((music: Music, index: number) => {
95 | if (index > 5) return;
96 | return (
97 |
118 |
98 |
114 | );
115 | })
116 | : SkeletonPreview(6, 'small')}
117 |
99 |
100 |
113 | 101 | {music.title} 102 |
103 | 112 |
119 | {songData?.length !== 0 && songData?.length >= 7
120 | ? songData.map((music: Music, index: number) => {
121 | if (index < 6 || index > 17) return; // eslint-disable-line
122 | return (
123 |
151 |
124 |
147 | );
148 | })
149 | : SkeletonPreview(8, 'large')}
150 |
125 |
126 |
146 |
127 |
145 |
128 |
135 |
144 | 129 | {music.title} 130 |
131 |132 | {music.author} 133 |
134 |
152 | {songData?.length !== 0 && songData?.length >= 19
153 | ? songData.map((music: Music, index: number) => {
154 | if (index < 17 || index > 22) return; // eslint-disable-line
155 | return (
156 |
177 |
157 |
173 | );
174 | })
175 | : null}
176 |
158 |
159 |
172 | 160 | {music.title} 161 |
162 | 171 |
178 | {songData?.length !== 0 && songData?.length >= 7
179 | ? songData.map((music: Music, index: number) => {
180 | if (index < 22) return; // eslint-disable-line
181 | return (
182 |
210 |
183 |
206 | );
207 | })
208 | : null}
209 |
184 |
185 |
205 |
186 |
204 |
187 |
194 |
203 | 188 | {music.title} 189 |
190 |191 | {music.author} 192 |
193 |
44 |
122 |
164 |
165 |
166 |
190 |
191 |
192 |
293 |
294 | );
295 | };
296 |
297 | export default About;
298 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --black: 0 0 0;
3 | --white: 255 255 255;
4 | --gray: 205 205 205;
5 | --dark-gray: 56 56 56;
6 | --light-gray: 244 244 244;
7 | --blue: 25 118 210;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
13 | 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
14 | 'Helvetica Neue', sans-serif;
15 | -moz-osx-font-smoothing: grayscale;
16 | -webkit-font-smoothing: antialiased;
17 | }
18 |
19 | h1,
20 | h2,
21 | h3,
22 | h4,
23 | h5,
24 | h6,
25 | p {
26 | margin: 0;
27 | padding: 0;
28 | }
29 |
30 | /* App Background */
31 | .backdrop {
32 | top: 0;
33 | left: 0;
34 | z-index: -2;
35 | width: 100%;
36 | height: 100%;
37 | position: fixed;
38 | }
39 | .acrylic-material,
40 | .backdrop-image,
41 | .backdrop-overlay {
42 | top: 0;
43 | left: 0;
44 | width: 100%;
45 | height: 100%;
46 | position: absolute;
47 | }
48 | .backdrop-overlay {
49 | top: 50%;
50 | left: 50%;
51 | z-index: -1;
52 | width: 200%;
53 | height: 250%;
54 | display: flex;
55 | position: fixed;
56 | display: -webkit-box;
57 | display: -ms-flexbox;
58 | -ms-flex-wrap: wrap;
59 | flex-wrap: wrap;
60 | -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
61 | -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
62 | transform: translateX(-50%) translateY(-50%) rotate(45deg);
63 | }
64 | .backdrop-overlay div {
65 | width: 10%;
66 | height: 10%;
67 | margin-right: 0.75%;
68 | margin-bottom: 0.75%;
69 | border-radius: 1.5vh;
70 | border: 1px solid rgb(var(--black));
71 | }
72 | .border-box {
73 | box-sizing: border-box !important;
74 | }
75 | .backdrop-image {
76 | background: url('https://user-images.githubusercontent.com/69080584/135237771-30c727d6-e88f-48e1-a65c-4fcef9e91113.png')
77 | center/cover no-repeat;
78 | -webkit-filter: blur(25px);
79 | filter: blur(25px);
80 | -webkit-transform: scale(1.1);
81 | -ms-transform: scale(1.1);
82 | transform: scale(1.1);
83 | }
84 | .acrylic-material {
85 | z-index: 1;
86 | backdrop-filter: none;
87 | -webkit-backdrop-filter: none;
88 | }
89 | .acrylic-material::before {
90 | content: '';
91 | opacity: 0.6;
92 | width: 100%;
93 | height: 100%;
94 | position: absolute;
95 | background-blend-mode: normal, color, luminosity;
96 | background: linear-gradient(
97 | 0deg,
98 | rgba(239, 239, 239, 0.3),
99 | rgba(239, 239, 239, 0.3)
100 | ),
101 | rgba(239, 239, 239, 0.95)
102 | url('https://user-images.githubusercontent.com/69080584/135238252-5fd29825-32dc-4035-bd75-98eabc473ac4.png')
103 | center/196px repeat;
104 | background: -o-linear-gradient(
105 | bottom,
106 | rgba(239, 239, 239, 0.3),
107 | rgba(239, 239, 239, 0.3)
108 | ),
109 | rgba(239, 239, 239, 0.95)
110 | url('https://user-images.githubusercontent.com/69080584/135238252-5fd29825-32dc-4035-bd75-98eabc473ac4.png')
111 | center/196px repeat;
112 | background: -webkit-gradient(
113 | linear,
114 | left bottom,
115 | left top,
116 | from(rgba(239, 239, 239, 0.3)),
117 | to(rgba(239, 239, 239, 0.3))
118 | ),
119 | rgba(239, 239, 239, 0.95)
120 | url('https://user-images.githubusercontent.com/69080584/135238252-5fd29825-32dc-4035-bd75-98eabc473ac4.png')
121 | center/196px repeat;
122 | }
123 |
124 | /* Sidebar */
125 | .sidebar {
126 | width: 225px;
127 | height: 100%;
128 | padding: 10px;
129 | position: fixed;
130 | padding-top: 30px;
131 | box-sizing: border-box;
132 | background: rgb(var(--white) / 40%);
133 | -webkit-transition: width 0.4s ease-in-out;
134 | -moz-transition: width 0.4s ease-in-out;
135 | -o-transition: width 0.4s ease-in-out;
136 | transition: width 0.4s ease-in-out;
137 | }
138 | #tabs {
139 | height: 100%;
140 | display: flex;
141 | flex-direction: column;
142 | }
143 | #tabs .active {
144 | background: rgb(var(--blue) / 15%);
145 | }
146 | .tab:not(#settings).active svg,
147 | .tab:not(#settings) .Mui-selected svg {
148 | animation: zoomIn 0.3s !important;
149 | }
150 | #settings.active svg {
151 | transition: all 0.5s !important;
152 | transform: rotate(360deg);
153 | }
154 | #tabs :nth-child(3) {
155 | margin-top: auto;
156 | }
157 | #tabs svg {
158 | font-size: 1.5em !important;
159 | }
160 | .tab {
161 | font-weight: 525;
162 | color: rgb(var(--black) / 70%) !important;
163 | }
164 | .tab:hover,
165 | .active {
166 | color: rgb(var(--black)) !important;
167 | }
168 |
169 | /* Navbar */
170 | .navbar {
171 | width: 100%;
172 | height: 75px;
173 | padding: 15px;
174 | display: flex;
175 | box-sizing: border-box;
176 | background-color: rgb(var(--white) / 50%);
177 | }
178 | .navbar div.mrl-10:last-child {
179 | margin-left: auto;
180 | }
181 | .navbar .MuiIconButton-root:active svg {
182 | animation: zoomIn 0.3s !important;
183 | }
184 |
185 | /* Base Layout */
186 | .app {
187 | display: flex;
188 | height: 100vh;
189 | margin-left: 225px;
190 | flex-direction: column;
191 | -webkit-transition: all 0.4s ease-in-out;
192 | -moz-transition: all 0.4s ease-in-out;
193 | -o-transition: all 0.4s ease-in-out;
194 | transition: all 0.4s ease-in-out;
195 | }
196 | .base {
197 | overflow: auto;
198 | height: calc(100% - 75px);
199 | }
200 | .app-ui {
201 | height: calc(100% - 95px);
202 | }
203 |
204 | /* Card */
205 | .card {
206 | width: 100%;
207 | flex-wrap: nowrap !important;
208 | border-radius: 5px !important;
209 | transition: all 0.3s !important;
210 | box-sizing: border-box !important;
211 | background-color: rgb(var(--white) / 20%) !important;
212 | box-shadow: 0px 4px 8px rgb(var(--black) / 5%) !important;
213 | }
214 | .large-card {
215 | width: 100%;
216 | height: 100%;
217 | padding: 15px;
218 | border-radius: 5px !important;
219 | flex-wrap: nowrap !important;
220 | transition: all 0.3s !important;
221 | box-sizing: border-box !important;
222 | background-color: rgb(var(--white) / 20%) !important;
223 | box-shadow: 0px 4px 8px rgb(var(--black) / 5%) !important;
224 | }
225 | .card:hover {
226 | background-color: rgb(var(--white) / 50%) !important;
227 | }
228 | .large-card:hover {
229 | background-color: rgb(var(--white) / 50%) !important;
230 | }
231 | .card img {
232 | border-top-left-radius: 5px;
233 | border-bottom-left-radius: 5px;
234 | box-shadow: 2px 0 10px rgb(var(--black) / 20%);
235 | }
236 | .card p,
237 | .large-card h3 {
238 | font-weight: 600;
239 | }
240 | .card .play-btn,
241 | .large-card .play-btn {
242 | opacity: 0;
243 | }
244 | .card:hover .play-btn,
245 | .large-card:hover .play-btn,
246 | .play-btn.pause {
247 | opacity: 1;
248 | }
249 | #recent-playlist a {
250 | color: inherit;
251 | text-decoration: none;
252 | }
253 | #recent-playlist img {
254 | width: 75px;
255 | height: auto;
256 | display: block;
257 | }
258 | #playlist a {
259 | display: block;
260 | color: inherit;
261 | text-decoration: none;
262 | }
263 | #playlist img,
264 | #playlist .MuiSkeleton-root {
265 | height: auto;
266 | display: block;
267 | max-width: 100%;
268 | border-radius: 20px;
269 | box-sizing: border-box;
270 | }
271 |
272 | /* Properties */
273 | .pb-0 {
274 | padding-bottom: 0 !important;
275 | }
276 | .no-capitalization {
277 | text-transform: none !important;
278 | }
279 | .no-underlines {
280 | text-decoration: none !important;
281 | }
282 | .MuiAlert-root {
283 | width: 50vh !important;
284 | }
285 | .no-font {
286 | font-size: 1em !important;
287 | }
288 | .font-15x {
289 | font-size: 1.5em !important;
290 | }
291 | .none {
292 | display: none !important;
293 | }
294 | .block {
295 | display: block !important;
296 | }
297 | button:disabled,
298 | input:disabled {
299 | pointer-events: none !important;
300 | }
301 | .font-black {
302 | color: rgb(var(--black)) !important;
303 | }
304 | .flex-nowrap {
305 | display: flex;
306 | flex-wrap: nowrap;
307 | }
308 | .flex {
309 | display: flex;
310 | flex-wrap: wrap;
311 | }
312 | .mrl-5 {
313 | margin: 0 5px;
314 | padding: 0;
315 | }
316 | .mrl-10 {
317 | margin: 0 10px;
318 | padding: 0;
319 | }
320 | .rounded-corner {
321 | border-radius: 5px;
322 | }
323 | .close-btn {
324 | right: 60px;
325 | float: right;
326 | }
327 | .left-align {
328 | text-align: left;
329 | }
330 | .center-align {
331 | text-align: center;
332 | }
333 | .center-vert {
334 | margin: auto 0 !important;
335 | }
336 | .center-flex {
337 | align-items: center;
338 | justify-content: center;
339 | }
340 | .align-right {
341 | margin-left: auto !important;
342 | margin-right: 0 !important;
343 | }
344 | .warning {
345 | color: red;
346 | font-weight: bold;
347 | }
348 | .w-20 {
349 | width: 20% !important;
350 | }
351 | .w-25 {
352 | width: 25% !important;
353 | }
354 | .w-30 {
355 | width: 30% !important;
356 | }
357 | .w-40 {
358 | width: 40% !important;
359 | }
360 | .w-50 {
361 | width: 50% !important;
362 | }
363 | .w-70 {
364 | width: 70% !important;
365 | }
366 | .w-80 {
367 | width: 80% !important;
368 | }
369 | .w-100 {
370 | width: 100% !important;
371 | }
372 | .alert-transparent {
373 | background-color: rgb(255 244 229 / 70%);
374 | }
375 | .p-0 {
376 | padding: 0px !important;
377 | }
378 | .p-5 {
379 | padding: 5px !important;
380 | }
381 | .p-10 {
382 | padding: 10px !important;
383 | }
384 | .p-15 {
385 | padding: 15px !important;
386 | }
387 | .m-5 {
388 | margin: 5px !important;
389 | }
390 | .m-10 {
391 | margin: 10px !important;
392 | }
393 | .mt-5 {
394 | margin-top: 5px !important;
395 | }
396 | .mb-5 {
397 | margin-bottom: 5px !important;
398 | }
399 | .mt-10 {
400 | margin-top: 10px !important;
401 | }
402 | .mt-30 {
403 | margin-top: 30px !important;
404 | }
405 | .mb-10 {
406 | margin-bottom: 10px !important;
407 | }
408 | .ml-10 {
409 | margin-left: 10px !important;
410 | }
411 | .mr-10 {
412 | margin-right: 10px !important;
413 | }
414 | .m-auto {
415 | margin: auto !important;
416 | }
417 | .m-10-auto {
418 | margin: auto 10px !important;
419 | }
420 | svg {
421 | margin: auto;
422 | display: block;
423 | }
424 | #version svg {
425 | margin: auto 0px;
426 | }
427 | #version p {
428 | font-weight: normal;
429 | }
430 | #version code p {
431 | font-size: 15px;
432 | }
433 | #version .MuiIconButton-root {
434 | padding: 10px !important;
435 | }
436 | #version a,
437 | .link {
438 | cursor: pointer;
439 | color: #3090ff;
440 | text-decoration: none;
441 | }
442 | #version a:hover,
443 | .link:hover {
444 | text-decoration: underline;
445 | }
446 | #version svg {
447 | font-size: 1.2em !important;
448 | }
449 | #version .MuiPaper-root:before {
450 | display: none !important;
451 | }
452 |
453 | .small {
454 | font-size: 12px;
455 | font-weight: normal !important;
456 | }
457 | button {
458 | border: none;
459 | cursor: pointer;
460 | background-color: transparent;
461 | }
462 | .col-3 {
463 | display: grid;
464 | grid-template-columns: 33.3% 33.3% 33.3%;
465 | }
466 | .col-4 {
467 | display: grid;
468 | grid-template-columns: 25% 25% 25% 25%;
469 | }
470 | #recent-playlist img,
471 | #footer img {
472 | display: block;
473 | width: 75px;
474 | height: 75px;
475 | }
476 |
477 | /* PlayBack Button */
478 | .play-btn {
479 | width: 18px;
480 | height: 18px;
481 | cursor: pointer;
482 | border-style: solid;
483 | box-sizing: border-box;
484 | transition: 100ms all ease;
485 | border-width: 9px 0 9px 18px;
486 | border-color: transparent transparent transparent #202020;
487 | }
488 | .play-btn.pause {
489 | border-style: double;
490 | border-width: 0px 0 0px 17px;
491 | }
492 |
493 | /* Controller */
494 | .footer {
495 | padding: 10px 15px;
496 | overflow: auto;
497 | background: rgb(var(--white) / 60%);
498 | color: rgb(var(--black));
499 | }
500 | .footer .song-title {
501 | font-size: 18px;
502 | font-weight: 450;
503 | }
504 | .author {
505 | color: rgb(var(--dark-gray));
506 | }
507 | .footer .author {
508 | font-size: 13px;
509 | }
510 | .playback-bar {
511 | width: 100%;
512 | display: flex;
513 | align-items: center;
514 | }
515 | .progress-time {
516 | font-size: 12px;
517 | min-width: 40px;
518 | }
519 | .audio {
520 | width: 100%;
521 | display: flex;
522 | padding: 10px;
523 | align-items: center;
524 | }
525 | .volume-btn {
526 | min-width: 0px !important;
527 | }
528 |
529 | /* Settings */
530 | #settings .MuiBox-root {
531 | padding: 0px !important;
532 | }
533 | #settings .active {
534 | background-color: rgb(var(--blue) / 35%);
535 | }
536 | #settings svg {
537 | font-size: 1.5em;
538 | }
539 | #settings .flex .w-50.m-10 {
540 | width: calc(50% - 60px) !important;
541 | }
542 | #settings .flex .w-50.m-10:nth-child(odd) {
543 | margin: 5px 10px 5px 50px !important;
544 | }
545 | #settings .flex .w-50.m-10:nth-child(even) {
546 | margin: 5px 50px 5px 10px !important;
547 | }
548 | #resources p {
549 | font-size: 14.5px;
550 | }
551 | .copy-btn {
552 | position: absolute !important;
553 | right: 10px;
554 | z-index: 100;
555 | }
556 | .MuiTab-root {
557 | min-height: 55px;
558 | display: grid;
559 | grid-template-columns: 20% 80%;
560 | gap: 10px;
561 | }
562 | /* Download */
563 | #download .large-card svg {
564 | display: block;
565 | margin: 10px auto;
566 | transition: 0.3s all;
567 | color: rgb(var(--black) / 70%);
568 | }
569 | #download .large-card:hover svg {
570 | color: rgb(var(--black));
571 | }
572 |
573 | /* Search */
574 | .search {
575 | width: 50%;
576 | }
577 |
578 | /* Scroll Bar */
579 | ::-webkit-scrollbar {
580 | width: 15px;
581 | background: transparent;
582 | }
583 | ::-webkit-scrollbar-thumb {
584 | background: rgb(var(--black) / 75%);
585 | border-radius: 7px;
586 | /* border-radius: calc(15px / 2); */
587 | background-clip: content-box;
588 | border: 4px solid transparent;
589 | }
590 | ::-webkit-scrollbar-thumb:hover {
591 | background: rgb(var(--black));
592 | background-clip: content-box;
593 | }
594 |
595 | @keyframes zoomIn {
596 | 50% {
597 | transform: scale(1.15);
598 | }
599 | 100% {
600 | transform: scale(1);
601 | }
602 | }
603 |
604 | @media only screen and (max-width: 1200px) {
605 | .col-3 {
606 | grid-template-columns: 50% 50%;
607 | }
608 | #version .w-50 {
609 | width: 70% !important;
610 | }
611 | .w-50.audio {
612 | width: 70% !important;
613 | }
614 | .col-4 {
615 | grid-template-columns: 33.3% 33.3% 33.3%;
616 | }
617 | .search {
618 | width: 60%;
619 | }
620 | .MuiTab-root {
621 | grid-template-columns: auto;
622 | gap: 10px;
623 | }
624 | }
625 | @media only screen and (max-width: 800px) {
626 | .col-3 {
627 | grid-template-columns: 100%;
628 | }
629 | .col-4 {
630 | grid-template-columns: 50% 50%;
631 | }
632 | #version .w-50 {
633 | width: 90% !important;
634 | }
635 | .w-50.audio {
636 | width: 100% !important;
637 | }
638 | #settings .flex .w-50.m-10 {
639 | width: 100% !important;
640 | }
641 | #settings .flex .w-50.m-10:nth-child(odd),
642 | #settings .flex .w-50.m-10:nth-child(even) {
643 | margin: 5px 10px !important;
644 | }
645 | .search {
646 | width: 100%;
647 | }
648 | }
649 | @media only screen and (max-width: 600px) {
650 | .search {
651 | width: 100%;
652 | }
653 | .navbar div.mrl-10:last-child {
654 | display: none;
655 | visibility: hidden;
656 | }
657 | .col-4 {
658 | grid-template-columns: 100%;
659 | }
660 | #version .w-50 {
661 | width: 100% !important;
662 | }
663 | .MuiAlert-root {
664 | width: 100% !important;
665 | }
666 | #tabs {
667 | .MuiButtonBase-root {
668 | min-width: auto;
669 | justify-content: left;
670 | }
671 | .w-30 {
672 | width: 10% !important;
673 | }
674 | }
675 | .sidebar-text {
676 | display: none;
677 | visibility: hidden;
678 | }
679 | .sidebar {
680 | width: 60px;
681 | }
682 | .app {
683 | margin-left: 60px;
684 | }
685 | }
686 |
--------------------------------------------------------------------------------
/src/lib/icons.component.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | export function HomeSolid() {
3 | return (
4 |
12 | );
13 | }
14 | export function HomeOutline() {
15 | return (
16 |
24 | );
25 | }
26 | export function SearchSolid() {
27 | return (
28 |
34 | );
35 | }
36 | export function SearchOutline() {
37 | return (
38 |
44 | );
45 | }
46 | export function PreferencesOutline() {
47 | return (
48 |
56 | );
57 | }
58 | export function PreferencesSolid() {
59 | return (
60 |
72 | );
73 | }
74 | export function AboutOutline() {
75 | return (
76 |
82 | );
83 | }
84 | export function AboutSolid() {
85 | return (
86 |
92 | );
93 | }
94 | export function SettingsSolid() {
95 | return (
96 |
104 | );
105 | }
106 | export function SettingsOutline() {
107 | return (
108 |
120 | );
121 | }
122 | export function ExperimentalOutline() {
123 | return (
124 |
130 | );
131 | }
132 | export function ExperimentalSolid() {
133 | return (
134 |
140 | );
141 | }
142 | export function ChevronLeft() {
143 | return (
144 |
150 | );
151 | }
152 | export function ChevronRight() {
153 | return (
154 |
160 | );
161 | }
162 | export function SkipNext() {
163 | return (
164 |
176 | );
177 | }
178 | export function SkipPrevious() {
179 | return (
180 |
192 | );
193 | }
194 | export function Audio() {
195 | return (
196 |
204 | );
205 | }
206 | export function MutedAudio() {
207 | return (
208 |
216 | );
217 | }
218 | export function Close() {
219 | return (
220 |
226 | );
227 | }
228 | export function GitHub() {
229 | return (
230 |
236 | );
237 | }
238 | export function PrivacyPolicy() {
239 | return (
240 |
250 | );
251 | }
252 | export function Expand() {
253 | return (
254 |
260 | );
261 | }
262 | export function License() {
263 | return (
264 |
272 | );
273 | }
274 | export function Themes() {
275 | return (
276 |
283 | );
284 | }
285 | export function CopyToClipboard() {
286 | return (
287 |
295 | );
296 | }
297 | export function Checkmark() {
298 | return (
299 |
307 | );
308 | }
309 | export function Warning() {
310 | return (
311 |
319 | );
320 | }
321 | export function ThemesApp() {
322 | return (
323 |
329 | );
330 | }
331 | export function Play() {
332 | return (
333 |
339 | );
340 | }
341 | export function Pause() {
342 | return (
343 |
349 | );
350 | }
351 | export function Changelog() {
352 | return (
353 |
361 | );
362 | }
363 | export function Download() {
364 | return (
365 |
371 | );
372 | }
373 | export function Windows() {
374 | return (
375 |
383 | );
384 | }
385 | export function MacOS() {
386 | return (
387 |
394 | );
395 | }
396 | export function Linux() {
397 | return (
398 |
404 | );
405 | }
406 |
407 | export function SaveLocation() {
408 | return (
409 |
415 | );
416 | }
417 | export function AutoPlay() {
418 | return (
419 |
425 | );
426 | }
427 | export function Resources() {
428 | return (
429 |
437 | );
438 | }
439 | export function Feedback() {
440 | return (
441 |
449 | );
450 | }
451 | export function Contributors() {
452 | return (
453 |
481 | );
482 | }
483 | export function ExternalLink() {
484 | return (
485 |
497 | );
498 | }
499 |
500 | export function CheckUpdate() {
501 | return (
502 |
513 | );
514 | }
515 |
--------------------------------------------------------------------------------
45 |
63 |
83 |
84 | {window.__TAURI_METADATA__ ? (
85 |
94 | {
106 | setIsFetching(true);
107 | updateAppToLatestVersion('button').then(
108 | (res: boolean) => {
109 | setIsUpToDate(res);
110 | setIsFetching(false);
111 | }
112 | );
113 | }}
114 | >
115 |
117 |
118 | ) : null}
119 |
120 |
121 |
46 |
52 |
48 |
51 | Loofi
49 |Version: {packageInfo.version}
50 |
124 |
127 |
128 | Helpful Resources
126 |
129 |
163 |
130 |
139 |
140 |
141 |
150 |
151 |
152 |
161 |
162 |
168 |
171 |
172 | Privacy Policy
170 |
173 |
189 | 174 | Personal Information Collection 175 |
176 |177 | Loofi does not collect, store, share or publish any 178 | personal information. 179 |
180 |181 | Non-Personal Information Collection 182 |
183 |184 | Loofi collects and stores data which are useful for 185 | logging, bugs, and fix crashes. All information sent is 186 | anonymous and free of any user or contextual data. 187 |
188 |
194 |
197 |
198 | License
196 |
199 |
292 | 200 | Loofi is an open source project published under the MIT 201 | License. You can view the source code and contribute to 202 | this project on{' '} 203 | 208 | GitHub 209 | 210 | . 211 |
212 |
213 |
214 | Copyright (c) 2023 Loofi
215 |
216 |
217 | Permission is hereby granted, free of charge, to any
218 | person obtaining a copy of this software and
219 | associated documentation files (the
220 | "Software"), to deal in the Software
221 | without restriction, including without limitation
222 | the rights to use, copy, modify, merge, publish,
223 | distribute, sublicense, and/or sell copies of the
224 | Software, and to permit persons to whom the Software
225 | is furnished to do so, subject to the following
226 | conditions:
227 |
228 |
229 | The above copyright notice and this permission
230 | notice shall be included in all copies or
231 | substantial portions of the Software.
232 |
233 |
234 | THE SOFTWARE IS PROVIDED "AS IS" WITHOUT
235 | WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
236 | BUT NOT LIMITED TO THE WARRANTIES OF
237 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE
238 | AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
239 | OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
240 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
241 | CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
242 | IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
243 | DEALINGS IN THE SOFTWARE.
244 |
245 |
246 | Third party library:
247 |248 | 253 | @mui-org/material-ui 254 | 255 |
256 |
257 | MIT License
258 |
259 | Copyright (c) 2014 Call-Em-All
260 |
261 |
262 | Permission is hereby granted, free of charge, to any
263 | person obtaining a copy of this software and
264 | associated documentation files (the
265 | "Software"), to deal in the Software
266 | without restriction, including without limitation
267 | the rights to use, copy, modify, merge, publish,
268 | distribute, sublicense, and/or sell copies of the
269 | Software, and to permit persons to whom the Software
270 | is furnished to do so, subject to the following
271 | conditions:
272 |
273 |
274 | The above copyright notice and this permission
275 | notice shall be included in all copies or
276 | substantial portions of the Software.
277 |
278 |
279 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT
280 | WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
281 | BUT NOT LIMITED TO THE WARRANTIES OF
282 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE
283 | AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
284 | OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
285 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
286 | CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
287 | IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
288 | DEALINGS IN THE SOFTWARE.
289 |
290 |
291 |