kdenlive-effect-generator/test_load_effects.html at main · mannix-lei/kdenlive-effect-generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Load Effects Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1>Load Effects Test</h1>
        <button class="btn btn-primary" onclick="testLoadEffects()">Test Load Effects</button>

        <div id="console-output" class="mt-3 p-3 bg-light">
            <h5>Console Output:</h5>
            <div id="log"></div>
        </div>
    </div>

    <!-- 进度模态框 -->
    <div class="modal fade" id="progressModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">处理中...</h5>
                </div>
                <div class="modal-body text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-3" id="progressMessage">正在处理，请稍候...</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let progressModal = null;

        function log(message) {
            const logDiv = document.getElementById('log');
            logDiv.innerHTML += `<div>${new Date().toLocaleTimeString()}: ${message}</div>`;
            console.log(message);
        }

        document.addEventListener('DOMContentLoaded', function() {
            log('DOMContentLoaded event fired');
            progressModal = new bootstrap.Modal(document.getElementById('progressModal'));
            if (progressModal) {
                log('progressModal initialized successfully');
            } else {
                log('Failed to initialize progressModal');
            }
        });

        function showLoading(message = '加载中...') {
            log('showLoading called with message: ' + message);
            document.getElementById('progressMessage').textContent = message;
            if (progressModal) {
                const modalElement = document.getElementById('progressModal');
                if (modalElement && !modalElement.classList.contains('show')) {
                    progressModal.show();
                    log('progressModal.show() called');
                } else {
                    log('Modal is already visible, just updating message');
                }
            } else {
                log('progressModal is not initialized');
            }
        }

        function hideLoading() {
            log('hideLoading called');
            if (progressModal) {
                try {
                    progressModal.hide();
                    log('progressModal.hide() called');
                } catch (error) {
                    log('Error hiding modal: ' + error.message);
                }

                setTimeout(() => {
                    try {
                        const modalElement = document.getElementById('progressModal');
                        if (modalElement) {
                            modalElement.classList.remove('show');
                            modalElement.style.display = 'none';
                            modalElement.setAttribute('aria-hidden', 'true');
                            modalElement.removeAttribute('aria-modal');
                            modalElement.removeAttribute('role');
                            log('Modal element cleaned up');
                        }

                        const backdrops = document.querySelectorAll('.modal-backdrop');
                        backdrops.forEach(backdrop => {
                            backdrop.remove();
                            log('Backdrop removed');
                        });

                        document.body.classList.remove('modal-open');
                        document.body.style.paddingRight = '';
                        document.body.style.overflow = '';
                        log('Body cleanup completed');
                    } catch (error) {
                        log('Error in cleanup: ' + error.message);
                    }
                }, 500);
            } else {
                log('progressModal is not initialized');
            }
        }

        async function testLoadEffects() {
            try {
                log('testLoadEffects: Starting test');
                showLoading('正在加载特效列表...');

                // Simulate API call
                await new Promise(resolve => setTimeout(resolve, 2000));

                log('testLoadEffects: Simulated API call completed');

                // Simulate processing effects
                log('testLoadEffects: Processing effects...');

            } catch (error) {
                log('testLoadEffects: Error occurred - ' + error.message);
            } finally {
                log('testLoadEffects: Finally block - hiding loading modal');
                hideLoading();
            }
        }
    </script>
</body>
</html>