├── .gitignore
├── @config
    ├── app.css
    ├── app.js
    └── index.htm
└── readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | *.code-workspace
2 | *.open-terminal.app


--------------------------------------------------------------------------------
/@config/app.css:
--------------------------------------------------------------------------------
  1 | /* BOOTSTRAP OVERRIDES */
  2 | 
  3 | [data-bs-theme=dark] {
  4 |   --bs-link-color: #198754;
  5 |   --bs-link-hover-color: #146c43;
  6 | }
  7 | 
  8 | [data-bs-theme=dark] .nav-tabs {
  9 |   --bs-nav-tabs-link-active-bg: #198754;
 10 |   /* --bs-nav-tabs-link-active-color: #198754; */
 11 | }
 12 | 
 13 | [data-bs-theme=dark] .nav {
 14 |   --bs-nav-link-color: #fff;
 15 |   --bs-nav-link-hover-color: #999;
 16 | }
 17 | 
 18 | [data-bs-theme=dark] .nav-pills {
 19 |   --bs-nav-pills-link-active-bg: #198754;
 20 | }
 21 | 
 22 | [data-bs-theme=dark] .nav-pills .nav-link:not(.active) {
 23 |   background-color: #1b1f22;
 24 | }
 25 | 
 26 | body {
 27 |   padding-left: calc(env(safe-area-inset-left) - 10px) !important;
 28 |   padding-right: calc(env(safe-area-inset-right) - 10px) !important;
 29 | }
 30 | 
 31 | a {
 32 |   text-decoration: underline;
 33 | }
 34 | 
 35 | a,
 36 | a:hover {
 37 |   color: inherit;
 38 | }
 39 | 
 40 | .accordion {
 41 |   --bs-accordion-active-color: #fff;
 42 |   --bs-accordion-active-bg: #198754;
 43 |   --bs-accordion-btn-color: #fff;
 44 |   --bs-accordion-btn-bg: #1b1f22;
 45 |   --bs-accordion-body-padding-y: 2rem;
 46 | }
 47 | 
 48 | .nav-pills > .nav-item {
 49 |   margin-right: 10px;
 50 |   margin-bottom: 10px;
 51 | }
 52 | 
 53 | .form-control {
 54 |   background-color: #1b1f22;
 55 | }
 56 | 
 57 | .form-control::placeholder {
 58 |   opacity: .33333;
 59 | }
 60 | 
 61 | .container,
 62 | .container-fluid {
 63 |   transition: padding 300ms ease;
 64 | }
 65 | 
 66 | @media (min-width: 576px) {
 67 |   .container,
 68 |   .container-fluid {
 69 |     padding-right: 30px;
 70 |     padding-left: 30px;
 71 |   }
 72 | }
 73 | 
 74 | @media (max-width: 575px) {
 75 |   .row {
 76 |     margin-right: -7.5px;
 77 |     margin-left: -7.5px;
 78 |   }
 79 | 
 80 |   .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
 81 |     padding-left: 7.5px;
 82 |     padding-right: 7.5px;
 83 |   }
 84 | }
 85 | 
 86 | .img-fluid {
 87 |   width: 100%;
 88 | }
 89 | 
 90 | .page-link {
 91 |   text-decoration: none;
 92 | }
 93 | 
 94 | /* THIRD-PARTY OVERRIDES */
 95 | 
 96 | [v-cloak] {
 97 |   display: none;
 98 | }
 99 | 
100 | .fa-inline {
101 |   text-decoration: inherit;
102 | }
103 | 
104 | /* CUSTOM COMPONENTS */
105 | 
106 | .c-html,
107 | .c-body {
108 |   width: 100%;
109 | }
110 | 
111 | .c-body {
112 |   padding-top: 30px;
113 |   padding-bottom: 30px;
114 |   padding-left: 0;
115 |   padding-right: 0;
116 | }
117 | 
118 | @media (min-width: 576px) {
119 |   .c-body {
120 |     padding-top: 60px;
121 |     padding-bottom: 60px;
122 |   }
123 | }
124 | 
125 | .c-tab-pane .form-label {
126 |   font-weight: bold;
127 | }
128 | 
129 | .c-tab-pane [class*="pb-"] > :last-child,
130 | .c-tab-pane .accordion-body > :last-child {
131 |   margin-bottom: 0!important;
132 | }
133 | 
134 | .c-list-inline {
135 |   display: inline-block;
136 |   padding: 0;
137 |   margin: 0;
138 | }
139 | 
140 | .c-list-inline li {
141 |   display: inline;
142 | }
143 | 
144 | .c-list-inline li + li:before {
145 |   content: ", ";
146 | }
147 | 
148 | .c-package-link {
149 |   user-select: text;
150 | }
151 | 
152 | .c-donate-links .c-list-inline li + li:before {
153 |   content: " | ";
154 | }
155 | 
156 | .c-buymeacoffee {
157 |   color: #000;
158 |   background-color: #FFDD00;
159 | }
160 | 
161 | .c-venmo {
162 |   background-color: #3D95CE;
163 | }
164 | 
165 | .c-paypal {
166 |   background-color: #003087;
167 | }
168 | 


--------------------------------------------------------------------------------
/@config/app.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 | 
  3 | const urlParams = new URLSearchParams(window.location.search);
  4 | const App = Vue.createApp({
  5 |   data() {
  6 |     return {
  7 |       express: {
  8 |         packages: {
  9 |           'OpenScrapers': 'https://raw.githubusercontent.com/SynclerScrapers/OpenScrapers/main/express/openscraper.json',
 10 |           'Orion - Wako': 'https://wako.orionoid.com/ABCDEFGHIJKLMNOPQRSTUVWXYZ123456',
 11 |           'Squizzle - Fast': 'https://raw.githubusercontent.com/providers4syncler/providers/main/fast',
 12 |           'Squizzle - Ultimate': 'https://raw.githubusercontent.com/providers4syncler/providers/main/squizzle',
 13 |           'Syncler.ml - Providers': 'https://pastebin.com/raw/Rue82khh?source=http://go.syncler.ml/express',
 14 |           'Aki07 - Unified': 'https://pastebin.com/raw/jgCnPnwR?source=https://raw.githubusercontent.com/itzAki07/scraper/main/scraper.json',
 15 |         },
 16 |         providers: {},
 17 |         blacklist: (urlParams.get('blacklist') || '').split(',').filter(Boolean)
 18 |       },
 19 |       orion: {
 20 |         apiKey: urlParams.get('orion-api-key') || '',
 21 |         commonProviders: urlParams.get('common-providers') || 'on'
 22 |       },
 23 |       jackett: {
 24 |         baseUrl: urlParams.get('jackett-base-url') || '',
 25 |         apiKey: urlParams.get('jackett-api-key') || ''
 26 |       },
 27 |       kosmos: {
 28 |         packages: {
 29 |           /*
 30 |           'WeeklyProblem - Bouncy': 'https://raw.githubusercontent.com/WeeklyProblem/Bouncy/main/bouncy.min.js'
 31 |           */
 32 |         }
 33 |       },
 34 |       justwatch: {
 35 |         mode: 'default',
 36 |         providers: {
 37 |           'netflix': 'Netflix',
 38 |           'hulu': 'Hulu',
 39 |           'amazon-prime-video': 'Amazon Prime Video',
 40 |           'disney': 'Disney',
 41 |           'hbo-max': 'HBO Max',
 42 |           'showtime-anytime': 'Showtime Anytime',
 43 |           'fxnow': 'FX Now',
 44 |           'crackle': 'Crackle',
 45 |           'tubi': 'Tubi',
 46 |           'vudu': 'Vudu',
 47 |           'google-tv': 'Google TV',
 48 |           'youtube': 'YouTube',
 49 |         },
 50 |         blacklist: [],
 51 |         whitelist: []
 52 |       }
 53 |     }
 54 |   },
 55 |   computed: {
 56 |     server() {
 57 |       const version = urlParams.get('v') == 1 ? 1 : 2;
 58 |       return {
 59 |         version: version,
 60 |         url: version == 2 ? 'https://jakedup.com/syncler' : 'https://syncler-providers.herokuapp.com/syncler'
 61 |       };
 62 |     },
 63 |     expressParams() {
 64 |       const params = {};
 65 |       if (this.orion.apiKey) {
 66 |         params['orion-api-key'] = this.orion.apiKey;
 67 |       }
 68 |       if (this.orion.commonProviders === 'off') {
 69 |         if (this.server.version == 2) {
 70 |           params['common-providers'] = 'off';
 71 |         } else {
 72 |           params['exclude-orion'] = true;
 73 |         }
 74 |       }
 75 |       if (this.jackett.baseUrl && this.jackett.apiKey) {
 76 |         params['jackett-base-url'] = this.jackett.baseUrl.replace(/[\/\s]+$/, '');
 77 |         params['jackett-api-key'] = this.jackett.apiKey;
 78 |       }
 79 |       if (this.express.blacklist.length) {
 80 |         params['blacklist'] = this.express.blacklist.join(',');
 81 |       }
 82 |       return params;
 83 |     },
 84 |     vendorUrl() {
 85 |       return `${this.server.url}/${this.server.version == 2 ? 'vendor' : 'vendor-hybrid.json'}${this.paramsToQuery(this.expressParams)}`;
 86 |     },
 87 |     expressUrl() {
 88 |       return `${this.server.url}/${this.server.version == 2 ? 'express' : 'express-hybrid.json'}${this.paramsToQuery(this.expressParams)}`;
 89 |     },
 90 |     justwatchParams() {
 91 |       const params = {};
 92 |       if (this.justwatch.mode == 'whitelist' && this.justwatch.whitelist.length) {
 93 |         params['whitelist'] = this.justwatch.whitelist.join(',');
 94 |       } else
 95 |       if (this.justwatch.mode == 'blacklist' && this.justwatch.blacklist.length) {
 96 |         params['blacklist'] = this.justwatch.blacklist.join(',');
 97 |       }
 98 |       return params;
 99 |     },
100 |     justwatchUrl() {
101 |       return `${this.server.url}/${this.server.version == 2 ? 'justwatch.js' : 'kosmos-justwatch.js'}${this.paramsToQuery(this.justwatchParams)}`;
102 |     }
103 |   },
104 |   watch: {
105 |     'orion.apiKey': function (newVal, oldVal) {
106 |       if (newVal) {
107 |         this.orion.apiKey = newVal.replace(/\/+$/, '').replace(/^.*\/+/, '').toUpperCase();
108 |         this.orion.commonProviders = 'on';
109 |       }
110 |     }
111 |   },
112 |   methods: {
113 |     paramsToQuery: function (params) {
114 |       const query = new URLSearchParams(params || {}).toString().replace(/%2C/g, ',');
115 |       return query ? `?${query}` : '';
116 |     },
117 |     getProviders: function () {
118 |       return fetch(this.expressUrl.replace(/\?.*/, ''))
119 |         .then(response => response.json())
120 |         .then(json => Object.fromEntries(Object.entries(json).filter(([key, value]) => key !== '_manifest')));
121 |     }
122 |   },
123 |   created() {
124 |     this.getProviders().then((providers) => {
125 |       this.express.providers = providers;
126 |     }).catch((error) => console.error('Failed to fetch providers list'))
127 |   },
128 |   mounted() {
129 |     const $navTabs = $(`#tabs .nav-link`);
130 |     if (urlParams.size) {
131 |       const id = urlParams.get('id');
132 |       $navTabs.filter(`[data-bs-target="#${id}"]`).click();
133 |     }
134 |     $navTabs.on('shown.bs.tab', function (event) {
135 |       const id = $(event.target).attr('data-bs-target').replace(/^#/, '');
136 |       urlParams.set('id', id);
137 |       const newUrl = window.location.pathname + '?' + urlParams.toString();
138 |       history.replaceState(null, null, newUrl);
139 |     });
140 |     if (urlParams.size) {
141 |       const newParams = new URLSearchParams();
142 |       urlParams.has('v') && newParams.set('v', urlParams.get('v'));
143 |       urlParams.has('id') && newParams.set('id', urlParams.get('id'));
144 |       const newUrl = window.location.pathname + '?' + newParams.toString();
145 |       history.replaceState(null, null, newUrl);
146 |     }
147 |   }
148 | });
149 | 
150 | App.mount('.c-app');
151 | 
152 | window.App = App;
153 | 
154 | }())


--------------------------------------------------------------------------------
/@config/index.htm:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html class="js c-html" lang="en-US" prefix="og: http://ogp.me/ns#" data-bs-theme="dark">
  4 | <head>
  5 | <!--[START: CONFIG]-->
  6 | <meta charset="utf-8">
  7 | <meta http-equiv="content-type" content="text/html; charset=utf-8">
  8 | <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
  9 | <meta http-equiv="cleartype" content="on">
 10 | <meta name="robots" content="index, follow">
 11 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, minimal-ui">
 12 | <meta name="HandheldFriendly" content="true">
 13 | <base target="_new">
 14 | <!--[END: CONFIG]-->
 15 | <!--[START: METAS]-->
 16 | <title>JakedUp Package Configurator</title>
 17 | <!--[END: METAS]-->
 18 | <!--[START: CSS]-->
 19 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
 20 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 21 | <link rel="stylesheet" href="app.css">
 22 | <!--[END: CSS]-->
 23 | </head>
 24 | <body class="c-body">
 25 | <!--[START: APP]-->
 26 | <div class="container">
 27 |   <h1 class="border-bottom pb-2 mb-5">JakedUp Package Configurator</h1>
 28 |   <div class="c-app" v-cloak>
 29 |     <h3 class="h5 mb-4 text-decoration-underline">Available Packages:</h3>
 30 |     <ul class="nav nav-pills mb-5 border-bottom pb-5" id="tabs" role="tablist">
 31 |       <li class="nav-item" role="presentation" v-for="(value, key, index) in {'vendor-hybrid': 'Vendor Manifest — Hybrid'/*, 'express-hybrid': 'Express Package — Hybrid', 'kosmos-justwatch': 'Kosmos Package — JustWatch'*/}">
 32 |         <button :class="`nav-link ${index == 0 ? 'active' : ''}`" :id="`${key}-tab`" data-bs-toggle="pill" :data-bs-target="`#${key}`" type="button" role="tab" :aria-controls="key" aria-selected="true">{{ value }}</button>
 33 |       </li>
 34 |     </ul>
 35 |     <div class="c-tab-container tab-content" id="tab-content">
 36 |       <div :class="`c-tab-pane tab-pane fade ${index == 0 ? 'show active' : ''}`" :id="`${key}-hybrid`" role="tabpanel" :aria-labelledby="`${key}-hybrid-tab`" tabindex="0" v-for="(key, index) in ['vendor', 'express']">
 37 |         <div class="mb-5 border-bottom pb-5">
 38 |           <h2 class="mb-4">{{ key == 'vendor' ? 'Vendor Manifest' : 'Express Package' }} — Hybrid</h2>
 39 |           <p>
 40 |             This intelligently combines all known {{ key == 'express' ? 'Express' : '' }} packages for Syncler on-the-fly into a single hybrid package, de-duping any duplicate providers in the process.
 41 |           </p>
 42 |           <ul class="c-list-inline mb-4">
 43 |             Packages combined include:
 44 |             <li v-for="(package_url, package_name, pacakge_index) in (key == 'vendor' ? {...express.packages, ...kosmos.packages} : express.packages)"><a :href="package_url">{{ package_name }}</a></li>
 45 |             + custom providers.
 46 |           </ul>
 47 |           <p>
 48 |             You can copy the package URL as-is, or if you want a customized package, you can use the additional configuration options below...
 49 |           </p>
 50 |         </div>
 51 |         <div class="mb-5 border-bottom pb-5">
 52 |           <h3 class="h5 mb-4 text-decoration-underline">Configuration Options:</h3>
 53 |           <div class="accordion" :id="`${key}-accordion`">
 54 |             <div class="accordion-item">
 55 |               <h2 class="accordion-header">
 56 |                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" :data-bs-target="`#${key}-collapse-orion`" aria-expanded="true" :aria-controls="`${key}-collapse-orion`">
 57 |                   Orion
 58 |                 </button>
 59 |               </h2>
 60 |               <div :id="`${key}-collapse-orion`" class="accordion-collapse collapse" :data-bs-parent="`#${key}-accordion`">
 61 |                 <div class="accordion-body">
 62 |                   <div class="mb-4">
 63 |                     <p class="text-muted">
 64 |                       <em><u>NOTE:</u> To get an Orion API key, please visit: <a href="https://panel.orionoid.com/">https://panel.orionoid.com/</a> and sign up for an account.</em>
 65 |                     </p>
 66 |                   </div>
 67 |                   <div class="mb-4">
 68 |                     <label for="orion-api-key" class="form-label">Orion API Key:</label>
 69 |                     <input type="text" class="form-control text-uppercase" id="orion-api-key" placeholder="ABCDEFGHIJKLMNOPQRSTUVWXYZ123456" v-model="orion.apiKey">
 70 |                     <small class="form-text text-muted">* This will include the Orion custom search provider as you have configured it in the <a href="https://panel.orionoid.com/">Orion panel</a> under `Addons` –> `Packages` –> `Wako`</small>
 71 |                   </div>
 72 |                   <div class="mb-4" v-if="!orion.apiKey">
 73 |                     <label for="orion-common-providers" class="form-label">Orion Common Providers:</label>
 74 |                     <select class="form-control form-select" id="orion-common-providers" v-model.number="orion.commonProviders">
 75 |                       <option value="on">Include Orion's common providers</option>
 76 |                       <option value="off">Exclude Orion's common providers</option>
 77 |                     </select>
 78 |                     <small class="form-text text-muted">* Only exclude common providers if you plan on installing Orion's Syncler/Wako packages manually -- otherwise, keep this enabled</small>
 79 |                   </div>
 80 |                 </div>
 81 |               </div>
 82 |             </div>
 83 |             <div class="accordion-item">
 84 |               <h2 class="accordion-header">
 85 |                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" :data-bs-target="`#${key}-collapse-jackett`" aria-expanded="false" :aria-controls="`${key}-collapse-jackett`">
 86 |                   Jackett
 87 |                 </button>
 88 |               </h2>
 89 |               <div :id="`${key}-collapse-jackett`" class="accordion-collapse collapse" :data-bs-parent="`#${key}-accordion`">
 90 |                 <div class="accordion-body">
 91 |                   <div class="mb-4">
 92 |                     <p class="text-muted">
 93 |                       <em><u>NOTE:</u> Jackett is a custom provider that you would host on your own server, and requires an in-depth technical setup. <a href="https://www.reddit.com/r/providers4syncler/comments/1adrc0r/jackett_provider_added_to_jakedup_packages/">More info</a></em>
 94 |                     </p>
 95 |                   </div>
 96 |                   <div class="mb-4">
 97 |                     <label for="jackett-base-url" class="form-label">Jackett Base URL:</label>
 98 |                     <input type="text" class="form-control" id="jackett-base-url" placeholder="http://192.168.1.255:9117" v-model="jackett.baseUrl">
 99 |                     <small class="form-text text-muted">* <u>NOTE:</u> This address should be accessible by other devices on your local network, which includes the device with Syncler</small>
100 |                   </div>
101 |                   <div class="mb-4">
102 |                     <label for="jackett-api-key" class="form-label">Jackett API Key:</label>
103 |                     <input type="text" class="form-control" id="jackett-api-key" placeholder="abcdefghijklmnopqrstuvwxyz123456" v-model="jackett.apiKey">
104 |                     <small class="form-text text-muted">* <u>NOTE:</u> Your private Jackett API key can be found in the upper-right corner of your Jackett web UI admin panel</small>
105 |                   </div>
106 |                 </div>
107 |               </div>
108 |             </div>
109 |             <div class="accordion-item">
110 |               <h2 class="accordion-header">
111 |                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" :data-bs-target="`#${key}-collapse-blacklist`" aria-expanded="false" :aria-controls="`${key}-collapse-blacklist`">
112 |                   Blacklist
113 |                 </button>
114 |               </h2>
115 |               <div :id="`${key}-collapse-blacklist`" class="accordion-collapse collapse" :data-bs-parent="`#${key}-accordion`">
116 |                 <div class="accordion-body">
117 |                   <div class="mb-4" v-if="Object.keys(express.providers).length">
118 |                     <label for="express-blacklist" class="form-label">Blacklisted Providers:</label>
119 |                     <select class="form-control form-select" multiple size="20" id="express-blacklist" v-model="express.blacklist">
120 |                       <option disabled>Select multiple options...</option>
121 |                       <option disabled></option>
122 |                       <option :value="provider_key" v-for="(provider_value, provider_key, provider_index) in express.providers">{{ provider_value.name }}</option>
123 |                     </select>
124 |                     <small class="form-text text-muted">* Blacklist providers to be removed from your custom package -- It is NOT RECOMMENDED to use this feature unless you know what you are doing!</small>
125 |                   </div>
126 |                 </div>
127 |               </div>
128 |             </div>
129 |           </div>
130 |         </div>
131 |         <div class="mb-5 border-bottom pb-5">
132 |           <h3 class="h5 mb-4 text-decoration-underline">{{ key == 'vendor' ? 'Vendor' : 'Package' }} URL:</h3>
133 |           <p>
134 |             Copy the following URL into Syncler...
135 |           </p>
136 |           <p>
137 |             <a class="c-package-link btn btn-success" :href="key == 'vendor' ? vendorUrl : expressUrl">{{ key == 'vendor' ? vendorUrl : expressUrl }}</a>
138 |           </p>
139 |           <p v-if="key == 'vendor'">
140 |             <u>Tip:</u> Use a URL shortening service such as <a href="https://bit.ly/">Bit.ly</a> to easily input the vendor manifest URL into the Syncler app.
141 |           </p>
142 |         </div>
143 |       </div>
144 |       <div class="c-tab-pane tab-pane fade" id="kosmos-justwatch" role="tabpanel" aria-labelledby="kosmos-justwatch-tab" tabindex="0">
145 |         <div class="mb-5 border-bottom pb-5">
146 |           <h2 class="mb-4">Kosmos Package — JustWatch</h2>
147 |           <p>
148 |             <u>2024/01/23:</u> Do not use! This package is no longer working due to a change in JustWatch's APIs. Needs to be re-coded from the ground up, which is on my to-do list.
149 |           </p>
150 |           <p>
151 |             This is similar to Syncler's WatchNow provider, but with some enhancements. This will search a pre-defined list of streaming service providers (Netflix, Hulu, Amazon, etc), and will return a link to those apps if a result is found and you have that app installed. Upon clicking a JustWatch result, Syncler will launch the respective streaming app and attempt to deep link you directly to the title. If a deep link cannot be established, you will be taken to the main activity of that application.
152 |           </p>
153 |           <p>
154 |             You can copy the package URL as-is, or you can use the additional configuration options below...
155 |           </p>
156 |         </div>
157 |         <div class="mb-5 border-bottom pb-5">
158 |           <h3 class="h5 mb-4 text-decoration-underline">Configuration Options:</h3>
159 |           <div class="accordion" id="justwatch-accordion">
160 |             <div class="accordion-item">
161 |               <h2 class="accordion-header">
162 |                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#justwatch-collapse-providers" aria-expanded="true" aria-controls="justwatch-collapse-providers">
163 |                   Providers
164 |                 </button>
165 |               </h2>
166 |               <div id="justwatch-collapse-providers" class="accordion-collapse collapse" data-bs-parent="#justwatch-accordion">
167 |                 <div class="accordion-body">
168 |                   <div class="mb-4">
169 |                     <div class="form-check">
170 |                       <input type="radio" class="form-check-input" name="justwatch-mode" value="default" id="justwatch1" autocomplete="off" v-model="justwatch.mode">
171 |                       <label class="form-check-label" for="justwatch1">All Providers</label>
172 |                     </div>
173 |                     <div class="form-check">
174 |                       <input type="radio" class="form-check-input" name="justwatch-mode" value="whitelist" id="justwatch2" autocomplete="off" v-model="justwatch.mode">
175 |                       <label class="form-check-label" for="justwatch2">Whitelisted Providers</label>
176 |                     </div>
177 |                     <div class="form-check">
178 |                       <input type="radio" class="form-check-input" name="justwatch-mode" value="blacklist" id="justwatch3" autocomplete="off" v-model="justwatch.mode">
179 |                       <label class="form-check-label" for="justwatch3">Blacklisted Providers</label>
180 |                     </div>
181 |                   </div>
182 |                   <template v-for="(mode, index) in ['whitelist', 'blacklist']">
183 |                     <div class="mb-4" v-if="justwatch.mode == mode">
184 |                       <label :for="`justwatch-${mode}`" class="form-label">{{ mode == 'whitelist' ? 'Whitelisted' : 'Blacklisted'}} Streaming Providers:</label>
185 |                       <select class="form-control form-select" multiple size="14" :id="`justwatch-${mode}`" v-model="justwatch[mode]">
186 |                         <option disabled>Select multiple options...</option>
187 |                         <option disabled></option>
188 |                         <option :value="provider_key" v-for="(provider_value, provider_key, provider_index) in justwatch.providers">{{ provider_value }}</option>
189 |                       </select>
190 |                       <small class="form-text text-muted">* {{ mode == 'whitelist' ? 'Whitelist' : 'Blacklist'}} which streaming services to {{ mode == 'whitelist' ? 'include' : 'ignore'}}; Useful for when you have a streaming app installed, but do not subscribe to it</small>
191 |                     </div>
192 |                   </template>
193 |                 </div>
194 |               </div>
195 |             </div>
196 |           </div>
197 |         </div>
198 |         <div class="mb-5 border-bottom pb-5">
199 |           <h3 class="h5 mb-4 text-decoration-underline">Package URL:</h3>
200 |           <p>
201 |             Copy the following URL into Syncler...
202 |           </p>
203 |           <p>
204 |             <a class="c-package-link btn btn-success" :href="justwatchUrl">{{ justwatchUrl }}</a>
205 |           </p>
206 |         </div>
207 |       </div>
208 |     </div>
209 |     <div class="c-donate-links">
210 |       <h3 class="h5 mb-4 text-decoration-underline">Support The Project:</h3>
211 |       <p>
212 |         If you would like to help subsidize the monthly server costs, please donate a buck or 2 through one of the following links:
213 |       </p>
214 |       <ul class="c-list-inline">
215 |         <li><a class="c-buymeacoffee btn btn-dark" href="https://buymeacoffee.com/JakedUp">Buy Me A Coffee</a></li>
216 |         <li><a class="c-venmo btn btn-dark" href="https://venmo.com/JustJakedUp">Venmo</a></li>
217 |         <li><a class="c-paypal btn btn-dark" href="https://paypal.me/JustJakedUp">PayPal</a></li>
218 |       </ul>
219 |     </div>
220 |   </div>
221 | </div>
222 | <!--[END: APP]-->
223 | <!--[START: JS]-->
224 | <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.13/vue.global.prod.min.js"></script>
225 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
226 | <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js"></script>
227 | <script src="app.js"></script>
228 | <!--[END: JS]-->
229 | </body>
230 | </html>


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Configure Your Package:
 2 | 
 3 | The following Syncler v2 vendor manifests are available to be configured:
 4 | 
 5 | ## Syncler v2:
 6 | 
 7 | * [Vendor Manifest — Hybrid](https://jakedup.github.io/Syncler-Packages/@config/?id=vendor-hybrid)
 8 | 
 9 | ---
10 | 
11 | # Support The Project:
12 | 
13 | If you would like to help subsidize the monthly server costs, please donate a buck or 2 through one of the following links:
14 | 
15 | * [https://buymeacoffee.com/JakedUp](https://buymeacoffee.com/JakedUp)
16 | * [https://venmo.com/JustJakedUp](https://venmo.com/JustJakedUp)
17 | * [https://paypal.me/JustJakedUp](https://paypal.me/JustJakedUp)


--------------------------------------------------------------------------------