bucket load of things

4 files changed, 321 insertions, 19 deletions

diff --git a/templates/en/administration/manage_storage_buckets_bucket.html b/templates/en/administration/manage_storage_buckets_bucket.html
new file mode 100644
index 00000000..13ce36a5
--- /dev/null
+++ b/templates/en/administration/manage_storage_buckets_bucket.html
@@ -0,0 +1,257 @@
+{% extends 'shared/base.html' %}
+{% load static %}
+{% block head %}
+<link rel="stylesheet" href="{% static 'css/shared/directory.css' %}">
+{% endblock head %}
+{% block content %}
+<h2 style="margin: 8px 0;">Viewing Bucket: {{ bucket_name }}/{{ object_path }}</h2>
+<hr>
+<div class="bucket-navigation">
+    <button class="bucket-navigation-button" onclick="showCreateFolderForm()">Create Folder</button>
+    <button class="bucket-navigation-button" onclick="showUploadFileForm()">Upload File</button>
+</div>
+<div class="directory-viewer">
+    <div class="directory-content">
+        {% if up_url %}
+        <div class="folder-item" data-path="{{ up_url }}">
+        {% else %}
+        <div class="folder-item" data-path="{% url "administration:manage_storage_buckets" %}">
+        {% endif %}
+            <div class="folder-icon">
+                <img src="{% static 'images/core/icons/folder.png' %}" alt="Folder">
+                <div class="selection-overlay"></div>
+            </div>
+            <div class="folder-name">..</div>
+        </div>
+        {% for object in objects %}
+        {% if object.type == "file" and object.file_type != object.name %}
+        <div class="folder-item" data-path="https://cdn.rize.moe/{{ bucket_name }}/{{ object.path }}">
+        {% else %}
+        <div class="folder-item" data-path="{% url "administration:view_object_path" bucket_name=bucket_name object_path=object.path %}">
+        {% endif %}
+            <div class="folder-icon">
+                {% if object.type == "file" and object.file_type != object.name %}
+                {% if object.file_type == "mp3" %}
+                <img src="{% static 'images/core/icons/music.png' %}" alt="Music">
+                {% elif object.file_type == "jpg" or object.file_type == "png" %}
+                <img src="https://cdn.rize.moe/{{ bucket_name }}/{{ object.path }}" alt="Image" style="width: 64px; height: auto;">
+                {% else %}
+                <img src="{% static 'images/core/icons/file.png' %}" alt="File">
+                {% endif %}
+                {% else %}
+                <img src="{% static 'images/core/icons/folder.png' %}" alt="Folder">
+                {% endif %}
+                <div class="selection-overlay"></div>
+            </div>
+            <div class="folder-name">{{ object.name }}</div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endblock content %}
+{% block scripts %}
+<script src="{% static 'js/shared/directory.js' %}"></script>
+<script>
+    // Windows 98 style modals for file upload and folder creation
+    function createWindows98Modal(title, content, buttons) {
+        // Create modal container
+        const modal = document.createElement('div');
+        modal.className = 'windows98-modal';
+        modal.innerHTML = `
+            <div class="modal-titlebar">
+                <span class="modal-title">${title}</span>
+                <button class="modal-close">&times;</button>
+            </div>
+            <div class="modal-content">
+                ${content}
+            </div>
+            <div class="modal-buttons">
+                ${buttons.map(btn => `<button class="${btn.class}">${btn.text}</button>`).join('')}
+            </div>
+        `;
+
+        // Close button functionality
+        const closeBtn = modal.querySelector('.modal-close');
+        closeBtn.addEventListener('click', () => {
+            document.body.removeChild(modal);
+        });
+
+        // Add to body
+        document.body.appendChild(modal);
+
+        return modal;
+    }
+
+    function showCreateFolderForm() {
+        const content = `
+            <div class="folder-creation-form">
+                <label for="folder-name">Folder Name:</label>
+                <input type="text" id="folder-name" name="folder_path" required>
+            </div>
+        `;
+
+        const modal = createWindows98Modal('Create Folder', content, [
+            { 
+                text: 'OK', 
+                class: 'btn-ok' 
+            },
+            { 
+                text: 'Cancel', 
+                class: 'btn-cancel' 
+            }
+        ]);
+
+        const okBtn = modal.querySelector('.btn-ok');
+        const cancelBtn = modal.querySelector('.btn-cancel');
+        const folderNameInput = modal.querySelector('#folder-name');
+
+        okBtn.addEventListener('click', () => {
+            const folderName = folderNameInput.value.trim();
+            
+            if (!folderName) {
+                alert('Please enter a folder name');
+                return;
+            }
+
+            // AJAX call to create folder
+            fetch('{% url "administration:manage_storage_bucket_create_folder" %}', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'X-CSRFToken': getCookie('csrftoken')
+                },
+                body: new URLSearchParams({
+                    'bucket': '{{ bucket_name }}',
+                    'folder_path': '{{ object_path }}' + folderName
+                })
+            })
+            .then(response => {
+                console.log('Response status:', response.status);
+                return response.json();
+            })
+            .then(data => {
+                console.log('Response data:', data);
+                if (data.status === 'success') {
+                    location.reload();
+                } else {
+                    alert(data.message);
+                }
+            })
+            .catch(error => {
+                console.error('Full error:', error);
+                alert('An error occurred while creating the folder');
+            });
+
+            document.body.removeChild(modal);
+        });
+
+        cancelBtn.addEventListener('click', () => {
+            document.body.removeChild(modal);
+        });
+    }
+
+    function showUploadFileForm() {
+        const content = `
+            <div class="file-upload-form">
+                <label for="file-upload">Select File:</label>
+                <input type="file" id="file-upload" name="file" required>
+                <div class="upload-progress" style="display:none;">
+                    <div class="progress-bar"></div>
+                    <span class="progress-text">0%</span>
+                </div>
+            </div>
+        `;
+
+        const modal = createWindows98Modal('Upload File', content, [
+            { 
+                text: 'OK', 
+                class: 'btn-ok' 
+            },
+            { 
+                text: 'Cancel', 
+                class: 'btn-cancel' 
+            }
+        ]);
+
+        const okBtn = modal.querySelector('.btn-ok');
+        const cancelBtn = modal.querySelector('.btn-cancel');
+        const fileInput = modal.querySelector('#file-upload');
+        const progressContainer = modal.querySelector('.upload-progress');
+        const progressBar = modal.querySelector('.progress-bar');
+        const progressText = modal.querySelector('.progress-text');
+
+        okBtn.addEventListener('click', () => {
+            const file = fileInput.files[0];
+            
+            if (!file) {
+                alert('Please select a file');
+                return;
+            }
+
+            // Create FormData for file upload
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('bucket', '{{ bucket_name }}');
+            formData.append('current_path', '{{ object_path }}');
+
+            // Show progress bar
+            progressContainer.style.display = 'block';
+            okBtn.disabled = true;
+
+            // AJAX upload with progress
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', '{% url "administration:manage_storage_bucket_upload_file" %}', true);
+            xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
+
+            xhr.upload.onprogress = (e) => {
+                if (e.lengthComputable) {
+                    const percentComplete = Math.round((e.loaded / e.total) * 100);
+                    progressBar.style.width = `${percentComplete}%`;
+                    progressText.textContent = `${percentComplete}%`;
+                }
+            };
+
+            xhr.onload = () => {
+                const response = JSON.parse(xhr.responseText);
+                
+                if (xhr.status === 200) {
+                    // Success - reload page or update directory view
+                    location.reload();
+                } else {
+                    alert(response.message || 'Upload failed');
+                    progressContainer.style.display = 'none';
+                    okBtn.disabled = false;
+                }
+            };
+
+            xhr.onerror = () => {
+                alert('Upload failed');
+                progressContainer.style.display = 'none';
+                okBtn.disabled = false;
+            };
+
+            xhr.send(formData);
+        });
+
+        cancelBtn.addEventListener('click', () => {
+            document.body.removeChild(modal);
+        });
+    }
+
+    // Utility function to get CSRF token
+    function getCookie(name) {
+        let cookieValue = null;
+        if (document.cookie && document.cookie !== '') {
+            const cookies = document.cookie.split(';');
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i].trim();
+                if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+</script>
+{% endblock scripts %}
\ No newline at end of file
diff --git a/templates/en/administration/manage_storage_buckets_home.html b/templates/en/administration/manage_storage_buckets_home.html
new file mode 100644
index 00000000..90bed85b
--- /dev/null
+++ b/templates/en/administration/manage_storage_buckets_home.html
@@ -0,0 +1,26 @@
+{% extends 'shared/base.html' %}
+{% load static %}
+{% block head %}
+<link rel="stylesheet" href="{% static 'css/shared/directory.css' %}">
+{% endblock head %}
+{% block content %}
+<h2 style="margin: 8px 0;">Manage Storage Buckets</h2>
+<hr>
+<div class="directory-viewer">
+    <div class="directory-content">
+        {% for bucket in buckets %}
+        <div class="folder-item" data-path="{% url "administration:view_single_bucket" bucket.name %}">
+            <div class="folder-icon">
+                <img src="{% static 'images/core/icons/folder.png' %}" alt="Folder">
+                <div class="selection-overlay"></div>
+            </div>
+            <div class="folder-name">{{ bucket.name }}</div>
+        </div>
+        {% endfor %}
+    </div>
+    
+</div>
+{% endblock content %}
+{% block scripts %}
+<script src="{% static 'js/shared/directory.js' %}"></script>
+{% endblock scripts %}
\ No newline at end of file
diff --git a/templates/en/anime/anime.html b/templates/en/anime/anime.html
index 36ee2dd1..2f9d5cf3 100644
--- a/templates/en/anime/anime.html
+++ b/templates/en/anime/anime.html
@@ -17,9 +17,10 @@
                 </div>
                 <div class="win98-player-content">
                     {% if user.is_authenticated %}
-                    <video id="video-player">
-                        <!-- captions added dynamically -->
-                    </video>
+                    <div class="retro-buffer">
+                        <img src="{% static 'images/core/gifs/buffering.gif' %}" alt="Loading...">
+                    </div>
+                    <video id="video-player"></video>
                     <div id="custom-subtitles" class="custom-subtitles"></div>
                     {% else %}
                     <div id="video-player" class="unauth-video">
@@ -260,26 +261,40 @@
 <script>
     document.addEventListener('DOMContentLoaded', () => {
         const videoStreamingURL = `/services/stream/anime/?url=${encodeURIComponent('{{ streaming_data.data.sources.url }}')}`;
-        const tracks = JSON.parse(document.getElementById('tracks-data').textContent)
-            .filter(track => track.kind === 'captions')
-            .map(track => ({
-                ...track,
-                file: `/services/stream/anime/?url=${encodeURIComponent(track.file)}`
-            }));
+        var tracks = [];
+        try {
+            tracks = JSON.parse(document.getElementById('tracks-data').textContent)
+                .filter(track => track.kind === 'captions')
+                .map(track => ({
+                    ...track,
+                    file: `/services/stream/anime/?url=${encodeURIComponent(track.file)}`
+                }));
+        } catch (error) {}
         
-        // hide captions menu if no captions available
         if (tracks.length === 0) {
-            document.querySelector('.caption-control').style.display = 'none';
+            try {
+                document.querySelector('.caption-control').style.display = 'none';
+            } catch (error) {}
         }
-        
 
-        const player = new VideoPlayer({
-            source: {
-                url: videoStreamingURL,
-                type: 'hls',
-                tracks: tracks
-            }
-        });
+        let player;
+        if (videoStreamingURL !== '/services/stream/anime/?url=') {
+            player = new VideoPlayer({
+                source: {
+                    url: videoStreamingURL,
+                    type: 'hls',
+                    tracks: tracks
+                }
+            });
+        } else {
+            player = new VideoPlayer({
+                source: {
+                    url: '',
+                    type: 'video',
+                    tracks: tracks
+                }
+            });
+        }
         
         const currentEpisode = document.getElementById('currentEpisode');
         if (currentEpisode) {
diff --git a/templates/shared/left_sidebar.html b/templates/shared/left_sidebar.html
index 323f1779..878fb399 100644
--- a/templates/shared/left_sidebar.html
+++ b/templates/shared/left_sidebar.html
@@ -194,6 +194,10 @@
           <img src="{% static 'images/core/gifs/right_hand.gif' %}" alt="Manage Users Icon" />
           <a href="#manage-users">{% if request.LANGUAGE_CODE == 'ja' %}ユーザー管理{% else %}Manage Users{% endif %}</a>
         </div>
+        <div class="navigation-item">
+          <img src="{% static 'images/core/gifs/right_hand.gif' %}" alt="Manage Storage Buckets Icon" />
+          <a href="{% url "administration:manage_storage_buckets" %}">{% if request.LANGUAGE_CODE == 'ja' %}ストレージバケット管理{% else %}Manage Storage Buckets{% endif %}</a>
+        </div>
       </div>
     </div>
   {% endif %}