File size: 5,768 Bytes
80f35e8 d2036ee 80f35e8 d2036ee 80f35e8 d2036ee 80f35e8 d2036ee 80f35e8 d2036ee 80f35e8 | 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 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | class SpeakBravePlayer extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open'
// Add event listeners
this.shadowRoot.getElementById('analyzeBtn').addEventListener('click', async () => {
const audioBlob = await getRecordingBlob(); // Get recorded audio
const videoBlob = await getVideoBlob(); // Get recorded video
const analysis = await analyzeEmotion(audioBlob, videoBlob);
if (analysis) {
this.shadowRoot.getElementById('analysis').updateAnalysis(analysis);
}
});
}
);
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
margin: 2rem 0;
}
.container {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
padding: 2rem;
}
.header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.icon {
width: 3rem;
height: 3rem;
background: rgba(124, 58, 237, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
}
h2 {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.video-container {
margin-bottom: 2rem;
border-radius: 0.5rem;
overflow: hidden;
}
.task-card, .reflection-card {
background: rgba(30, 41, 59, 0.5);
border-radius: 0.5rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
h3 {
font-size: 1.25rem;
font-weight: 500;
margin-top: 0;
margin-bottom: 1rem;
}
.task-instructions {
margin-bottom: 1.5rem;
line-height: 1.6;
}
.timer {
font-size: 1.5rem;
font-weight: 600;
color: #7c3aed;
margin-bottom: 1rem;
}
.record-btn {
background: #7c3aed;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
display: flex;
align-items: center;
}
.record-btn:hover {
background: #6d28d9;
}
.record-btn i {
margin-right: 0.5rem;
}
.reflection-textarea {
width: 100%;
min-height: 120px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
padding: 1rem;
color: white;
font-family: inherit;
margin-bottom: 1rem;
}
.submit-btn {
background: #2563eb;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.submit-btn:hover {
background: #1d4ed8;
}
</style>
<div class="container">
<div class="header">
<div class="icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<h2>Speak Brave Challenge</h2>
</div>
<div class="video-container">
<iframe width="100%" height="400" src="https://www.youtube.com/embed/example" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="task-card">
<h3>Voice Challenge</h3>
<div class="task-instructions">
<p>Speak your truth boldly for 1 minute. Express yourself freely without hesitation or self-censorship.</p>
<p>Focus on: Confidence, Clarity, and Courage</p>
</div>
<div class="timer">01:00</div>
<button class="record-btn">
<svg width="16" height="16" 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"></circle>
<circle cx="12" cy="12" r="3"></circle>
</svg>
Start Recording
</button>
<button id="analyzeBtn" class="record-btn" style="margin-top: 1rem; background: #2563eb;">
<svg width="16" height="16" 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"></path>
</svg>
Analyze Emotion
</button>
</div>
<div class="reflection-card">
<h3>Reflection</h3>
<p>How did this challenge make you feel? What did you learn about yourself?</p>
<textarea class="reflection-textarea" placeholder="Write your reflection here..."></textarea>
<button class="submit-btn">Submit Reflection</button>
</div>
<emotion-analysis id="analysis"></emotion-analysis>
</div>
`;
}
}
customElements.define('speak-brave-player', SpeakBravePlayer); |