Merge pull request #79 from strem-app/feature/streamelements

Feature/streamelements
strem-app · Feb 21, 2023 · 1d2fd39 · 1d2fd39
2 parents 4f09d48 + 2b41dc9
commit 1d2fd39
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 32 deletions.
diff --git a/src/Strem.Core/Components/Elements/HelperInfo.razor b/src/Strem.Core/Components/Elements/HelperInfo.razor
@@ -8,7 +8,7 @@
 {
     <p class="help">
         <span class="icon @(StyleType)">
-            <i class="fas fa-info-circle"></i>
+            <i class="fas @(IconType)"></i>
         </span>
         <span class="@(StyleType)">
             @ChildContent

diff --git a/src/Strem.StreamElements/Components/Integrations/StreamElementsIntegrationComponent.razor b/src/Strem.StreamElements/Components/Integrations/StreamElementsIntegrationComponent.razor
@@ -16,11 +16,14 @@
 <div class="columns">
 
     <div class="column">
-        <label class="label">Connected Account</label>
-        <div class="field has-addons">
+        <label class="label">StreamElements JWT Token</label>
+        <div class="field">
             <div class="control is-expanded">
-                <TextAreaInput placeholder="Enter JWT Token" @bind-Value="JwtToken"/>
+                <TextAreaInput placeholder="Enter JWT Token" @bind-Value="JwtToken" class="masked-input" onblur="this.classList.add('masked-input')" onfocus="this.classList.remove('masked-input')"/>
             </div>
+        </div>
+
+        <div class="field">
             <div class="control">
                 @if (IsConnectedToStreamElements)
                 {
@@ -31,9 +34,11 @@
                     <a class="button is-success" @onclick="ConnectToStreamElements" disabled="@IsConnecting">Connect To StreamElements</a>
                 }
             </div>
+            <HelperInfo>Your JWT token is under your secrets within your StreamElements profile page, click "Show Secrets" then copy the code in here.</HelperInfo>
+            <HelperInfo IconType="fa-triangle-exclamation" StyleType="has-text-danger">This information is private and should be kept secret, do not share it with anyone.</HelperInfo>
         </div>
     </div>
-
+    
 </div>
 
 @code {

diff --git a/src/Strem.StreamElements/Plugin/StreamElementsIntegrationDescriptor.cs b/src/Strem.StreamElements/Plugin/StreamElementsIntegrationDescriptor.cs
@@ -9,10 +9,7 @@ public class StreamElementsIntegrationDescriptor : IIntegrationDescriptor
     public string Title => "Stream Elements Integration";
     public string Code => "stream-elements-integration";
 
-    public VariableDescriptor[] VariableOutputs { get; } = new[]
-    {
-        new VariableDescriptor(new VariableEntry("foo", "bar"), false)
-    };
+    public VariableDescriptor[] VariableOutputs { get; } = Array.Empty<VariableDescriptor>();
 
     public Type ComponentType { get; } = typeof(StreamElementsIntegrationComponent);
 }
diff --git a/src/Strem.UI/Components/Integrations/IntegrationSelector.razor b/src/Strem.UI/Components/Integrations/IntegrationSelector.razor
@@ -10,7 +10,7 @@
       @foreach (var integration in IntegrationRegistry.GetAll())
       {
         <li>
-          <a class="is-integration @(integration.Code == SelectedIntegrationCode ? "is-active" : "")"
+          <a class="is-integration @(integration.Code) @(integration.Code == SelectedIntegrationCode ? "is-active" : "")"
              @onclick="() => SelectIntegration(integration.Code)">@integration.Title</a>
         </li>
       }

diff --git a/src/Strem.UI/Pages/Integrations.razor b/src/Strem.UI/Pages/Integrations.razor
@@ -12,7 +12,7 @@
                       <IntegrationSelector OnIntegrationSelected="SelectIntegration"></IntegrationSelector>
                     </div>
                   </div>
-                <div class="column mh-100">
+                <div class="column mh-100 integration-components">
                     @if (CurrentIntegration != null)
                     {
                         <IntegrationComponent Descriptor="CurrentIntegration"></IntegrationComponent>

diff --git a/src/Strem/wwwroot/css/app-styles.less b/src/Strem/wwwroot/css/app-styles.less
@@ -88,27 +88,6 @@ body
     }
 }
 
-.accordion
-{
-    &>a.twitch-integration {
-        background-color: #6441a5;
-        color: #fff;
-        border-color: transparent;
-    }
-
-    &>a.twitter-integration {
-        background-color: #00acee;
-        color: #fff;
-        border-color: transparent;
-    }
-
-    &>a.obs-integration-v4, &>a.obs-integration {
-        background-color: @is-dark-grey;
-        color: #fff;
-        border-color: transparent;
-    }
-}
-
 .has-success-pulse {
     box-shadow: 0 0 0 0 @is-success;
     animation: pulse-success 1s infinite;
@@ -396,4 +375,41 @@ li.drag-source
 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.5);
+}
+
+.masked-input
+{
+    color: transparent;
+    text-shadow: #111 0 0 15px;
+}
+
+/* Integrations */
+
+@twitch-color: #6441a5;
+@twitter-color: #00acee;
+@stream-elements-color: #333343;
+@obs-color: #4a4a4a;
+
+.integration-menu
+{
+    a { border-left: 0.5rem solid @is-info;  }
+
+    a.stream-elements-integration { border-color: @stream-elements-color; }
+    a.twitch-integration { border-color: @twitch-color; }
+    a.twitter-integration { border-color: @twitter-color; }
+    a.obs-integration { border-color: @obs-color; }
+}
+
+.integration-components .accordion
+{
+    &>a {
+        background-color: @is-info;
+        color: #fff;
+        border-color: transparent;
+    }
+
+    &>a.twitch-integration { background-color: @twitch-color; }
+    &>a.twitter-integration { background-color: @twitter-color; }
+    &>a.stream-elements-integration { background-color: @stream-elements-color; }
+    &>a.obs-integration-v4, &>a.obs-integration { background-color: @obs-color; }
 }