music-assistant-server
5.4 KB•HTML
swagger_ui.html
5.4 KB • 142 lines • xml
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Music Assistant API - Swagger UI</title>
7 <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/swagger-ui.css">
8 <style>
9 body {
10 margin: 0;
11 padding: 0;
12 }
13 </style>
14</head>
15<body>
16 <div id="swagger-ui"></div>
17
18 <script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js"></script>
19 <script src="https://unpkg.com/[email protected]/swagger-ui-standalone-preset.js"></script>
20 <script>
21 window.onload = function() {
22 const openapiUrl = window.location.origin + '/api-docs/openapi.json';
23
24 const ui = SwaggerUIBundle({
25 url: openapiUrl,
26 dom_id: '#swagger-ui',
27 deepLinking: true,
28 presets: [
29 SwaggerUIBundle.presets.apis,
30 SwaggerUIStandalonePreset
31 ],
32 plugins: [
33 SwaggerUIBundle.plugins.DownloadUrl
34 ],
35 layout: "StandaloneLayout",
36 defaultModelsExpandDepth: 3,
37 defaultModelExpandDepth: 3,
38 docExpansion: "list",
39 filter: true,
40 showRequestHeaders: true,
41 tryItOutEnabled: true,
42 persistAuthorization: true,
43 displayRequestDuration: true,
44 operationsSorter: "alpha",
45 tagsSorter: "alpha"
46 });
47
48 window.ui = ui;
49
50 // Handle deep linking to schemas after UI is loaded
51 // Swagger UI doesn't natively support schema deep linking, so we implement it manually
52 function scrollToSchema() {
53 const hash = window.location.hash;
54
55 // Check if we have a schema link (format: #/components/schemas/SchemaName or #model-SchemaName)
56 let schemaName = null;
57 if (hash.includes('/schemas/')) {
58 schemaName = hash.split('/schemas/')[1];
59 } else if (hash.startsWith('#model-')) {
60 schemaName = hash.substring(7); // Remove '#model-' prefix
61 }
62
63 if (!schemaName) {
64 return;
65 }
66
67 // Wait for models section to be rendered
68 const modelsSection = document.querySelector('.models, section.models, [class*="models"]');
69 if (!modelsSection) {
70 // Models section not rendered yet, try again
71 setTimeout(scrollToSchema, 200);
72 return;
73 }
74
75 // Look for the specific model by ID
76 const modelId = `model-${schemaName}`;
77 let modelElement = document.getElementById(modelId);
78
79 if (!modelElement) {
80 // Try alternative selectors
81 const allHeadings = document.querySelectorAll('.model-title, [class*="model"] .title');
82 for (const heading of allHeadings) {
83 if (heading.textContent.trim() === schemaName) {
84 modelElement = heading.closest('[id*="model"]') || heading.parentElement;
85 break;
86 }
87 }
88 }
89
90 if (modelElement) {
91 // Scroll to the model
92 modelElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
93
94 // Expand if collapsed
95 const toggleButton = modelElement.querySelector('button[aria-expanded="false"]');
96 if (toggleButton) {
97 toggleButton.click();
98 }
99
100 // Highlight temporarily
101 modelElement.style.transition = 'background-color 0.3s';
102 modelElement.style.backgroundColor = '#fff3cd';
103 setTimeout(() => {
104 modelElement.style.backgroundColor = '';
105 }, 2000);
106 }
107 }
108
109 // Use MutationObserver to detect when Swagger UI finishes rendering
110 const observer = new MutationObserver((mutations, obs) => {
111 const modelsSection = document.querySelector('.models, section.models, [class*="models"]');
112 if (modelsSection && window.location.hash) {
113 scrollToSchema();
114 obs.disconnect(); // Stop observing once we've found and scrolled
115 }
116 });
117
118 // Start observing
119 observer.observe(document.body, {
120 childList: true,
121 subtree: true
122 });
123
124 // Also try after a delay as fallback
125 setTimeout(() => {
126 if (window.location.hash) {
127 scrollToSchema();
128 }
129 observer.disconnect();
130 }, 3000);
131
132 // Listen for hash changes (when user clicks a schema link)
133 window.addEventListener('hashchange', () => {
134 if (window.location.hash.includes('schema') || window.location.hash.includes('model')) {
135 setTimeout(scrollToSchema, 100);
136 }
137 });
138 }
139 </script>
140</body>
141</html>
142