Skip to content

Commit

Permalink
feat: add InstallWindow component for addon installation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Viren070
Viren070 committed Feb 10, 2025
1 parent 7486914 commit b93ce14
Show file tree
Hide file tree
Showing 3 changed files with 198 additions and 188 deletions.
196 changes: 8 additions & 188 deletions packages/frontend/src/app/configure/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import Slider from '@/components/Slider';
import CredentialInput from '@/components/CredentialInput';
import CreateableSelect from '@/components/CreateableSelect';
import MultiSelect from '@/components/MutliSelect';
import InstallWindow from '@/components/InstallWindow';

const version = addonPackage.version;

Expand Down Expand Up @@ -199,9 +200,6 @@ export default function Configure() {
string[] | null
>(null);
const [disableButtons, setDisableButtons] = useState<boolean>(false);
const [manualManifestUrl, setManualManifestUrl] = useState<string | null>(
null
);
const [maxMovieSizeSlider, setMaxMovieSizeSlider] = useState<number>(
Settings.MAX_MOVIE_SIZE
);
Expand All @@ -211,6 +209,7 @@ export default function Configure() {
const [choosableAddons, setChoosableAddons] = useState<string[]>(
addonDetails.map((addon) => addon.id)
);
const [manifestUrl, setManifestUrl] = useState<string | null>(null);

useEffect(() => {
// get config from the server
Expand Down Expand Up @@ -1335,26 +1334,13 @@ export default function Configure() {
setDisableButtons(false);
return;
}
// replace https?:// with stremio://
const installUrl = manifest.replace(
/https?:\/\//,
'stremio://'
);
toast.update(id, {
render: 'Manifest URL generated',
type: 'success',
autoClose: 5000,
isLoading: false,
});
try {
const response = window.open(installUrl, '_blank');
if (!response) {
throw new Error('Failed to open window');
}
} catch (error) {
console.error('Failed to open manifest URL', error);
setManualManifestUrl(installUrl);
}
setManifestUrl(manifest);
setDisableButtons(false);
})
.catch(() => {
Expand All @@ -1369,178 +1355,12 @@ export default function Configure() {
});
}}
>
Install
</button>
<button
className={styles.installButton}
disabled={disableButtons}
onClick={() => {
setDisableButtons(true);
const id = toast.loading('Generating manifest URL...', {
...toastOptions,
toastId: 'generatingManifestUrl',
});
getManifestUrl()
.then((value) => {
const { success, manifest, message } = value;
if (!success || !manifest) {
toast.update(id, {
render: message || 'Failed to generate manifest URL',
type: 'error',
autoClose: 5000,
isLoading: false,
});
setDisableButtons(false);
return;
}
// replace https?:// with stremio://
const installUrl = `https://web.stremio.com/#/addons?addon=${encodeURIComponent(manifest)}`;
toast.update(id, {
render: 'Add-on URL generated, opening Stremio Web...',
type: 'info',
isLoading: true,
});
try {
const response = window.open(installUrl, '_blank');
if (!response) {
throw new Error('Failed to open window');
}
toast.update(id, {
render: 'Opened Stremio Web',
type: 'success',
autoClose: 5000,
isLoading: false,
});
} catch (error) {
console.error('Failed to open manifest URL', error);
toast.update(id, {
render: 'Failed to open Stremio Web',
type: 'error',
autoClose: 5000,
isLoading: false,
});
setManualManifestUrl(installUrl);
}
setDisableButtons(false);
})
.catch((error: any) => {
setDisableButtons(false);
console.error('Failed to generate manifest URL', error);
toast.update(id, {
render:
'An unknown error occurred while attempting to install to Stremio Web',
type: 'error',
autoClose: 5000,
isLoading: false,
});
});
}}
>
Install to Stremio Web
</button>
<button
className={styles.installButton}
disabled={disableButtons}
onClick={() => {
setDisableButtons(true);
const id = toast.loading('Generating manifest URL...', {
...toastOptions,
toastId: 'generatingManifestUrl',
});
getManifestUrl()
.then((value) => {
const { success, manifest, message } = value;
if (!success || !manifest) {
toast.update(id, {
render: message || 'Failed to generate manifest URL',
type: 'error',
autoClose: 5000,
isLoading: false,
});
setDisableButtons(false);
return;
}

toast.update(id, {
render: 'Manifest URL generated',
type: 'success',
autoClose: 5000,
isLoading: false,
});
if (!navigator.clipboard) {
toast.update(id, {
render:
'The clipboard API is unavailable. Please copy the manifest URL manually from the bottom of the page',
type: 'warning',
autoClose: 5000,
isLoading: false,
});
setManualManifestUrl(manifest);
setDisableButtons(false);
return;
}
navigator.clipboard
.writeText(manifest)
.then(() => {
toast.update(id, {
render: 'Manifest URL copied to clipboard',
type: 'success',
autoClose: 5000,
isLoading: false,
});
setDisableButtons(false);
})
.catch((error: any) => {
console.error('Failed to copy manifest URL', error);
toast.update(id, {
render:
'An unexpected error occurred while copying the manifest URL',
type: 'error',
autoClose: 5000,
isLoading: false,
});
setManualManifestUrl(manifest);
setDisableButtons(false);
});
})
.catch(() => {
toast.update(id, {
render:
'An unexpected error occurred while generating the manifest URL',
type: 'error',
autoClose: 5000,
isLoading: false,
});

setDisableButtons(false);
});
}}
>
Copy Link
Generate Manifest URL
</button>
{manualManifestUrl && (
<>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<p style={{ padding: '5px' }}>
If the above buttons do not work, you can use the following
manifest URL to install the addon.
</p>
<input
id="manualManifestUrl"
type="text"
value={manualManifestUrl}
readOnly
style={{ width: '100%', padding: '5px', margin: '5px' }}
/>
</div>
</>
)}
<InstallWindow
manifestUrl={manifestUrl}
setManifestUrl={setManifestUrl}
/>
</div>
</div>
<ToastContainer
Expand Down
72 changes: 72 additions & 0 deletions packages/frontend/src/components/InstallWindow.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(0, 0, 0);
padding: 20px;
box-shadow: 0 0 10px rgba(252, 252, 252, 0.534);
z-index: 1000;
opacity: 1;
border-radius: var(--borderRadius);
transition: opacity 0.3s ease-in-out;
width: 50%;
max-width: 500px;
}

@media screen and (max-width: 600px) {
.popup {
width: 90%;
}
}

.popup.hidden {
opacity: 0;
pointer-events: none;
}

.installButtons {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}

.installButton {
background-color: #ffffff; /* Green */
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: var(--borderRadius);
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.111);
transition:
transform 0.2s,
box-shadow 0.2s,
opacity 0.2s,
background-color 0.2s;
}

@media (pointer: fine) {
.installButton:hover {
transform: scale(1.02);
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.225);
}
}

.installButton:active {
transform: scale(0.98);
}

.installButton:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
background-color: #ddddddbe;
}
Loading

0 comments on commit b93ce14

Please sign in to comment.