Create M3U/M3U8 playlists from directory listing pages. Automatically finds video and audio files in web server indexes.
当前为
// ==UserScript==
// @name M3Unator - Web Directory Playlist Creator
// @namespace https://github.com/hasanbeder/M3Unator
// @version 1.0.0
// @description Create M3U/M3U8 playlists from directory listing pages. Automatically finds video and audio files in web server indexes.
// @author Hasan Beder
// @license GPL-3.0
// @match *://*/*
// @grant GM_addStyle
// @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmNWMyZTciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWdvbiBwb2ludHM9IjIzIDcgMTYgMTIgMjMgMTcgMjMgNyIvPjxyZWN0IHg9IjEiIHk9IjUiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNCIgcng9IjIiIHJ5PSIyIi8+PC9zdmc+
// @homepageURL https://github.com/hasanbeder/M3Unator
// @supportURL https://github.com/hasanbeder/M3Unator/issues
// @run-at document-end
// @noframes true
// ==/UserScript==
(function() {
'use strict';
if (!document.title.includes('Index of')) {
console.log('This page is not an Index page, M3Unator disabled.');
return;
}
GM_addStyle(`
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
[class^="M3Unator"] {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.M3Unator-title {
font-weight: 700;
letter-spacing: -0.02em;
}
.M3Unator-input-group label {
font-weight: 500;
letter-spacing: -0.01em;
}
.M3Unator-input {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 0.9375rem;
letter-spacing: -0.01em;
}
.M3Unator-button {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
}
.M3Unator-control-btn {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 500;
letter-spacing: -0.01em;
}
.M3Unator-log {
font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 0.8125rem;
letter-spacing: -0.01em;
line-height: 1.5;
}
.M3Unator-log-counter {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
}
.M3Unator-container {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
display: none;
place-items: center;
padding: 1rem;
z-index: 9999;
}
.M3Unator-popup {
background: #11111b;
color: #cdd6f4;
width: 100%;
max-width: 480px;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
overflow: hidden;
animation: slideUp 0.3s ease;
position: absolute;
}
.M3Unator-header {
padding: 1.25rem 1.618rem;
background: #1e1e2e;
color: #cdd6f4;
display: flex;
align-items: center;
justify-content: space-between;
cursor: move;
user-select: none;
border-bottom: 1px solid #313244;
}
.M3Unator-title {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1;
}
.M3Unator-title svg {
width: 24px;
height: 24px;
color: #f5c2e7;
filter: drop-shadow(0 0 8px rgba(245, 194, 231, 0.4));
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.M3Unator-title span {
display: flex;
align-items: center;
line-height: 24px;
background: linear-gradient(90deg,
#f5c2e7,
#cba6f7,
#89b4fa,
#a6e3a1,
#f5c2e7
);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 3s linear infinite;
}
.M3Unator-close {
background: rgba(203, 166, 247, 0.1);
border: none;
color: #cba6f7;
width: 32px;
height: 32px;
border-radius: 8px;
display: grid;
place-items: center;
cursor: pointer;
transition: all 0.2s ease;
}
.M3Unator-close:hover {
background: rgba(203, 166, 247, 0.2);
transform: rotate(360deg);
}
.M3Unator-close svg {
width: 18px;
height: 18px;
}
.M3Unator-content {
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.M3Unator-input-group {
margin-bottom: 0;
}
.M3Unator-input-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #bac2de;
}
.M3Unator-input {
width: 100%;
padding: 0.618rem;
border: 1px solid #313244;
border-radius: 8px;
background-color: #1e1e2e !important;
color: #cdd6f4 !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 0.9375rem;
letter-spacing: -0.01em;
transition: all 0.2s ease;
-webkit-text-fill-color: #cdd6f4 !important;
text-decoration: none !important;
-webkit-text-decoration: none !important;
}
.M3Unator-input:focus {
outline: none;
border-color: #f5c2e7;
box-shadow: 0 0 0 3px rgba(245, 194, 231, 0.1);
background-color: #1e1e2e !important;
color: #cdd6f4 !important;
-webkit-text-fill-color: #cdd6f4 !important;
text-decoration: none !important;
-webkit-text-decoration: none !important;
}
.M3Unator-input::placeholder {
color: #6c7086;
opacity: 1;
}
.M3Unator-toggle-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.M3Unator-toggle-container input[type="checkbox"] {
display: none;
}
.M3Unator-toggle-container span {
width: 48px;
height: 48px;
background: #1e1e2e;
border: 2px solid #45475a;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.M3Unator-toggle-container svg {
width: 24px;
height: 24px;
opacity: 0.7;
transition: all 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.M3Unator-toggle-container input[type="checkbox"]:checked + span {
background: rgba(203, 166, 247, 0.1);
border-color: #cba6f7;
box-shadow: 0 0 20px rgba(203, 166, 247, 0.2);
}
.M3Unator-toggle-container input[type="checkbox"]:checked + span svg {
opacity: 1;
color: #cba6f7;
filter: drop-shadow(0 0 8px rgba(203, 166, 247, 0.4));
}
.M3Unator-toggle-container span:hover {
background: #313244;
transform: translateY(-2px);
}
.M3Unator-toggle-container span:active {
transform: translateY(1px);
}
.M3Unator-toggle-container input[type="checkbox"]:checked + span:hover {
background: rgba(203, 166, 247, 0.2);
}
.M3Unator-toggle-container span:active {
transform: translateY(1px);
}
.M3Unator-toggle-container svg {
width: 24px;
height: 24px;
opacity: 0.8;
transition: all 0.2s ease;
}
.M3Unator-toggle-container input[type="checkbox"]:checked + span svg {
opacity: 1;
color: #cba6f7;
}
.M3Unator-toggle-group {
display: flex;
gap: 0.75rem;
margin: 0.75rem 0;
justify-content: center;
background: rgba(30, 30, 46, 0.4);
padding: 0.75rem;
border-radius: 12px;
backdrop-filter: blur(8px);
}
[title]:hover::after {
content: attr(title);
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 0.75rem;
background: rgba(30, 30, 46, 0.95);
color: #cdd6f4;
font-size: 0.875rem;
white-space: nowrap;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1000;
border: 1px solid #313244;
text-align: center;
backdrop-filter: blur(8px);
pointer-events: none;
}
.M3Unator-button {
width: 100%;
padding: 0.75rem;
background: #f5c2e7;
color: #11111b;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.M3Unator-button:hover {
background: #f5c2e7;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(245, 194, 231, 0.2);
}
.M3Unator-button:active {
transform: translateY(0);
}
.M3Unator-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.M3Unator-launcher {
position: fixed;
top: 1rem;
right: 1.618rem;
height: 48px;
padding: 0 1.25rem;
border-radius: 12px;
background: rgba(30, 30, 46, 0.95);
border: 2px solid #313244;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 0.75rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9998;
backdrop-filter: blur(12px);
}
.M3Unator-launcher:hover {
background: rgba(30, 30, 46, 0.98);
border-color: #45475a;
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.M3Unator-launcher svg {
width: 24px;
height: 24px;
color: #f5c2e7;
filter: drop-shadow(0 0 8px rgba(245, 194, 231, 0.4));
}
.M3Unator-launcher span {
font-weight: 600;
font-size: 0.95rem;
background: linear-gradient(90deg,
#f5c2e7,
#cba6f7,
#89b4fa,
#a6e3a1,
#f5c2e7
);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 3s linear infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
50% { background-position: 100% 50%; filter: hue-rotate(180deg); }
100% { background-position: 0% 50%; filter: hue-rotate(360deg); }
}
.M3Unator-dropdown {
position: relative;
width: 100%;
}
.M3Unator-dropdown-button {
width: 100%;
padding: 0.618rem;
background: #1e1e2e;
border: 1px solid #313244;
border-radius: 8px;
color: #cdd6f4;
font-size: 0.875rem;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
.M3Unator-dropdown-button:hover {
border-color: #45475a;
background: rgba(30, 30, 46, 0.8);
}
.M3Unator-dropdown-button svg {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.M3Unator-dropdown.active .M3Unator-dropdown-button {
border-color: #cba6f7;
border-radius: 8px 8px 0 0;
}
.M3Unator-dropdown.active .M3Unator-dropdown-button svg {
transform: rotate(180deg);
}
.M3Unator-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #1e1e2e;
border: 1px solid #cba6f7;
border-top: none;
border-radius: 0 0 8px 8px;
overflow: hidden;
z-index: 1000;
display: none;
animation: dropdownSlide 0.2s ease;
user-select: none;
}
.M3Unator-dropdown.active .M3Unator-dropdown-menu {
display: block;
}
.M3Unator-dropdown-item {
padding: 0.618rem;
color: #cdd6f4;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.M3Unator-dropdown-item:hover {
background: rgba(203, 166, 247, 0.1);
}
.M3Unator-dropdown-item.selected {
background: rgba(203, 166, 247, 0.1);
color: #cba6f7;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.M3Unator-log {
margin-top: 0.75rem;
max-height: calc(100vh - 70vh);
font-size: 0.8125rem;
line-height: 1.4;
}
.M3Unator-log:empty {
display: none;
}
.M3Unator-log-entry {
padding: 0.25rem 0.5rem;
border-bottom: 1px solid #313244;
}
.M3Unator-log-entry:last-child {
border-bottom: none;
}
.M3Unator-log-entry.success {
color: #94e2d5;
}
.M3Unator-log-entry.error {
color: #f38ba8;
}
.M3Unator-log-entry.warning {
color: #fab387;
}
.M3Unator-log-counter {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(245, 194, 231, 0.1);
color: #f5c2e7;
padding: 0.25rem 0.75rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
margin-left: 0.75rem;
min-width: 3rem;
text-align: center;
}
@keyframes gradient {
0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
50% { background-position: 100% 50%; filter: hue-rotate(180deg); }
100% { background-position: 0% 50%; filter: hue-rotate(360deg); }
}
.M3Unator-title span.text {
display: inline-block;
position: relative;
padding: 0 0.25rem;
}
.M3Unator-title.scanning span.text {
background: linear-gradient(90deg,
#f5c2e7,
#cba6f7,
#89b4fa,
#a6e3a1,
#f5c2e7
);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 3s linear infinite;
font-weight: 700;
letter-spacing: 0.5px;
}
.M3Unator-title.scanning span.text::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: inherit;
animation: gradient 3s linear infinite;
}
.M3Unator-title.scanning svg {
animation: morphAnimation 2s ease-in-out infinite;
filter: drop-shadow(0 0 8px rgba(203, 166, 247, 0.5));
}
@keyframes morphAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.M3Unator-controls {
display: none;
gap: 0.75rem;
margin: 0.75rem 0;
justify-content: center;
}
.M3Unator-controls.active {
display: flex;
}
.M3Unator-control-btn {
display: none;
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
align-items: center;
gap: 0.75rem;
min-width: 160px;
justify-content: center;
background: rgba(30, 30, 46, 0.6);
backdrop-filter: blur(8px);
width: 160px;
}
.M3Unator-control-btn:hover {
background: #313244;
transform: translateY(-1px);
}
.M3Unator-control-btn:active {
transform: translateY(1px);
}
.M3Unator-control-btn.pause {
border-color: #fab387;
color: #fab387;
}
.M3Unator-control-btn.pause:hover {
background: rgba(250, 179, 135, 0.1);
}
.M3Unator-control-btn.resume {
border-color: #94e2d5;
color: #94e2d5;
}
.M3Unator-control-btn.resume:hover {
background: rgba(148, 226, 213, 0.1);
}
.M3Unator-control-btn.cancel {
border-color: #f38ba8;
color: #f38ba8;
}
.M3Unator-control-btn.cancel:hover {
background: rgba(243, 139, 168, 0.1);
}
.M3Unator-control-btn svg {
width: 14px;
height: 14px;
}
.M3Unator-button {
width: 100%;
padding: 0 1rem;
background: #f5c2e7;
color: #11111b;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
height: 48px;
min-height: 48px;
line-height: 1;
}
.M3Unator-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(17, 17, 27, 0.3);
border-radius: 50%;
border-top-color: #11111b;
animation: spin 0.6s linear infinite;
margin-right: 0;
flex-shrink: 0;
}
.M3Unator-toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 100002;
}
.M3Unator-toast {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 12px;
margin-top: 8px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
animation: toastIn 0.3s ease;
background: #1e1e2e;
border: 2px solid;
}
.M3Unator-toast.success {
color: #a6e3a1;
border-color: #a6e3a1;
}
.M3Unator-toast.error {
color: #f38ba8;
border-color: #f38ba8;
}
.M3Unator-toast.warning {
color: #fab387;
border-color: #fab387;
}
.M3Unator-toast.removing {
animation: toastOut 0.3s ease forwards;
}
@keyframes toastIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes toastOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
.M3Unator-toast svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.M3Unator-input-row {
display: flex;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.M3Unator-input-row .M3Unator-input-group {
margin-bottom: 0;
}
.M3Unator-input-row .M3Unator-input-group:first-child {
flex: 2;
}
.M3Unator-input-row .M3Unator-input-group:last-child {
flex: 1;
}
.M3Unator-social {
display: flex;
gap: 8px;
margin-right: 8px;
}
.M3Unator-social a {
width: 32px;
height: 32px;
border-radius: 8px;
display: grid;
place-items: center;
color: #cdd6f4;
background: rgba(205, 214, 244, 0.1);
transition: all 0.2s ease;
}
.M3Unator-social a:hover {
background: rgba(205, 214, 244, 0.2);
transform: rotate(360deg);
}
.M3Unator-social svg {
width: 18px;
height: 18px;
}
.M3Unator-advanced-settings {
margin-top: 1rem;
padding: 1rem;
background: rgba(30, 30, 46, 0.5);
border: 1px solid #313244;
border-radius: 8px;
display: none;
}
.M3Unator-advanced-settings.active {
display: block;
animation: fadeIn 0.3s ease;
}
.M3Unator-advanced-toggle {
width: 100%;
padding: 0.75rem;
background: #1e1e2e;
border: 1px solid #313244;
border-radius: 8px;
color: #cdd6f4;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s ease;
}
.M3Unator-advanced-toggle:hover {
background: #313244;
}
.M3Unator-advanced-toggle svg {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.M3Unator-advanced-toggle.active svg {
transform: rotate(180deg);
}
.M3Unator-depth-slider {
-webkit-appearance: none;
width: 100%;
height: 4px;
border-radius: 2px;
background: #313244;
outline: none;
margin: 1rem 0;
}
.M3Unator-depth-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #cba6f7;
cursor: pointer;
transition: all 0.2s ease;
}
.M3Unator-depth-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.M3Unator-depth-value {
text-align: center;
font-size: 0.875rem;
color: #cdd6f4;
margin-top: 0.5rem;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.M3Unator-depth-settings {
margin-top: 0.75rem;
margin-left: 1.75rem;
padding: 0.75rem;
background: rgba(30, 30, 46, 0.3);
border-left: 2px solid #cba6f7;
border-radius: 0 8px 8px 0;
display: none;
animation: slideDown 0.3s ease;
}
.M3Unator-depth-settings.active {
display: block;
}
.M3Unator-depth-input {
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.M3Unator-depth-input input[type="number"] {
width: 64px;
padding: 0.25rem 0.375rem;
border: 1px solid #45475a;
border-radius: 4px;
background: rgba(30, 30, 46, 0.8);
color: #cdd6f4;
font-size: 0.875rem;
text-align: center;
margin: 0 0 0 0.5rem;
}
.M3Unator-depth-input input[type="number"]:focus {
outline: none;
border-color: #cba6f7;
box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.2);
}
.M3Unator-depth-input input[type="number"]::-webkit-inner-spin-button {
opacity: 1;
background: #313244;
border-left: 1px solid #45475a;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.M3Unator-depth-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background: #1e1e2e;
border: 1px solid #45475a;
border-radius: 6px;
color: #cdd6f4;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
}
.M3Unator-depth-toggle:hover {
background: #313244;
border-color: #cba6f7;
}
.M3Unator-depth-toggle.active {
background: rgba(203, 166, 247, 0.1);
border-color: #cba6f7;
color: #cba6f7;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.M3Unator-stats-bar {
margin: 0.75rem 0;
padding: 0.5rem;
background: rgba(30, 30, 46, 0.5);
border: 1px solid #313244;
border-radius: 8px;
display: none;
}
.M3Unator-stats-bar.active {
display: block;
}
.M3Unator-stats {
display: flex;
align-items: center;
justify-content: space-around;
gap: 0.382rem;
padding: 0.25rem;
}
.M3Unator-stat {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: #cdd6f4;
cursor: help;
min-width: 40px;
justify-content: flex-start;
padding: 0 0.25rem;
position: relative;
}
.M3Unator-stat span {
min-width: 16px;
text-align: right;
font-variant-numeric: tabular-nums;
font-size: 0.7rem;
font-weight: 500;
}
.M3Unator-stat svg {
opacity: 0.8;
flex-shrink: 0;
width: 14px;
height: 14px;
}
.M3Unator-stat.video {
color: #94e2d5;
}
.M3Unator-stat.audio {
color: #89b4fa;
}
.M3Unator-stat.dir {
color: #cba6f7;
}
.M3Unator-stat.error {
color: #f38ba8;
}
.M3Unator-stat.depth {
color: #a6e3a1;
transition: color 0.3s ease;
}
.M3Unator-stat.depth[data-progress="high"] {
color: #f38ba8;
}
.M3Unator-stat.depth[data-progress="medium"] {
color: #fab387;
}
.M3Unator-stat.depth[data-progress="low"] {
color: #f9e2af;
}
.M3Unator-stat:hover::after {
content: attr(title);
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 0.75rem;
background: rgba(30, 30, 46, 0.95);
color: #cdd6f4;
font-size: 0.875rem;
white-space: nowrap;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1000;
border: 1px solid #313244;
text-align: center;
backdrop-filter: blur(8px);
pointer-events: none;
}
.M3Unator-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(17, 17, 27, 0.3);
border-radius: 50%;
border-top-color: #11111b;
animation: spin 0.6s linear infinite;
margin-right: 0;
flex-shrink: 0;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.M3Unator-toast {
animation: toastSlideUp 0.2s ease forwards;
}
.M3Unator-toast.removing {
animation: toastSlideDown 0.2s ease forwards;
}
.M3Unator-popup {
animation: slideUp 0.2s ease;
}
.M3Unator-stats-bar {
animation: fadeIn 0.2s ease;
}
.M3Unator-log {
transition: max-height 0.3s ease;
}
.M3Unator-log.collapsed {
max-height: 0;
overflow: hidden;
}
.M3Unator-log-toggle {
width: 100%;
padding: 0.75rem;
background: #1e1e2e;
border: none;
color: #cdd6f4;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.M3Unator-log-toggle:hover {
background: rgba(30, 30, 46, 0.8);
}
.M3Unator-log-toggle svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.M3Unator-log-toggle.active svg {
transform: rotate(180deg);
}
.M3Unator-toggle-container span svg .infinity-icon {
opacity: 0.5;
transition: opacity 0.2s ease;
transform: scale(0.6) translateY(4px);
transform-origin: center;
stroke-width: 1.5;
}
.M3Unator-toggle-container input[type="checkbox"]:checked + span svg .infinity-icon {
opacity: 1;
}
.M3Unator-depth-controls {
background: rgba(30, 30, 46, 0.4);
backdrop-filter: blur(8px);
border: 1px solid #313244;
border-radius: 8px;
padding: 0.618rem;
margin-top: 1rem;
display: none;
}
.M3Unator-depth-controls.active {
display: block;
}
.M3Unator-radio-group {
display: flex;
gap: 0.75rem;
justify-content: center;
background: rgba(30, 30, 46, 0.6);
padding: 0.5rem;
border-radius: 6px;
}
.M3Unator-radio {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
transition: all 0.2s ease;
background: transparent;
border: 1px solid transparent;
}
.M3Unator-radio:hover {
background: rgba(203, 166, 247, 0.1);
}
.M3Unator-radio input[type="radio"] {
display: none;
}
.M3Unator-radio .radio-mark {
width: 16px;
height: 16px;
border: 1.5px solid #45475a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
background: rgba(30, 30, 46, 0.6);
position: relative;
}
.M3Unator-radio input[type="radio"]:checked + .radio-mark {
border-color: #cba6f7;
background: rgba(203, 166, 247, 0.1);
}
.M3Unator-radio input[type="radio"]:checked + .radio-mark::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #cba6f7;
position: absolute;
}
.M3Unator-radio .radio-label {
color: #cdd6f4;
font-size: 0.875rem;
user-select: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.M3Unator-depth-input {
width: 64px;
padding: 0.25rem 0.375rem;
border: 1px solid #45475a;
border-radius: 4px;
background: rgba(30, 30, 46, 0.8);
color: #cdd6f4;
font-size: 0.875rem;
text-align: center;
transition: all 0.2s ease;
-moz-appearance: textfield;
margin-top: -1px;
display: inline-flex;
align-items: center;
height: 28px;
}
.M3Unator-depth-input::-webkit-outer-spin-button,
.M3Unator-depth-input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
opacity: 1;
background: #313244;
border-left: 1px solid #45475a;
border-radius: 0 4px 4px 0;
cursor: pointer;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.M3Unator-depth-input:focus {
outline: none;
border-color: #cba6f7;
box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.2);
}
.M3Unator-depth-input:disabled {
opacity: 0.5;
cursor: not-allowed;
background: rgba(30, 30, 46, 0.4);
}
.M3Unator-radio .radio-label {
display: flex;
align-items: center;
gap: 0.5rem;
color: #cdd6f4;
font-size: 0.875rem;
user-select: none;
}
.M3Unator-url-container {
display: flex;
align-items: center;
background: rgba(30, 30, 46, 0.6);
border: 1px solid #313244;
border-radius: 6px;
padding: 0.618rem;
margin-bottom: 1rem;
transition: all 0.2s ease;
}
.M3Unator-url-container:hover {
border-color: #45475a;
}
.M3Unator-url-icon {
color: #6c7086;
margin-right: 0.618rem;
flex-shrink: 0;
}
.M3Unator-url-input {
flex: 1;
background: transparent;
border: none;
color: #cdd6f4;
font-size: 0.875rem;
padding: 0;
margin: 0;
width: 100%;
}
.M3Unator-url-input:focus {
outline: none;
}
.M3Unator-url-copy {
background: transparent;
border: none;
color: #6c7086;
padding: 0.382rem;
margin-left: 0.618rem;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.M3Unator-url-copy:hover {
color: #cdd6f4;
background: rgba(205, 214, 244, 0.1);
}
.M3Unator-url-copy.copied {
color: #a6e3a1;
animation: copyPulse 0.3s ease;
}
@keyframes copyPulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.M3Unator-toggle-group {
display: flex;
gap: 1.25rem;
margin: 1.5rem 0;
justify-content: center;
background: rgba(30, 30, 46, 0.4);
padding: 1.25rem;
border-radius: 16px;
backdrop-filter: blur(8px);
}
.M3Unator-toggle-container {
position: relative;
}
.M3Unator-toggle-container span {
width: 64px;
height: 64px;
background: #1e1e2e;
border: 2px solid #45475a;
border-radius: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
}
.M3Unator-toggle-container input[type="checkbox"]:checked + span {
background: rgba(203, 166, 247, 0.1);
border-color: #cba6f7;
box-shadow: 0 0 20px rgba(203, 166, 247, 0.2);
transform: translateY(-2px);
}
.M3Unator-toggle-container span:hover {
background: #313244;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.M3Unator-toggle-container svg {
width: 32px;
height: 32px;
opacity: 0.7;
transition: all 0.3s ease;
}
.M3Unator-toggle-container input[type="checkbox"]:checked + span svg {
opacity: 1;
color: #cba6f7;
filter: drop-shadow(0 0 8px rgba(203, 166, 247, 0.4));
}
.M3Unator-progress {
background: rgba(30, 30, 46, 0.6);
border-radius: 12px;
padding: 1rem;
margin: 1rem 0;
backdrop-filter: blur(8px);
border: 1px solid rgba(203, 166, 247, 0.2);
}
.M3Unator-progress-text {
color: #f5c2e7;
font-weight: 600;
text-align: center;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.M3Unator-progress-spinner {
width: 24px;
height: 24px;
border: 3px solid rgba(245, 194, 231, 0.1);
border-top-color: #f5c2e7;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
}
.M3Unator-controls {
display: flex;
gap: 0.75rem;
margin: 0.75rem 0;
justify-content: center;
}
.M3Unator-control-btn {
display: none;
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
align-items: center;
gap: 0.75rem;
min-width: 160px;
justify-content: center;
background: rgba(30, 30, 46, 0.6);
backdrop-filter: blur(8px);
width: 160px;
}
.M3Unator-control-btn.pause {
background: rgba(250, 179, 135, 0.1);
border: 2px solid #fab387;
color: #fab387;
}
.M3Unator-control-btn.resume {
background: rgba(148, 226, 213, 0.1);
border: 2px solid #94e2d5;
color: #94e2d5;
}
.M3Unator-control-btn.cancel {
background: rgba(243, 139, 168, 0.1);
border: 2px solid #f38ba8;
color: #f38ba8;
}
.M3Unator-control-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.M3Unator-control-btn svg {
width: 20px;
height: 20px;
}
.M3Unator-layers-icon {
width: 20px;
height: 20px;
margin-right: 0.5rem;
}
.M3Unator-input:-webkit-autofill,
.M3Unator-input:-webkit-autofill:hover,
.M3Unator-input:-webkit-autofill:focus,
.M3Unator-input:-webkit-autofill:active {
-webkit-text-fill-color: #cdd6f4 !important;
-webkit-box-shadow: 0 0 0 30px #1e1e2e inset !important;
box-shadow: 0 0 0 30px #1e1e2e inset !important;
background-color: #1e1e2e !important;
color: #cdd6f4 !important;
caret-color: #cdd6f4 !important;
transition: background-color 5000s ease-in-out 0s !important;
text-decoration: none !important;
-webkit-text-decoration: none !important;
}
.M3Unator-input:-moz-autofill,
.M3Unator-input:-moz-autofill-preview {
background-color: #1e1e2e !important;
color: #cdd6f4 !important;
text-decoration: none !important;
}
.M3Unator-input:-ms-input-placeholder {
background-color: #1e1e2e !important;
color: #cdd6f4 !important;
text-decoration: none !important;
}
.M3Unator-log-container {
margin: 0;
}
.M3Unator-log-toggle {
width: 100%;
padding: 0.5rem 0.75rem;
background: rgba(203, 166, 247, 0.05);
border: none;
color: #cdd6f4;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 0.875rem;
font-weight: 500;
border-radius: 6px;
}
.M3Unator-log-toggle:hover {
background: rgba(203, 166, 247, 0.1);
}
.M3Unator-log-toggle svg {
width: 18px;
height: 18px;
color: #cba6f7;
opacity: 0.8;
transition: all 0.2s ease;
margin-right: 0.5rem;
}
.M3Unator-log-toggle.active svg {
transform: rotate(180deg);
opacity: 1;
}
.M3Unator-log-counter {
background: rgba(203, 166, 247, 0.1);
color: #cba6f7;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
min-width: 1.5rem;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
}
.M3Unator-log-toggle:hover .M3Unator-log-counter {
background: rgba(203, 166, 247, 0.15);
}
.M3Unator-log-toggle .toggle-text {
display: flex;
align-items: center;
gap: 0.5rem;
}
.M3Unator-log {
height: 0;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: #11111b;
padding: 0;
border-top: none;
margin: 0;
}
.M3Unator-log.expanded {
height: auto;
max-height: 300px;
padding: 0.75rem;
border-top: 1px solid #313244;
overflow-y: auto;
}
.M3Unator-log-entry {
padding: 0.25rem 0.5rem;
border-bottom: 1px solid rgba(49, 50, 68, 0.5);
font-size: 0.875rem;
}
.M3Unator-log-entry:last-child {
border-bottom: none;
}
.M3Unator-log-time {
color: #6c7086;
margin-right: 0.5rem;
}
.M3Unator-log-entry.success {
color: #94e2d5;
}
.M3Unator-log-entry.error {
color: #f38ba8;
}
.M3Unator-log-entry.warning {
color: #fab387;
}
.M3Unator-log-entry.info {
color: #89b4fa;
}
.M3Unator-log-entry.final {
color: #a6e3a1;
font-weight: 500;
}
.M3Unator-log {
margin-top: 0.75rem;
max-height: calc(100vh - 70vh);
font-size: 0.8125rem;
line-height: 1.4;
}
.M3Unator-log-entry {
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.M3Unator-log-toggle {
padding: 0.5rem 0.75rem;
height: 36px;
}
.M3Unator-log-counter {
padding: 0.125rem 0.375rem;
font-size: 0.75rem;
border-radius: 4px;
}
.M3Unator-log-time {
font-size: 0.75rem;
opacity: 0.7;
margin-right: 0.5rem;
}
`);
GM_addStyle(`
.M3Unator-popup {
position: fixed;
background: #11111b;
color: #cdd6f4;
width: 100%;
max-width: 480px;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
overflow: hidden;
animation: slideUp 0.3s ease;
z-index: 9999;
}
.M3Unator-header {
padding: 1rem 1.25rem;
background: #1e1e2e;
color: #cdd6f4;
display: flex;
align-items: center;
justify-content: space-between;
cursor: move;
user-select: none;
border-bottom: 1px solid #313244;
}
.M3Unator-container {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
display: none;
place-items: center;
z-index: 9999;
}
`);
GM_addStyle(`
/* Info Modal Styles */
.info-modal {
display: none;
position: fixed;
z-index: 100000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(30, 30, 46, 0.6);
backdrop-filter: blur(8px);
}
.info-modal-content {
background-color: #1e1e2e;
color: #cdd6f4;
margin: 15% auto;
padding: 24px;
border: 2px solid #45475a;
width: 90%;
max-width: 600px;
border-radius: 12px;
position: relative;
z-index: 100001;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.info-close {
position: absolute;
right: 16px;
top: 16px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #6c7086;
cursor: pointer;
transition: color 0.2s ease;
background: none;
border: none;
padding: 0;
}
.info-close:hover {
color: #cba6f7;
}
.info-link {
cursor: pointer;
color: #6c7086;
transition: color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.info-link:hover {
color: #cba6f7;
}
.info-section {
margin-bottom: 24px;
}
.info-section:last-child {
margin-bottom: 0;
}
.info-section h3 {
color: #cba6f7;
margin-bottom: 12px;
font-size: 1.1em;
font-weight: 600;
}
.info-section p {
color: #cdd6f4;
line-height: 1.6;
margin: 0;
}
.info-section strong {
color: #89b4fa;
font-weight: 600;
}
`);
class PlaylistGenerator {
constructor() {
this.initialStats = {
directories: {
total: 0,
depth: 0
},
files: {
video: {
total: 0,
current: 0
},
audio: {
total: 0,
current: 0
}
},
errors: {
total: 0,
skipped: 0
},
totalFiles: 0
};
this.domElements = {};
this.state = {
isGenerating: false,
isPaused: false,
selectedFormat: 'm3u',
includeVideo: false,
includeAudio: false,
maxEntries: 100000,
timeoutMs: 5000,
retryCount: 2,
maxDepth: 0,
maxSeenUrls: 5000,
stats: { ...this.initialStats }
};
this.sortOptions = { numeric: true, sensitivity: 'base' };
this.entries = [];
this.seenUrls = new Set();
this.toastQueue = [];
this.isProcessingToast = false;
this.videoFormats = [
'.mp4', '.mkv', '.avi', '.webm', '.mov', '.flv', '.wmv',
'.m4v', '.mpg', '.mpeg', '.3gp', '.vob', '.ts', '.mts',
'.m2ts', '.divx', '.xvid', '.asf', '.ogv', '.rm', '.rmvb',
'.wtv', '.qt', '.hevc', '.f4v', '.swf', '.vro', '.ogx',
'.drc', '.gifv', '.mxf', '.roq', '.nsv'
];
this.audioFormats = [
'.mp3', '.m4a', '.wav', '.flac', '.aac', '.ogg', '.wma',
'.opus', '.aiff', '.ape', '.mka', '.ac3', '.dts', '.m4b',
'.m4p', '.m4r', '.mid', '.midi', '.mp2', '.mpa', '.mpc',
'.ra', '.tta', '.voc', '.vox', '.amr', '.awb', '.dsf',
'.dff', '.alac', '.wv', '.oga', '.sln', '.aif', '.pcm'
];
this.icons = {
video: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="23 7 16 12 23 17 23 7"/>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
</svg>`,
audio: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 18V5l12-2v13"/>
<circle cx="6" cy="18" r="3"/>
<circle cx="18" cy="16" r="3"/>
</svg>`,
folder: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
</svg>`,
info: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="16" x2="12" y2="12"/>
<line x1="12" y1="8" x2="12.01" y2="8"/>
</svg>`,
file: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
<polyline points="13 2 13 9 20 9"/>
</svg>`,
download: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>`,
close: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>`,
pause: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="6" y="4" width="4" height="16"/>
<rect x="14" y="4" width="4" height="16"/>
</svg>`,
resume: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"/>
</svg>`,
cancel: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="15" y1="9" x2="9" y2="15"/>
<line x1="9" y1="9" x2="15" y2="15"/>
</svg>`,
success: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>`,
error: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="12"/>
<line x1="12" y1="16" x2="12.01" y2="16"/>
</svg>`,
warning: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<line x1="12" y1="9" x2="12" y2="13"/>
<line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>`,
github: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>`,
twitter: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>`,
chevronDown: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"/>
</svg>`,
layers: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
<polyline points="2 17 12 22 22 17"/>
<polyline points="2 12 12 17 22 12"/>
</svg>`,
logToggle: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>`
};
this.templates = {
toggleButton: (id, title, icon, checked = false) => `
<div class="M3Unator-toggle-container">
<label>
<input type="checkbox" id="${id}" ${checked ? 'checked' : ''}>
<span title="${title}">${icon}</span>
</label>
</div>
`,
controlButton: (type, icon, text) => `
<button class="M3Unator-control-btn ${type}">
${icon}
<span>${text}</span>
</button>
`,
statsItem: (icon, id, title) => `
<span class="M3Unator-stat ${props.class}" title="${props.title}">
${icon}
<span id="${props.id}">0</span>
</span>
`
};
this.baseStyles = `
.M3Unator-btn-base {
border: none;
border-radius: 8px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.M3Unator-toggle-base {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.M3Unator-control-base {
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
min-width: 160px;
background: rgba(30, 30, 46, 0.6);
backdrop-filter: blur(8px);
}
.M3Unator-stat-base {
display: inline-flex;
align-items: center;
gap: 0.382rem;
font-size: 0.875rem;
cursor: help;
min-width: 52px;
padding: 0 0.382rem;
}
.M3Unator-icon-base {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
transition: all 0.2s ease;
}
`;
GM_addStyle(this.baseStyles);
}
createComponent(type, props) {
switch (type) {
case 'toggle':
return this.templates.toggleButton(
props.id,
props.title,
props.icon,
props.checked
);
case 'control':
return this.templates.controlButton(
props.type,
props.icon,
props.text
);
case 'stats':
return `
<span class="M3Unator-stat ${props.class}" title="${props.title}">
${props.icon}
<span id="${props.id}">0</span>
</span>
`;
default:
return '';
}
}
async init() {
const container = document.createElement('div');
container.className = 'M3Unator-container';
const toggleButtons = [
{
id: 'includeVideo',
title: 'Video (.mp4, .mkv)',
icon: this.icons.video,
checked: true
},
{
id: 'includeAudio',
title: 'Audio (.mp3, .m4a)',
icon: this.icons.audio,
checked: true
},
{
id: 'recursiveSearch',
title: 'Scan Subdirectories',
icon: this.icons.folder,
checked: true
}
].map(props => this.createComponent('toggle', props)).join('');
const controlButtons = [
{
type: 'pause',
icon: this.icons.pause,
text: 'Pause'
},
{
type: 'resume',
icon: this.icons.resume,
text: 'Resume'
},
{
type: 'cancel',
icon: this.icons.cancel,
text: 'Cancel'
}
].map(props => this.createComponent('control', props)).join('');
const statsItems = [
{
icon: this.icons.file,
id: 'totalFiles',
title: 'Total Files',
class: ''
},
{
icon: this.icons.video,
id: 'videoFiles',
title: 'Video (.mp4, .mkv)',
class: 'video'
},
{
icon: this.icons.audio,
id: 'audioFiles',
title: 'Audio (.mp3, .m4a)',
class: 'audio'
},
{
icon: this.icons.folder,
id: 'directories',
title: 'Subdirectories',
class: 'dir'
},
{
icon: this.icons.layers,
id: 'depthLevel',
title: 'Depth Level',
class: 'depth'
},
{
icon: this.icons.error,
id: 'errors',
title: 'Error',
class: 'error'
}
].map(props => this.createComponent('stats', props)).join('');
container.innerHTML = `
<div class="M3Unator-popup">
<div class="M3Unator-header">
<h3 class="M3Unator-title">
${this.icons.video}
<span>M3Unator</span>
</h3>
<div style="display: flex; align-items: center;">
<div class="M3Unator-social">
<a class="info-link">
${this.icons.info}
</a>
<a href="https://github.com/hasanbeder/M3Unator" target="_blank" rel="noopener noreferrer" class="github-icon">
${this.icons.github}
</a>
<a href="https://x.com/hasanbeder" target="_blank" rel="noopener noreferrer">
${this.icons.twitter}
</a>
</div>
<button class="M3Unator-close">${this.icons.close}</button>
</div>
</div>
<div class="info-modal">
<div class="info-modal-content">
<button class="info-close">${this.icons.close}</button>
<div class="info-section">
<h3>About M3Unator</h3>
<p>M3Unator is your smart playlist creator that transforms any web directory into organized media playlists. Whether you have a collection of movies, TV shows, music, or mixed media, M3Unator helps you create perfect M3U playlists with just a few clicks.</p>
</div>
<div class="info-section">
<h3>Media Support</h3>
<p>
<strong>Video:</strong> All major formats including MP4, MKV, AVI, WebM, MOV, FLV, WMV, TS, and more<br>
<strong>Audio:</strong> Wide range of formats like MP3, WAV, FLAC, M4A, AAC, OGG, and others
</p>
</div>
<div class="info-section">
<h3>Smart Features</h3>
<p>
- Intelligent directory scanning with customizable depth<br>
- Automatic media type detection and filtering<br>
- Real-time progress tracking and detailed logs<br>
- Pause, resume, and cancel operations anytime<br>
- Smart file sorting and organization<br>
- Compatible with all major media players
</p>
</div>
</div>
</div>
<div class="M3Unator-content">
<div class="M3Unator-input-row">
<div class="M3Unator-input-group">
<input type="text"
id="playlistName"
class="M3Unator-input"
placeholder="Playlist Name"
required
spellcheck="false"
autocomplete="off"
autocorrect="off"
autocapitalize="off">
</div>
<div class="M3Unator-input-group">
<div class="M3Unator-dropdown">
<button type="button" class="M3Unator-dropdown-button">
<span>M3U</span>
${this.icons.chevronDown}
</button>
<div class="M3Unator-dropdown-menu">
<div class="M3Unator-dropdown-item selected" data-value="m3u">M3U</div>
<div class="M3Unator-dropdown-item" data-value="m3u8">M3U8 (UTF-8)</div>
</div>
</div>
</div>
</div>
<div class="M3Unator-toggle-group">
${toggleButtons}
</div>
<div class="M3Unator-depth-controls">
<div class="M3Unator-radio-group">
<label class="M3Unator-radio">
<input type="radio" name="depthType" value="current" id="currentDepth">
<span class="radio-mark"></span>
<span class="radio-label">Current directory</span>
</label>
<label class="M3Unator-radio">
<input type="radio" name="depthType" value="custom" id="customDepth">
<span class="radio-mark"></span>
<span class="radio-label">Custom depth:</span>
<input type="number"
id="maxDepth"
value="1"
min="1"
max="99"
class="M3Unator-depth-input"
title="Subdirectory scan depth"
style="width: 64px;"
inputmode="numeric"
pattern="[0-9]*">
</label>
</div>
</div>
<button class="M3Unator-button" id="generateBtn">
${this.icons.download}
<span>Create Playlist</span>
</button>
<div class="M3Unator-controls">
${controlButtons}
</div>
<div class="M3Unator-stats-bar">
<div class="M3Unator-stats">
${statsItems}
</div>
</div>
<div class="M3Unator-log-container">
<button class="M3Unator-log-toggle">
<div class="toggle-text">
${this.icons.logToggle}
<span>Log Messages</span>
</div>
<span class="M3Unator-log-counter">0</span>
</button>
<div id="scanLog" class="M3Unator-log collapsed"></div>
</div>
</div>
<style>
.M3Unator-content {
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.M3Unator-input-row {
display: flex;
gap: 0.75rem;
margin-bottom: 0;
}
.M3Unator-toggle-group {
margin: 0;
display: flex;
gap: 0.75rem;
justify-content: center;
background: rgba(30, 30, 46, 0.4);
padding: 0.75rem;
border-radius: 12px;
backdrop-filter: blur(8px);
}
.M3Unator-button {
margin: 0;
height: 42px;
}
.M3Unator-controls {
margin: 0;
display: none;
gap: 0.75rem;
justify-content: center;
}
.M3Unator-stats-bar {
margin: 0;
padding: 0.5rem;
background: rgba(30, 30, 46, 0.5);
border: 1px solid #313244;
border-radius: 8px;
display: none;
}
.M3Unator-log {
margin-top: 0.75rem;
max-height: calc(100vh - 70vh);
font-size: 0.8125rem;
line-height: 1.4;
}
.M3Unator-header {
padding: 0.75rem 1rem;
}
.M3Unator-toggle-container span {
width: 48px;
height: 48px;
}
.M3Unator-depth-controls {
padding: 0.75rem;
margin-top: 0.75rem;
}
.M3Unator-radio-group {
padding: 0.5rem;
}
.M3Unator-popup {
max-height: 85vh;
display: flex;
flex-direction: column;
}
.M3Unator-header {
flex-shrink: 0;
}
.M3Unator-content {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #cba6f7 #1e1e2e;
}
.M3Unator-content::-webkit-scrollbar {
width: 8px;
}
.M3Unator-content::-webkit-scrollbar-track {
background: #1e1e2e;
border-radius: 4px;
}
.M3Unator-content::-webkit-scrollbar-thumb {
background: #cba6f7;
border-radius: 4px;
}
.M3Unator-content::-webkit-scrollbar-thumb:hover {
background: #f5c2e7;
}
.M3Unator-depth-controls {
padding: 0.75rem;
margin: 0;
background: rgba(30, 30, 46, 0.4);
border-radius: 12px;
backdrop-filter: blur(8px);
}
.M3Unator-radio-group {
padding: 0.5rem;
background: rgba(30, 30, 46, 0.6);
border-radius: 8px;
}
</style>
</div>
`;
document.body.appendChild(container);
const launcher = document.createElement('button');
launcher.className = 'M3Unator-launcher';
launcher.innerHTML = `
${this.icons.video}
<span>M3Unator</span>
`;
document.body.appendChild(launcher);
const popup = container.querySelector('.M3Unator-popup');
const header = container.querySelector('.M3Unator-header');
this.makeDraggable(popup, header);
const statsBar = container.querySelector('.M3Unator-stats-bar');
if (statsBar) {
statsBar.style.display = 'block';
}
this.domElements = {
container,
popup: container.querySelector('.M3Unator-popup'),
header: container.querySelector('.M3Unator-header'),
closeBtn: container.querySelector('.M3Unator-close'),
generateBtn: container.querySelector('#generateBtn'),
playlistInput: container.querySelector('#playlistName'),
includeVideo: container.querySelector('#includeVideo'),
includeAudio: container.querySelector('#includeAudio'),
recursiveSearch: container.querySelector('#recursiveSearch'),
controls: container.querySelector('.M3Unator-controls'),
scanLog: container.querySelector('#scanLog'),
statsBar: container.querySelector('.M3Unator-stats-bar'),
dropdown: container.querySelector('.M3Unator-dropdown'),
launcher,
stats: {
totalFiles: container.querySelector('#totalFiles'),
videoFiles: container.querySelector('#videoFiles'),
audioFiles: container.querySelector('#audioFiles'),
directories: container.querySelector('#directories'),
depthLevel: container.querySelector('#depthLevel'),
errors: container.querySelector('#errors')
},
depthControls: container.querySelector('.M3Unator-depth-controls'),
currentDepth: container.querySelector('#currentDepth'),
customDepth: container.querySelector('#customDepth'),
maxDepth: container.querySelector('#maxDepth'),
logToggle: container.querySelector('.M3Unator-log-toggle'),
logCounter: container.querySelector('.M3Unator-log-counter'),
};
launcher.onclick = () => {
this.domElements.container.style.display = 'grid';
const popup = this.domElements.popup;
const rect = popup.getBoundingClientRect();
const centerX = (window.innerWidth - rect.width) / 2;
const centerY = (window.innerHeight - rect.height) / 2;
popup.style.left = `${centerX}px`;
popup.style.top = `${centerY}px`;
};
this.domElements.closeBtn.onclick = () => {
this.state.isGenerating = false;
this.state.isPaused = false;
this.reset({ isCancelled: true });
this.domElements.container.style.display = 'none';
this.showToast('Operation cancelled', 'warning');
};
this.setupPopupHandlers();
this.updateCounter(0);
this.domElements.logToggle.addEventListener('click', () => {
const log = this.domElements.scanLog;
const toggle = this.domElements.logToggle;
if (log.classList.contains('expanded')) {
log.classList.remove('expanded');
toggle.classList.remove('active');
} else {
log.classList.add('expanded');
toggle.classList.add('active');
log.scrollTop = log.scrollHeight;
}
});
this.domElements.scanLog.classList.remove('expanded');
this.domElements.logToggle.classList.remove('active');
this.logCount = 0;
}
updateStyles() {
GM_addStyle(`
.M3Unator-toggle-container {
@extend .M3Unator-toggle-base;
}
.M3Unator-control-btn {
@extend .M3Unator-control-base;
}
.M3Unator-stat {
@extend .M3Unator-stat-base;
}
.M3Unator-toggle-container span {
@extend .M3Unator-icon-base;
background: #1e1e2e;
border: 2px solid #45475a;
border-radius: 16px;
}
.M3Unator-control-btn.pause {
border-color: #fab387;
color: #fab387;
}
.M3Unator-control-btn.resume {
border-color: #94e2d5;
color: #94e2d5;
}
.M3Unator-control-btn.cancel {
border-color: #f38ba8;
color: #f38ba8;
}
`);
}
makeDraggable(element, handle) {
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
const centerWindow = () => {
const rect = element.getBoundingClientRect();
const centerX = (window.innerWidth - rect.width) / 2;
const centerY = (window.innerHeight - rect.height) / 2;
element.style.left = `${centerX}px`;
element.style.top = `${centerY}px`;
xOffset = centerX;
yOffset = centerY;
element.style.transform = 'none';
};
centerWindow();
const getPosition = (e) => {
return {
x: e.type.includes('touch') ? e.touches[0].clientX : e.clientX,
y: e.type.includes('touch') ? e.touches[0].clientY : e.clientY
};
};
const dragStart = (e) => {
if (e.target === handle || handle.contains(e.target)) {
e.preventDefault();
const pos = getPosition(e);
isDragging = true;
const rect = element.getBoundingClientRect();
xOffset = rect.left;
yOffset = rect.top;
initialX = pos.x - xOffset;
initialY = pos.y - yOffset;
handle.style.cursor = 'grabbing';
}
};
const drag = (e) => {
if (isDragging) {
e.preventDefault();
const pos = getPosition(e);
currentX = pos.x - initialX;
currentY = pos.y - initialY;
const rect = element.getBoundingClientRect();
const maxX = window.innerWidth - rect.width;
const maxY = window.innerHeight - rect.height;
currentX = Math.min(Math.max(0, currentX), maxX);
currentY = Math.min(Math.max(0, currentY), maxY);
element.style.left = `${currentX}px`;
element.style.top = `${currentY}px`;
xOffset = currentX;
yOffset = currentY;
}
};
const dragEnd = () => {
if (isDragging) {
isDragging = false;
handle.style.cursor = 'grab';
}
};
handle.addEventListener('mousedown', dragStart);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd);
handle.addEventListener('touchstart', dragStart, { passive: false });
document.addEventListener('touchmove', drag, { passive: false });
document.addEventListener('touchend', dragEnd);
window.addEventListener('resize', () => {
if (!isDragging) {
centerWindow();
}
});
handle.style.cursor = 'grab';
handle.style.userSelect = 'none';
handle.style.touchAction = 'none';
element.style.position = 'fixed';
element.style.margin = '0';
element.style.touchAction = 'none';
element.style.transition = 'none';
}
showToast(message, type = 'success', duration = 3000) {
let toastContainer = document.querySelector('.M3Unator-toast-container');
if (!toastContainer) {
toastContainer = document.createElement('div');
toastContainer.className = 'M3Unator-toast-container';
document.body.appendChild(toastContainer);
}
while (toastContainer.firstChild) {
toastContainer.removeChild(toastContainer.firstChild);
}
const toast = document.createElement('div');
toast.className = `M3Unator-toast ${type}`;
toast.innerHTML = `${this.icons[type]}<span>${message}</span>`;
toastContainer.appendChild(toast);
setTimeout(() => {
toast.classList.add('removing');
setTimeout(() => {
if (toast.parentNode === toastContainer) {
toastContainer.removeChild(toast);
}
if (toastContainer.children.length === 0) {
document.body.removeChild(toastContainer);
}
}, 300);
}, duration);
}
setupPopupHandlers() {
const generateBtn = this.domElements.generateBtn;
const playlistInput = this.domElements.playlistInput;
const includeVideo = this.domElements.includeVideo;
const includeAudio = this.domElements.includeAudio;
const recursiveSearch = this.domElements.recursiveSearch;
const controls = this.domElements.controls;
const dropdown = this.domElements.dropdown;
const dropdownButton = dropdown.querySelector('.M3Unator-dropdown-button');
const dropdownItems = dropdown.querySelectorAll('.M3Unator-dropdown-item');
const controlButtons = controls.querySelectorAll('.M3Unator-control-btn');
const pauseBtn = controlButtons[0];
const resumeBtn = controlButtons[1];
const cancelBtn = controlButtons[2];
dropdownButton.addEventListener('click', () => {
dropdown.classList.toggle('active');
});
document.addEventListener('click', (e) => {
if (!dropdown.contains(e.target)) {
dropdown.classList.remove('active');
}
});
dropdownItems.forEach(item => {
item.addEventListener('click', () => {
dropdownItems.forEach(i => i.classList.remove('selected'));
item.classList.add('selected');
dropdownButton.querySelector('span').textContent = item.textContent;
this.state.selectedFormat = item.dataset.value;
dropdown.classList.remove('active');
});
});
recursiveSearch.checked = true;
this.state.recursiveSearch = true;
includeVideo.checked = true;
includeAudio.checked = true;
this.state.includeVideo = true;
this.state.includeAudio = true;
includeVideo.addEventListener('change', (e) => {
this.state.includeVideo = e.target.checked;
this.addLogEntry(
e.target.checked ?
'Video files will be included' :
'Video files will not be included',
'info'
);
});
includeAudio.addEventListener('change', (e) => {
this.state.includeAudio = e.target.checked;
this.addLogEntry(
e.target.checked ?
'Audio files will be included' :
'Audio files will not be included',
'info'
);
});
const currentDepth = this.domElements.currentDepth;
const customDepth = this.domElements.customDepth;
const maxDepth = this.domElements.maxDepth;
const depthControls = this.domElements.depthControls;
depthControls.style.display = 'none';
depthControls.classList.remove('active');
this.state.maxDepth = -1;
currentDepth.checked = true;
customDepth.checked = false;
maxDepth.disabled = true;
maxDepth.value = '1';
recursiveSearch.addEventListener('change', (e) => {
if (!e.target.checked) {
depthControls.style.display = 'block';
depthControls.classList.add('active');
currentDepth.checked = true;
customDepth.checked = false;
maxDepth.disabled = true;
this.state.maxDepth = 0;
this.addLogEntry('Directory scanning disabled, only current directory will be scanned', 'info');
} else {
depthControls.style.display = 'none';
depthControls.classList.remove('active');
this.state.maxDepth = -1;
this.state.recursiveSearch = true;
this.addLogEntry('Directory scanning active, all directories will be scanned', 'info');
}
});
this.domElements.currentDepth.addEventListener('change', (e) => {
if (e.target.checked && !recursiveSearch.checked) {
this.state.maxDepth = 0;
this.domElements.maxDepth.disabled = true;
this.addLogEntry('Only current directory will be scanned', 'info');
}
});
this.domElements.customDepth.addEventListener('change', (e) => {
if (e.target.checked && !recursiveSearch.checked) {
const depthValue = parseInt(this.domElements.maxDepth.value) || 1;
this.state.maxDepth = depthValue;
this.domElements.maxDepth.disabled = false;
this.addLogEntry(
`Directory scanning depth: ${depthValue} ` +
`(current directory + ${depthValue} sublevels)`,
'info'
);
}
});
this.domElements.maxDepth.addEventListener('input', (e) => {
if (this.domElements.customDepth.checked && !recursiveSearch.checked) {
const value = Math.min(99, Math.max(1, parseInt(e.target.value) || 1));
e.target.value = value;
this.state.maxDepth = value;
this.addLogEntry(
`Directory scanning depth updated: ${value} ` +
`(current directory + ${value} sublevels)`,
'info'
);
}
});
pauseBtn.addEventListener('click', () => {
this.state.isPaused = true;
pauseBtn.style.display = 'none';
resumeBtn.style.display = 'flex';
generateBtn.innerHTML = `
<div class="M3Unator-spinner" style="animation-play-state: paused;"></div>
<span>Scan paused</span>
`;
this.showToast('Scan paused', 'warning');
this.addLogEntry('Scan paused...', 'warning');
});
resumeBtn.addEventListener('click', () => {
this.state.isPaused = false;
resumeBtn.style.display = 'none';
pauseBtn.style.display = 'flex';
generateBtn.innerHTML = `
<div class="M3Unator-spinner"></div>
<span>Creating...</span>
`;
this.showToast('Scan in progress', 'success');
this.addLogEntry('Scan in progress...', 'success');
});
cancelBtn.addEventListener('click', () => {
this.state.isGenerating = false;
this.state.isPaused = false;
setTimeout(() => {
this.reset({ isCancelled: true, enableToggles: true });
this.showToast('Scan cancelled', 'warning');
}, 100);
});
generateBtn.addEventListener('click', async () => {
const playlistName = this.sanitizeInput(playlistInput.value.trim());
if (!playlistName) {
this.showToast('Please enter a valid playlist name', 'warning');
return;
}
if (!this.state.includeVideo && !this.state.includeAudio) {
this.showToast('Please select at least one media type', 'warning');
return;
}
try {
this.entries = [];
this.seenUrls.clear();
this.logCount = 0;
if (this.domElements.scanLog) {
this.domElements.scanLog.innerHTML = '';
}
if (this.domElements.logCounter) {
this.domElements.logCounter.textContent = '0';
}
this.state.stats = JSON.parse(JSON.stringify(this.initialStats));
this.state.isGenerating = true;
generateBtn.disabled = true;
generateBtn.innerHTML = `
<div class="M3Unator-spinner"></div>
<span>Creating...</span>
`;
this.domElements.includeVideo.disabled = true;
this.domElements.includeAudio.disabled = true;
this.domElements.recursiveSearch.disabled = true;
this.domElements.currentDepth.disabled = true;
this.domElements.customDepth.disabled = true;
this.domElements.maxDepth.disabled = true;
controls.style.display = 'flex';
controls.classList.add('active');
if (pauseBtn) {
pauseBtn.style.display = 'flex';
resumeBtn.style.display = 'none';
cancelBtn.style.display = 'flex';
}
this.domElements.statsBar.style.display = 'block';
this.domElements.statsBar.classList.add('active');
const entries = await this.scanDirectory(window.location.href, '', 0);
if (!this.state.isGenerating) {
return;
}
if (entries.length === 0) {
this.showToast('No media files found', 'error');
this.reset({ isCancelled: true });
return;
}
this.addLogEntry(`Total ${entries.length} files found.`, 'success');
this.updateCounter(entries.length);
const content = this.createPlaylist(entries);
const fileName = `${playlistName}.${this.state.selectedFormat}`;
const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
this.reset({ keepLogs: true, keepUI: true, enableToggles: true });
} catch (error) {
console.error('Error creating playlist:', error);
this.addLogEntry(`Error: ${error.message}`, 'error');
this.showToast('Error creating playlist', 'error');
this.reset({ isCancelled: true });
}
});
}
reset(options = {}) {
const {
isCancelled = false,
uiOnly = false,
keepLogs = false,
keepUI = false,
enableToggles = false,
wasGenerating = this.state.isGenerating
} = options;
this.state.isGenerating = false;
this.state.isPaused = false;
if (!uiOnly) {
this.entries = [];
this.seenUrls.clear();
if (!keepLogs) {
this.logCount = 0;
if (this.domElements.scanLog) {
this.domElements.scanLog.innerHTML = '';
}
if (this.domElements.logCounter) {
this.domElements.logCounter.textContent = '0';
}
}
if (wasGenerating && !isCancelled) {
const stats = this.domElements.stats;
const summary = [
`Scan completed:`,
`• Video files: ${stats.videoFiles.textContent}`,
`• Audio files: ${stats.audioFiles.textContent}`,
`• Scanned directories: ${stats.directories.textContent}`,
`• Maximum depth: ${stats.depthLevel.textContent}`,
stats.errors.textContent > 0 ? `• Errors: ${stats.errors.textContent} (${this.state.stats.errors.skipped} skipped)` : null
].filter(Boolean).join('\n');
this.addLogEntry(summary, 'final');
}
}
const elements = this.domElements;
if (elements.generateBtn) {
elements.generateBtn.disabled = false;
elements.generateBtn.innerHTML = `${this.icons.download}<span>Create Playlist</span>`;
}
if (elements.controls) {
elements.controls.style.display = 'none';
elements.controls.classList.remove('active');
const pauseBtn = elements.controls.querySelector('.M3Unator-control-btn.pause');
const resumeBtn = elements.controls.querySelector('.M3Unator-control-btn.resume');
const cancelBtn = elements.controls.querySelector('.M3Unator-control-btn.cancel');
if (pauseBtn) pauseBtn.style.display = 'none';
if (resumeBtn) resumeBtn.style.display = 'none';
if (cancelBtn) cancelBtn.style.display = 'none';
}
if (enableToggles) {
if (elements.includeVideo) elements.includeVideo.disabled = false;
if (elements.includeAudio) elements.includeAudio.disabled = false;
if (elements.recursiveSearch) elements.recursiveSearch.disabled = false;
if (elements.currentDepth) elements.currentDepth.disabled = false;
if (elements.customDepth) elements.customDepth.disabled = false;
if (elements.maxDepth) elements.maxDepth.disabled = elements.customDepth ? !elements.customDepth.checked : true;
}
if (uiOnly) return;
if (isCancelled) {
this.state.stats = JSON.parse(JSON.stringify(this.initialStats));
if (!keepLogs) {
if (elements.scanLog) {
elements.scanLog.innerHTML = '';
elements.scanLog.classList.add('collapsed');
}
if (elements.logCounter) {
elements.logCounter.textContent = '0';
}
if (elements.logToggle) {
elements.logToggle.classList.remove('active');
}
if (this.domElements.stats) {
Object.entries(this.domElements.stats).forEach(([key, element]) => {
if (element) {
element.textContent = '0';
const statContainer = element.closest('.M3Unator-stat');
if (statContainer) {
statContainer.style.opacity = '0.5';
if (key === 'depthLevel') {
statContainer.dataset.progress = '';
statContainer.title = 'Depth Level: 0';
}
}
}
});
}
}
}
if (elements.recursiveSearch) {
elements.recursiveSearch.checked = true;
this.state.recursiveSearch = true;
this.state.maxDepth = -1;
}
if (elements.currentDepth) {
elements.currentDepth.checked = false;
}
if (elements.customDepth) {
elements.customDepth.checked = false;
}
if (elements.maxDepth) {
elements.maxDepth.disabled = true;
elements.maxDepth.value = '1';
}
if (elements.depthControls) {
elements.depthControls.classList.remove('active');
}
}
handleError(error, context = '') {
let userMessage = 'An error occurred';
let logMessage = error.message;
let type = 'error';
switch (true) {
case error.name === 'AbortError':
userMessage = 'Server not responding, operation timed out';
logMessage = `Timeout: ${context}`;
type = 'warning';
break;
case error.message.includes('HTTP error'):
const status = error.message.match(/\d+/)?.[0];
switch (status) {
case '403':
userMessage = 'Access denied to this directory';
break;
case '404':
userMessage = 'Directory or file not found';
break;
case '429':
userMessage = 'Too many requests, please wait a while';
break;
case '500':
case '502':
case '503':
userMessage = 'Server is currently unable to respond, please try again later';
break;
default:
userMessage = 'Error communicating with server';
}
logMessage = `${error.message} (${context})`;
break;
case error.message.includes('decode'):
userMessage = 'Filename or path could not be read';
logMessage = `Decode error: ${context} - ${error.message}`;
type = 'warning';
break;
case error.message.includes('NetworkError'):
userMessage = 'Network connection error, please check your connection';
logMessage = `Network error: ${context}`;
break;
case error.message.includes('SecurityError'):
userMessage = 'Operation not allowed due to security restrictions';
logMessage = `Security error: ${context}`;
break;
default:
userMessage = 'Unexpected error occurred';
logMessage = `${error.name}: ${error.message} (${context})`;
}
console.error(`[${context}]`, error);
this.showToast(userMessage, type);
this.addLogEntry(logMessage, type);
this.state.stats.errors.total++;
}
async fetchWithRetry(url, options = {}) {
let response;
let retryCount = 0;
const maxRetries = this.state.retryCount;
const baseTimeout = 1000;
const maxTimeout = 10000;
while (retryCount <= maxRetries) {
try {
const controller = new AbortController();
const currentTimeout = Math.min(
maxTimeout,
baseTimeout * Math.pow(2, retryCount) * (0.5 + Math.random())
);
const timeoutId = setTimeout(() => controller.abort(), currentTimeout);
response = await fetch(url, {
...options,
signal: controller.signal,
headers: {
'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
'Accept-Charset': 'utf-8',
'Accept-Language': 'en-US,en;q=0.9,tr-TR;q=0.8,tr;q=0.7'
}
});
clearTimeout(timeoutId);
if (response.ok) {
const contentType = response.headers.get('content-type');
const charset = contentType && contentType.includes('charset=')
? contentType.split('charset=')[1].toLowerCase()
: 'utf-8';
const buffer = await response.arrayBuffer();
const decoder = new TextDecoder(charset);
response.decodedText = decoder.decode(buffer);
return response;
}
throw new Error(`HTTP error! Status: ${response.status}`);
} catch (error) {
retryCount++;
this.handleError(error, `URL: ${url}`);
if (retryCount > maxRetries) {
this.addLogEntry(
`Maximum number of attempts reached (${maxRetries}), skipping directory: ${url}`,
'error'
);
this.state.stats.errors.skipped++;
throw error;
}
const backoffDelay = Math.min(
maxTimeout,
baseTimeout * Math.pow(2, retryCount - 1) * (0.5 + Math.random())
);
this.addLogEntry(
`Retrying (${retryCount}/${maxRetries}), waiting for ${(backoffDelay/1000).toFixed(1)} seconds...`,
'warning'
);
await new Promise(resolve => setTimeout(resolve, backoffDelay));
}
}
}
sanitizeInput(input) {
if (!input || typeof input !== 'string') {
return '';
}
const sanitized = input
.replace(/[<>:"\/\\|?*\x00-\x1F]/g, '')
.trim()
.replace(/[\x00-\x1F\x7F]/g, '')
.replace(/[\u200B-\u200D\uFEFF]/g, '')
.replace(/[^\w\s\-_.()[\]{}#@!$%^&+=]/g, '');
if (!sanitized) {
return 'playlist';
}
if (sanitized.length > 255) {
return sanitized.slice(0, 255);
}
return sanitized;
}
decodeString(str, type = 'both') {
if (!str) return str;
try {
let decoded = str;
if (type === 'html' || type === 'both') {
decoded = decoded.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/'/g, "'")
.replace(///g, "/");
}
if (type === 'url' || type === 'both') {
try {
decoded = decodeURIComponent(decoded);
} catch (e) {
decoded = decoded.replace(/%([0-9A-F]{2})/gi, (match, hex) => {
try {
return String.fromCharCode(parseInt(hex, 16));
} catch {
return match;
}
});
}
}
return decoded;
} catch (error) {
console.warn('Decode error:', error);
return str;
}
}
extractFileInfo(path) {
try {
const decodedPath = this.decodeString(path);
const parts = decodedPath.split('/');
const fileName = parts.pop() || '';
const dirPath = parts.join('/');
return {
fileName,
dirPath,
original: {
fileName: path.split('/').pop() || '',
dirPath: path.split('/').slice(0, -1).join('/')
}
};
} catch (error) {
this.handleError(error, `Path decode error: ${path}`);
const parts = path.split('/');
return {
fileName: parts.pop() || '',
dirPath: parts.join('/'),
original: {
fileName: parts.pop() || '',
dirPath: parts.join('/')
}
};
}
}
normalizeUrl(url) {
let normalized = url.replace(/([^:]\/)\/+/g, "$1");
return normalized.endsWith('/') ? normalized : normalized + '/';
}
isMediaFile(fileName, type) {
const lowerFileName = fileName.toLowerCase();
return type === 'video'
? this.videoFormats.some(ext => lowerFileName.endsWith(ext))
: this.audioFormats.some(ext => lowerFileName.endsWith(ext));
}
resetCurrentStats() {
this.state.stats.files.video.current = 0;
this.state.stats.files.audio.current = 0;
}
updateFileStats(type) {
this.state.stats.files[type].total++;
this.state.stats.files[type].current++;
}
getCurrentStatsText() {
const { video, audio } = this.state.stats.files;
const details = [];
if (video.current > 0) details.push(`${video.current} video`);
if (audio.current > 0) details.push(`${audio.current} audio`);
return details.join(' and ');
}
async scanDirectory(url, currentPath = '', depth = 0) {
try {
this.resetCurrentStats();
if (!this.state.isGenerating || this.entries.length >= this.state.maxEntries) {
return this.entries;
}
while (this.state.isPaused && this.state.isGenerating) {
await new Promise(resolve => setTimeout(resolve, 100));
}
const normalizedUrl = this.normalizeUrl(url);
if (depth > this.state.stats.directories.depth) {
this.state.stats.directories.depth = depth;
}
this.state.stats.directories.total++;
this.addLogEntry(`Scanning directory (${depth}. level): ${normalizedUrl}`);
if (this.seenUrls.has(normalizedUrl)) {
this.addLogEntry(`Directory already scanned: ${normalizedUrl}`);
return this.entries;
}
this.seenUrls.add(normalizedUrl);
if (this.seenUrls.size > this.state.maxSeenUrls) {
const keepCount = Math.floor(this.state.maxSeenUrls * 0.75);
const urlsArray = Array.from(this.seenUrls);
const keepUrls = urlsArray.slice(-keepCount);
this.seenUrls = new Set(keepUrls);
this.addLogEntry(
`Cache cleared (${urlsArray.length} -> ${keepUrls.length})`,
'info'
);
}
let response;
try {
response = await this.fetchWithRetry(normalizedUrl);
} catch (error) {
return this.entries;
}
const html = response.decodedText;
const hrefRegex = /href="([^"]+)"/gi;
const matches = html.matchAll(hrefRegex);
const hrefs = Array.from(matches, m => m[1]).filter(href =>
href &&
!href.startsWith('?') &&
!href.startsWith('/') &&
href !== '../' &&
!href.includes('Parent Directory')
);
let totalFilesInCurrentDir = 0;
for (const href of hrefs) {
if (!this.state.isGenerating || this.entries.length >= this.state.maxEntries) break;
try {
const decodedHref = this.decodeString(href);
const fullUrl = new URL(decodedHref, normalizedUrl).toString();
const { fileName } = this.extractFileInfo(decodedHref);
const fullPath = currentPath ? `${currentPath}/${fileName}` : fileName;
if (href.endsWith('/')) {
const shouldScanSubdir =
this.state.maxDepth === -1 ||
(this.state.maxDepth > 0 && depth < this.state.maxDepth);
if (shouldScanSubdir) {
this.addLogEntry(`Entering directory: ${fullPath}`);
await this.scanDirectory(fullUrl, fullPath, depth + 1);
}
} else {
totalFilesInCurrentDir++;
this.state.stats.totalFiles = (this.state.stats.totalFiles || 0) + 1;
const isVideo = this.isMediaFile(fileName, 'video');
const isAudio = this.isMediaFile(fileName, 'audio');
if ((isVideo && this.state.includeVideo) || (isAudio && this.state.includeAudio)) {
if (isVideo && this.state.includeVideo) {
this.updateFileStats('video');
}
if (isAudio && this.state.includeAudio) {
this.updateFileStats('audio');
}
this.entries.push({
title: fullPath,
url: fullUrl
});
}
}
this.updateCounter(this.state.stats.totalFiles);
} catch (error) {
console.error('Error processing URL:', error);
this.state.stats.errors.total++;
continue;
}
}
if (totalFilesInCurrentDir > 0) {
this.addLogEntry(
`"${currentPath || normalizedUrl}" directory contains ${totalFilesInCurrentDir} files`,
'info'
);
}
const statsText = this.getCurrentStatsText();
if (statsText) {
this.addLogEntry(
`From these, ${statsText} files were added to the playlist`,
'success'
);
}
return this.entries;
} catch (error) {
this.state.stats.errors.total++;
this.addLogEntry(`Scan error (${currentPath || url}): ${error.message}`, 'error');
return this.entries;
}
}
createPlaylist(entries) {
let content = '#EXTM3U\n';
const decodedEntries = entries.map(entry => {
try {
let title = this.decodeString(entry.title);
const depth = (title.match(/\//g) || []).length;
const isVideo = this.videoFormats.some(ext => title.toLowerCase().endsWith(ext));
const isAudio = this.audioFormats.some(ext => title.toLowerCase().endsWith(ext));
return {
...entry,
decodedTitle: title,
depth: depth,
isVideo: isVideo,
isAudio: isAudio
};
} catch (error) {
return {
...entry,
decodedTitle: entry.title,
depth: 0,
isVideo: false,
isAudio: false
};
}
});
const videoEntries = decodedEntries.filter(entry => entry.isVideo);
const audioEntries = decodedEntries.filter(entry => entry.isAudio);
const apacheSort = (a, b) => {
if (a.depth !== b.depth) {
return a.depth - b.depth;
}
const aStartsWithNumber = /^\d/.test(a.decodedTitle);
const bStartsWithNumber = /^\d/.test(b.decodedTitle);
if (aStartsWithNumber !== bStartsWithNumber) {
return aStartsWithNumber ? -1 : 1;
}
return a.decodedTitle.localeCompare(b.decodedTitle, undefined, {
numeric: true,
sensitivity: 'base'
});
};
const sortedVideoEntries = videoEntries.sort(apacheSort);
const sortedAudioEntries = audioEntries.sort(apacheSort);
const sortedEntries = [...sortedVideoEntries, ...sortedAudioEntries];
sortedEntries.forEach(entry => {
content += `#EXTINF:-1,${entry.decodedTitle}\n${entry.url}\n`;
});
return content;
}
addLogEntry(message, type = '') {
if ((this.state.isPaused || !this.state.isGenerating) && type !== 'final') {
return;
}
const scanLog = this.domElements.scanLog;
const logCounter = this.domElements.logCounter;
this.logCount++;
if (logCounter) {
logCounter.textContent = this.logCount;
}
let decodedMessage = message;
try {
if (message.includes('http')) {
const urlRegex = /(https?:\/\/[^\s]+)/g;
decodedMessage = message.replace(urlRegex, (url) => {
try {
return decodeURIComponent(url);
} catch (e) {
return url;
}
});
}
} catch (error) {
console.warn('Decode error:', error);
}
const entry = document.createElement('div');
entry.className = `M3Unator-log-entry ${type}`;
const timestamp = new Date().toLocaleTimeString();
entry.innerHTML = `<span class="M3Unator-log-time">[${timestamp}]</span> ${decodedMessage}`;
scanLog.appendChild(entry);
scanLog.scrollTop = scanLog.scrollHeight;
}
updateCounter(count) {
if (!this.domElements.stats || !this.domElements.statsBar) {
return;
}
const stats = this.state.stats;
const elements = this.domElements.stats;
const statsBar = this.domElements.statsBar;
statsBar.style.display = 'block';
const updates = {
'totalFiles': count,
'videoFiles': stats.files.video.total,
'audioFiles': stats.files.audio.total,
'directories': stats.directories.total,
'depthLevel': stats.directories.depth,
'errors': stats.errors.total
};
Object.entries(updates).forEach(([key, value]) => {
const element = elements[key];
if (element) {
element.textContent = value;
const statContainer = element.closest('.M3Unator-stat');
if (statContainer) {
statContainer.style.opacity = value > 0 ? '1' : '0.5';
if (key === 'depthLevel') {
const maxDepth = this.state.maxDepth || 0;
if (maxDepth > 0) {
const progress = (value / maxDepth) * 100;
statContainer.dataset.progress =
progress >= 100 ? 'high' :
progress >= 75 ? 'medium' :
progress >= 50 ? 'low' : '';
statContainer.title = `Depth Level: ${value}/${maxDepth}`;
} else {
statContainer.dataset.progress = '';
statContainer.title = `Depth Level: ${value}`;
}
}
}
}
});
}
}
const generator = new PlaylistGenerator();
generator.init();
// Event listeners for info modal
document.querySelector('.info-link').addEventListener('click', () => {
document.querySelector('.info-modal').style.display = 'block';
});
document.querySelector('.info-close').addEventListener('click', () => {
document.querySelector('.info-modal').style.display = 'none';
});
window.addEventListener('click', (event) => {
const modal = document.querySelector('.info-modal');
if (event.target === modal) {
modal.style.display = 'none';
}
});
})();