mirror of
https://github.com/Viren070/MediaFusion.git
synced 2025-12-01 23:21:11 +01:00
mhdzumair
307 lines
20 KiB
HTML
307 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Configuration - Stremio Addon</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="/static/css/styles.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-10 col-md-11 col-lg-11 config-container">
|
|
<img class="logo" src="/static/images/mediafusion_logo.png" alt="MediaFusion Logo">
|
|
<h3 class="text-center mb-4">MediaFusion Addon Configuration</h3>
|
|
|
|
<!-- Configuration Form -->
|
|
<form id="configForm" class="mx-5 mx-lg-1 mx-md-3 mx-sm-4">
|
|
<!-- Streaming Provider -->
|
|
<div class="section-container">
|
|
<h4 class="section-header">Streaming Provider Configuration</h4>
|
|
<hr class="section-divider">
|
|
|
|
<label for="provider_service">Streaming Provider: <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Choose a streaming provider to integrate with the addon. Each has unique features and capabilities."></span></label>
|
|
<select class="form-control" name="provider_service" id="provider_service" onchange="updateProviderFields(true)">
|
|
<option value="" {% if not user_data.streaming_provider.service %}selected{% endif %}>Direct Torrent (Free)</option>
|
|
<option value="pikpak" {% if user_data.streaming_provider.service=='pikpak' %}selected{% endif %}>PikPak (Free Quota)</option>
|
|
<option value="seedr" {% if user_data.streaming_provider.service=='seedr' %}selected{% endif %}>Seedr.cc (Free Quota)</option>
|
|
<option value="offcloud" {% if user_data.streaming_provider.service=='offcloud' %}selected{% endif %}>OffCloud (Free Quota)</option>
|
|
<option value="torbox" {% if user_data.streaming_provider.service=='torbox' %}selected{% endif %}>Torbox (Free Quota)</option>
|
|
<option value="realdebrid" {% if user_data.streaming_provider.service=='realdebrid' %}selected{% endif %}>Real-Debrid (Premium)</option>
|
|
<option value="debridlink" {% if user_data.streaming_provider.service=='debridlink' %}selected{% endif %}>Debrid-Link (Premium)</option>
|
|
<option value="premiumize" {% if user_data.streaming_provider.service=='premiumize' %}selected{% endif %}>Premiumize (Premium)</option>
|
|
<option value="alldebrid" {% if user_data.streaming_provider.service=='alldebrid' %}selected{% endif %}>AllDebrid - Local Only - (Premium)</option>
|
|
</select>
|
|
|
|
<!-- Affiliate Signup Links -->
|
|
<div id="signup_section" style="display:none" class="mb-4">
|
|
<h6>Don't have an account?</h6>
|
|
<a id="signup_link" href="#" class="btn btn-primary" target="_blank">Create Account</a>
|
|
</div>
|
|
|
|
<!-- Credentials Input -->
|
|
<div id="credentials" style="display:none">
|
|
<h6>Enter Credentials</h6>
|
|
<div class="mb-3">
|
|
<label for="username">Username:</label>
|
|
<input class="form-control" type="text" id="username" name="username" placeholder="Enter Username" aria-label="Username"
|
|
value="{{ user_data.streaming_provider.username if user_data.streaming_provider.username else '' }}">
|
|
<div class="invalid-feedback">
|
|
Username is required.
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="password">Password:</label>
|
|
<div class="input-group">
|
|
<input class="form-control" type="password" id="password" name="password" placeholder="Enter Password">
|
|
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
|
|
<span id="togglePasswordIcon" class="bi bi-eye"></span>
|
|
</button>
|
|
<div class="invalid-feedback">
|
|
Password is required.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OAuth Section -->
|
|
<div id="oauth_section" class="mb-3" style="display:none">
|
|
<h6>Authorize Addon (Recommended) <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Authorize the addon to access your streaming provider account. This is recommended instead using your private token."></span>
|
|
</h6>
|
|
<button type="button" id="oauth_btn" class="btn">Authorize</button>
|
|
<div id="device_code_section" class="mt-2" style="display:none;">
|
|
To complete the authorization, follow these steps:
|
|
<ol>
|
|
<li>Visit the authorization link: <a id="verification_link" href="#" target="_blank">#</a></li>
|
|
<li>Enter the device code provided below into the authorization page.</li>
|
|
</ol>
|
|
Your device code: <strong><span id="device_code_display"></span></strong>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Token for Providers -->
|
|
<div id="token_input" class="mb-3" style="display:none">
|
|
<label for="provider_token" class="mb-3">Token: <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Enter Encoded Token previously generated or Click 'Authorize' to generate a new token or Provide your Private Token."></span></label>
|
|
<input class="form-control" type="text" name="provider_token" id="provider_token" placeholder="Enter Token"
|
|
value="{{ user_data.streaming_provider.token if user_data.streaming_provider.token else '' }}">
|
|
<div class="invalid-feedback">
|
|
Token is required.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Catalog Configuration -->
|
|
<div class="section-container">
|
|
<h4 class="section-header">Catalog Configuration</h4>
|
|
<hr class="section-divider">
|
|
|
|
<div class="mb-3">
|
|
<h6>Select & Arrange Catalogs: <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Select and arrange the catalogs that you want to display in Stremio."></span></h6>
|
|
<div id="catalogs" class="row">
|
|
{% for catalog in catalogs %}
|
|
<div class="col-12 col-md-6 col-lg-4 draggable-catalog" data-id="{{ catalog[0] }}">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="selected_catalogs" value="{{ catalog[0] }}" id="{{ catalog[0] }}" {% if catalog[0] in
|
|
user_data.selected_catalogs
|
|
%}checked{% endif %}>
|
|
<label class="form-check-label" for="{{ catalog[0] }}">
|
|
<span class="label-text">{{ catalog[1] }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enable Provider Watchlist -->
|
|
<div id="watchlist_section" style="display:none" class="mb-3">
|
|
<h6>Provider Watchlist Catalog:</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="enable_watchlist"
|
|
id="enable_watchlist" {% if user_data.streaming_provider and user_data.streaming_provider.enable_watchlist_catalogs %}checked{% endif %}>
|
|
<label class="form-check-label" for="enable_watchlist" id="watchlist_label">
|
|
Enable Watchlist
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enable Catalogs Checkbox -->
|
|
<div class="mb-3">
|
|
<h6>Enable Catalogs:</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="enable_catalogs"
|
|
id="enable_catalogs" {% if user_data.enable_catalogs %}checked{% endif %}>
|
|
<label class="form-check-label" for="enable_catalogs">
|
|
Show Catalogs in Stremio <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Toggle to add or hide catalogs in Stremio. This is perfect for when you want to install multiple addons without creating duplicate catalog content and only want to display streams."></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Streaming Filter Configuration -->
|
|
<div class="section-container">
|
|
<h4 class="section-header">Streaming Preferences <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Customize how streams are sorted, limit results, and choose torrent display options to tailor your streaming experience in Stremio."></span>
|
|
</h4>
|
|
<hr class="section-divider">
|
|
|
|
<!-- Select Streaming Resolutions -->
|
|
<div class="mb-3">
|
|
<h6>Select Streaming Resolutions: <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Select the streaming resolutions that you prefer. The addon will filter these when fetching streams."></span></h6>
|
|
<div class="row">
|
|
{% for resolution in resolutions %}
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="selected_resolutions"
|
|
value="{{ resolution if resolution else '' }}"
|
|
id="resolution_{{ resolution if resolution else 'unknown' }}"
|
|
{% if resolution in user_data.selected_resolutions %}checked{% endif %}>
|
|
<label class="form-check-label" for="resolution_{{ resolution if resolution else 'unknown' }}">
|
|
{{ resolution if resolution else 'Unknown' }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Size Range Filter -->
|
|
<div class="mb-3">
|
|
<h6>Set File Size Filter: <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Select the file size range for the streams. Slide to the end for no limit."></span></h6>
|
|
<!-- Slider for the file size -->
|
|
<input type="range" class="form-range" id="max_size_slider" name="size_slider" min="0" max="21000000000"
|
|
value="{{ user_data.max_size if user_data.max_size < 21000000000 else 21000000000 }}" step="1000000">
|
|
<label for="max_size_slider">Max File Size:</label>
|
|
<span id="max_size_output">Unlimited</span>
|
|
</div>
|
|
|
|
|
|
<!-- Stream Sorting Priority -->
|
|
<div class="mb-3">
|
|
<h6>Select & Arrange Sorting Priority: <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Select and arrange the sorting options that you want to display in Stremio."></span></h6>
|
|
|
|
<div id="streamSortOrder" class="row">
|
|
{% for sorting_option in sorting_options %}
|
|
<div class="col-12 col-md-6 col-lg-4 sortable-list" data-id="{{ sorting_option }}">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="selected_sorting_options"
|
|
value="{{ sorting_option }}"
|
|
id="sorting_{{ sorting_option }}"
|
|
{% if sorting_option in user_data.torrent_sorting_priority %}checked{% endif %}>
|
|
<label class="form-check-label" for="sorting_{{ sorting_option }}">
|
|
{{ sorting_option.replace('_', ' ').title() }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Maximum Streams Result per Resolution Configuration -->
|
|
<div class="mb-3">
|
|
<label for="maxStreamsPerResolution">Max Streams Per Resolution: <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Enter the maximum number of streams per resolution to display in Stremio."></span></label>
|
|
<input type="number" class="form-control" id="maxStreamsPerResolution" name="maxStreamsPerResolution" min="1" placeholder="Enter maximum streams per resolution"
|
|
value="{{ user_data.max_streams_per_resolution }}">
|
|
<div class="invalid-feedback">
|
|
Please enter a valid number.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Torrent Information Display Configuration -->
|
|
<div class="mb-3">
|
|
<h6>Torrent Stream Display option: <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Choose how you want to display the torrent information in Stremio."></span></h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="torrentDisplayOption" id="showParsedTorrentData" value="parsedData" {% if not user_data.show_full_torrent_name
|
|
%}checked{% endif %}>
|
|
<label class="form-check-label" for="showParsedTorrentData">
|
|
Show Parsed Data (Quality, Resolution, Codec, Audio.)
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" name="torrentDisplayOption" id="showTorrentName" value="fullName" {% if user_data.show_full_torrent_name %}checked{% endif %}>
|
|
<label class="form-check-label" for="showTorrentName">
|
|
Show Torrent Full Name
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% if authentication_required %}
|
|
<!-- API Password Configuration -->
|
|
<div class="section-container">
|
|
<h4 class="section-header">API Security Configuration</h4>
|
|
<hr class="section-divider">
|
|
|
|
<!-- API Password Input -->
|
|
<div class="mb-3">
|
|
<label for="api_password">API Password: <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="Enter the API password you configured in the environment variables."></span></label>
|
|
<div class="input-group">
|
|
<input class="form-control" type="password" id="api_password" name="api_password" placeholder="Enter API Password">
|
|
<button class="btn btn-outline-secondary" type="button" id="toggleApiPassword">
|
|
<span id="toggleApiPasswordIcon" class="bi bi-eye"></span>
|
|
</button>
|
|
<div class="invalid-feedback">
|
|
API Password is required.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<!-- Fallback URL Display - Initially hidden -->
|
|
<div id="fallbackUrlContainer" class="fallback-url-container" style="display: none;">
|
|
<label for="fallbackUrl">Installation URL <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
title="This is the URL that you can use to install the addon in Stremio."></span></label>
|
|
<textarea id="fallbackUrl" class="form-control" readonly></textarea>
|
|
<p>Please manually copy the URL above and paste it in the Stremio search bar. Do not share this URL with unknown persons.</p>
|
|
</div>
|
|
|
|
|
|
<!-- Submit and Share Buttons -->
|
|
<div class="button-container">
|
|
<button type="submit" class="btn btn-primary btn-block custom-btn">Install Addon</button>
|
|
<!-- Conditional display of buttons based on Web Share API support -->
|
|
<button type="button" id="shareBtn" style="display: none;" class="btn btn-primary btn-block custom-btn">Share Installation URL</button>
|
|
<button type="button" id="copyBtn" style="display: none;" class="btn btn-primary btn-block custom-btn">Copy Installation URL</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JS for Bootstrap and form validation -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
|
|
<script src="/static/js/config_script.js"></script>
|
|
</body>
|
|
|
|
</html>
|
|
|