Hugging Face's logo

Spaces:
Freefall
/
media-viewer-pro
Running

App Files Community
Freefall commited on
Commit
9bbf93e
·
verified ·
1 Parent(s): fbbb867

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +250 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Media Viewer Pro
3
- emoji: 💻
4
- colorFrom: pink
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: media-viewer-pro
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,250 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Media Viewer Pro</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .media-container {
11
+ transition: transform 0.3s ease;
12
+ transform-origin: 0 0;
13
+ }
14
+ .custom-scrollbar::-webkit-scrollbar {
15
+ width: 6px;
16
+ height: 6px;
17
+ }
18
+ .custom-scrollbar::-webkit-scrollbar-track {
19
+ background: #f1f1f1;
20
+ }
21
+ .custom-scrollbar::-webkit-scrollbar-thumb {
22
+ background: #888;
23
+ border-radius: 3px;
24
+ }
25
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
26
+ background: #555;
27
+ }
28
+ .thumbnail {
29
+ transition: all 0.2s ease;
30
+ }
31
+ .thumbnail:hover {
32
+ transform: scale(1.05);
33
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
34
+ }
35
+ .thumbnail.active {
36
+ border: 3px solid #3b82f6;
37
+ box-shadow: 0 0 0 2px white;
38
+ }
39
+ .tooltip {
40
+ position: relative;
41
+ }
42
+ .tooltip:before {
43
+ content: attr(data-tooltip);
44
+ position: absolute;
45
+ bottom: 100%;
46
+ left: 50%;
47
+ transform: translateX(-50%);
48
+ background: #333;
49
+ color: white;
50
+ padding: 4px 8px;
51
+ border-radius: 4px;
52
+ font-size: 12px;
53
+ white-space: nowrap;
54
+ opacity: 0;
55
+ visibility: hidden;
56
+ transition: all 0.2s ease;
57
+ }
58
+ .tooltip:hover:before {
59
+ opacity: 1;
60
+ visibility: visible;
61
+ bottom: calc(100% + 5px);
62
+ }
63
+ .dropdown {
64
+ position: relative;
65
+ display: inline-block;
66
+ }
67
+ .dropdown-content {
68
+ display: none;
69
+ position: absolute;
70
+ background-color: #f9f9f9;
71
+ min-width: 160px;
72
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
73
+ z-index: 1;
74
+ border-radius: 4px;
75
+ overflow: hidden;
76
+ }
77
+ .dropdown-content a {
78
+ color: black;
79
+ padding: 8px 12px;
80
+ text-decoration: none;
81
+ display: block;
82
+ font-size: 14px;
83
+ }
84
+ .dropdown-content a:hover {
85
+ background-color: #3b82f6;
86
+ color: white;
87
+ }
88
+ .dropdown:hover .dropdown-content {
89
+ display: block;
90
+ }
91
+ </style>
92
+ </head>
93
+ <body class="bg-gray-100 font-sans">
94
+ <div class="container mx-auto p-4 max-w-6xl">
95
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
96
+ <!-- Header -->
97
+ <div class="bg-gray-800 text-white p-4 flex justify-between items-center">
98
+ <h1 class="text-xl font-bold">Media Viewer Pro</h1>
99
+ <div class="flex space-x-2">
100
+ <div class="dropdown">
101
+ <button id="open-files" class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded tooltip" data-tooltip="Open Media">
102
+ <i class="fas fa-folder-open mr-1"></i> Open <i class="fas fa-caret-down ml-1"></i>
103
+ </button>
104
+ <div class="dropdown-content">
105
+ <a href="#" id="open-files-btn">Files</a>
106
+ <a href="#" id="open-folder-btn">Folder</a>
107
+ </div>
108
+ </div>
109
+ <input type="file" id="file-input" class="hidden" multiple accept="image/*,video/*">
110
+ <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple accept="image/*,video/*">
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Main Content -->
115
+ <div class="flex flex-col md:flex-row h-[70vh]">
116
+ <!-- Media Display Area -->
117
+ <div class="flex-1 relative overflow-hidden bg-black flex items-center justify-center">
118
+ <div id="media-display" class="w-full h-full flex items-center justify-center relative">
119
+ <div id="no-media" class="text-gray-400 text-center p-8">
120
+ <i class="fas fa-images text-5xl mb-4"></i>
121
+ <p class="text-xl">No media selected</p>
122
+ <p class="text-sm mt-2">Click "Open" to browse files or folders</p>
123
+ </div>
124
+
125
+ <div id="image-container" class="hidden absolute inset-0 overflow-auto custom-scrollbar">
126
+ <div id="image-wrapper" class="media-container">
127
+ <img id="current-image" class="max-w-full max-h-full" src="" alt="">
128
+ </div>
129
+ </div>
130
+
131
+ <div id="video-container" class="hidden relative w-full h-full">
132
+ <video id="current-video" class="max-w-full max-h-full" controls>
133
+ Your browser does not support the video tag.
134
+ </video>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Navigation Arrows -->
139
+ <button id="prev-btn" class="hidden absolute left-4 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-70">
140
+ <i class="fas fa-chevron-left text-xl"></i>
141
+ </button>
142
+ <button id="next-btn" class="hidden absolute right-4 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-70">
143
+ <i class="fas fa-chevron-right text-xl"></i>
144
+ </button>
145
+
146
+ <!-- Zoom Controls -->
147
+ <div id="zoom-controls" class="hidden absolute bottom-4 right-4 bg-black bg-opacity-50 text-white p-2 rounded-lg">
148
+ <button id="zoom-in" class="p-1 hover:bg-gray-700 rounded">
149
+ <i class="fas fa-search-plus"></i>
150
+ </button>
151
+ <div class="h-px bg-gray-500 my-1"></div>
152
+ <button id="zoom-out" class="p-1 hover:bg-gray-700 rounded">
153
+ <i class="fas fa-search-minus"></i>
154
+ </button>
155
+ <div class="h-px bg-gray-500 my-1"></div>
156
+ <button id="zoom-reset" class="p-1 hover:bg-gray-700 rounded">
157
+ <i class="fas fa-expand"></i>
158
+ </button>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Thumbnail Sidebar -->
163
+ <div id="thumbnail-sidebar" class="hidden w-full md:w-48 bg-gray-100 border-l border-gray-200 overflow-y-auto custom-scrollbar p-2">
164
+ <div id="thumbnail-container" class="grid grid-cols-2 md:grid-cols-1 gap-2">
165
+ <!-- Thumbnails will be added here -->
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Controls -->
171
+ <div class="bg-gray-200 p-4 border-t border-gray-300">
172
+ <div class="flex flex-wrap items-center justify-between gap-4">
173
+ <!-- Playback Controls -->
174
+ <div class="flex items-center space-x-2">
175
+ <button id="play-pause" class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 tooltip" data-tooltip="Play/Pause">
176
+ <i class="fas fa-play"></i>
177
+ </button>
178
+ <button id="stop" class="bg-gray-600 text-white p-2 rounded-full hover:bg-gray-700 tooltip" data-tooltip="Stop">
179
+ <i class="fas fa-stop"></i>
180
+ </button>
181
+ <button id="prev" class="bg-gray-600 text-white p-2 rounded-full hover:bg-gray-700 tooltip" data-tooltip="Previous">
182
+ <i class="fas fa-step-backward"></i>
183
+ </button>
184
+ <button id="next" class="bg-gray-600 text-white p-2 rounded-full hover:bg-gray-700 tooltip" data-tooltip="Next">
185
+ <i class="fas fa-step-forward"></i>
186
+ </button>
187
+ </div>
188
+
189
+ <!-- Slideshow Controls -->
190
+ <div class="flex items-center space-x-4">
191
+ <div class="flex items-center">
192
+ <span class="text-sm mr-2">Speed:</span>
193
+ <select id="slideshow-speed" class="bg-white border border-gray-300 rounded px-2 py-1 text-sm">
194
+ <option value="1000">1 sec</option>
195
+ <option value="2000" selected>2 sec</option>
196
+ <option value="3000">3 sec</option>
197
+ <option value="5000">5 sec</option>
198
+ <option value="10000">10 sec</option>
199
+ </select>
200
+ </div>
201
+ <button id="toggle-slideshow" class="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700 tooltip" data-tooltip="Start Slideshow">
202
+ <i class="fas fa-images mr-1"></i> Slideshow
203
+ </button>
204
+ </div>
205
+
206
+ <!-- Display Options -->
207
+ <div class="flex items-center space-x-4">
208
+ <div class="flex items-center">
209
+ <span class="text-sm mr-2">Size:</span>
210
+ <select id="image-size" class="bg-white border border-gray-300 rounded px-2 py-1 text-sm">
211
+ <option value="contain">Fit</option>
212
+ <option value="cover">Fill</option>
213
+ <option value="original">Original</option>
214
+ </select>
215
+ </div>
216
+ <button id="toggle-sidebar" class="bg-gray-600 text-white px-3 py-1 rounded hover:bg-gray-700 tooltip" data-tooltip="Toggle Thumbnails">
217
+ <i class="fas fa-th mr-1"></i> Thumbnails
218
+ </button>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Progress Bar -->
223
+ <div class="mt-4">
224
+ <div class="flex justify-between text-xs text-gray-600 mb-1">
225
+ <span id="current-index">0/0</span>
226
+ <span id="media-name"></span>
227
+ </div>
228
+ <div class="w-full bg-gray-300 rounded-full h-2">
229
+ <div id="progress-bar" class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <script>
237
+ document.addEventListener('DOMContentLoaded', function() {
238
+ // DOM Elements
239
+ const fileInput = document.getElementById('file-input');
240
+ const folderInput = document.getElementById('folder-input');
241
+ const openFilesBtn = document.getElementById('open-files-btn');
242
+ const openFolderBtn = document.getElementById('open-folder-btn');
243
+ const mediaDisplay = document.getElementById('media-display');
244
+ const noMedia = document.getElementById('no-media');
245
+ const imageContainer = document.getElementById('image-container');
246
+ const videoContainer = document.getElementById('video-container');
247
+ const currentImage = document.getElementById('current-image');
248
+ const currentVideo = document.getElementById('current-video');
249
+ const thumbnail
250
+ </html>