Skip to content

feat(effects): add a way to see and clear unknown sources in obs toggle effects #2980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CaveMobster merged 8 commits into from
Feb 11, 2025
Merged

feat(effects): add a way to see and clear unknown sources in obs toggle effects #2980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5723aca
feat(effects): add a way to see and clear unknown sources in obs sele…
CKY- Jan 31, 2025
233ff99
moved to settings container
CKY- Feb 3, 2025
9896163
adjust warning verbage
CKY- Feb 10, 2025
3455acc
rename OrphanedSources to MissingSources
CKY- Feb 10, 2025
3a24cff
fixed typeo added unknown source name
CKY- Feb 10, 2025
6d71c06
remove the id if we have a name for new instaces
CKY- Feb 10, 2025
681c931
Merge branch 'v5' into v5-obs-show-hide-effect-exsting-items
CKY- Feb 11, 2025
3c88c58
Merge branch 'v5' into v5-obs-show-hide-effect-exsting-items
CKY- Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 64 additions & 7 deletions src/backend/integrations/builtin/obs/effects/toggle-obs-source-filter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,29 @@ export const ToggleSourceFilterEffectType: EffectType<EffectProperties> =
categories: ["common"]
},
optionsTemplate: `
<eos-container header="Filters">
<eos-container ng-show="missingSources.length > 0">
<div class="effect-info alert alert-warning">
<p><b>Warning!</b>
Cannot find {{missingSources.length}} sources in this effect. Ensure the correct profile or scene collection is loaded in OBS, and OBS is running.
</p>
</div>
</eos-container>
<setting-container ng-show="missingSources.length > 0" header="Missing Filters ({{missingSources.length}})" collapsed="true">
<div ng-repeat="filterName in missingSources track by $index">
<div class="list-item" style="display: flex;border: 2px solid #3e4045;box-shadow: none;border-radius: 8px;padding: 5px 5px;">
<div class="pl-5">
<span>Source: {{filterName.sourceName}},</span>
<span>Name: {{filterName.filterName}},</span>
<span>Action: {{getMissingActionDisplay(filterName.action)}}</span>
</div>
<div>
<button class="btn btn-danger" ng-click="deleteSceneAtIndex($index)"><i class="far fa-trash"></i></button>
</div>
</div>
</div>
</setting-container>

<eos-container header="Filters" pad-top="missingSources.length > 0">
<div class="effect-setting-container">
<div class="input-group">
<span class="input-group-addon">Filter</span>
Expand Down Expand Up @@ -76,13 +98,15 @@ export const ToggleSourceFilterEffectType: EffectType<EffectProperties> =

$scope.searchText = "";

$scope.missingSources = [];

if ($scope.effect.selectedFilters == null) {
$scope.effect.selectedFilters = [];
}

$scope.filterIsSelected = (sourceName: string, filterName: string) => {
return $scope.effect.selectedFilters.some(
(s) => s.sourceName === sourceName && s.filterName === filterName
s => s.sourceName === sourceName && s.filterName === filterName
);
};

Expand All @@ -92,7 +116,7 @@ export const ToggleSourceFilterEffectType: EffectType<EffectProperties> =
) => {
if ($scope.filterIsSelected(sourceName, filterName)) {
$scope.effect.selectedFilters = $scope.effect.selectedFilters.filter(
(s) => !(s.sourceName === sourceName && s.filterName === filterName)
s => !(s.sourceName === sourceName && s.filterName === filterName)
);
} else {
$scope.effect.selectedFilters.push({
Expand All @@ -109,7 +133,7 @@ export const ToggleSourceFilterEffectType: EffectType<EffectProperties> =
action: "toggle" | boolean
) => {
const selectedFilter = $scope.effect.selectedFilters.find(
(s) => s.sourceName === sourceName && s.filterName === filterName
s => s.sourceName === sourceName && s.filterName === filterName
);
if (selectedFilter != null) {
selectedFilter.action = action;
Expand All @@ -121,8 +145,11 @@ export const ToggleSourceFilterEffectType: EffectType<EffectProperties> =
filterName: string
) => {
const selectedFilter = $scope.effect.selectedFilters.find(
(s) => s.sourceName === sourceName && s.filterName === filterName
s => s.sourceName === sourceName && s.filterName === filterName
);

$scope.missingSources = $scope.missingSources.filter(item => item !== selectedFilter);

if (selectedFilter == null) {
return "";
}
Expand All @@ -136,11 +163,27 @@ export const ToggleSourceFilterEffectType: EffectType<EffectProperties> =
return "Disable";
};

$scope.getMissingActionDisplay = (
selectedFilter: unknown
) => {
console.log(selectedFilter);
if (selectedFilter == null) {
return "";
}
if (selectedFilter === "toggle") {
return "Toggle";
}
if (selectedFilter === true) {
return "Enable";
}
return "Disable";
};

const capitalizeWords = (input: string) =>
input
.split(" ")
.map(
(w) => w[0].toLocaleUpperCase() + w.substr(1).toLocaleLowerCase()
w => w[0].toLocaleUpperCase() + w.substr(1).toLocaleLowerCase()
)
.join(" ");

Expand All @@ -153,12 +196,25 @@ export const ToggleSourceFilterEffectType: EffectType<EffectProperties> =
$scope.searchText = searchText;
}
$scope.sourceListFiltered = ($scope.sourceList as Array<OBSSource>).filter((source: OBSSource) => {
return source.filters.some(filter => {
return source.filters.some((filter) => {
return filter.name.toLowerCase().includes(searchText.toLowerCase());
});
});
};

$scope.deleteSceneAtIndex = (index: number) => {
$scope.effect.selectedFilters = $scope.effect.selectedFilters.filter(
item => item !== $scope.missingSources [index]
);
$scope.missingSources.splice(index, 1);
};

$scope.getStoredData = () => {
for (const filterName of $scope.effect.selectedFilters) {
$scope.missingSources.push(filterName);
}
};

$scope.getSourceList = () => {
$scope.isObsConfigured = backendCommunicator.fireEventSync("obs-is-configured");

Expand All @@ -171,6 +227,7 @@ export const ToggleSourceFilterEffectType: EffectType<EffectProperties> =
};

$scope.getSourceList();
$scope.getStoredData();
},
optionsValidator: () => {
return [];
Expand Down
51 changes: 45 additions & 6 deletions src/backend/integrations/builtin/obs/effects/toggle-obs-source-muted.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,27 @@ export const ToggleSourceMutedEffectType: EffectType<EffectProperties> =
categories: ["common"]
},
optionsTemplate: `
<eos-container header="Audio Sources">
<eos-container ng-show="missingSources.length > 0">
<div class="effect-info alert alert-warning">
<p><b>Warning!</b>
Cannot find {{missingSources.length}} sources in this effect. Ensure the correct profile or scene collection is loaded in OBS, and OBS is running.
</p>
</div>
</eos-container>
<setting-container ng-show="missingSources.length > 0" header="Missing Audio Sources ({{missingSources.length}})" collapsed="true">
<div ng-repeat="sourceList in missingSources track by $index">
<div class="list-item" style="display: flex;border: 2px solid #3e4045;box-shadow: none;border-radius: 8px;padding: 5px 5px;">
<div class="pl-5">
<span>Source: {{sourceList.sourceName}}</span>
</div>
<div>
<button class="btn btn-danger" ng-click="deleteSceneAtIndex($index)"><i class="far fa-trash"></i></button>
</div>
</div>
</div>
</setting-container>

<eos-container header="Audio Sources" pad-top="missingSources.length > 0">
<firebot-input model="searchText" input-title="Filter" disable-variables="true"></firebot-input>
<div>
<button class="btn btn-link" ng-click="getSourceList()">Refresh Sources</button>
Expand Down Expand Up @@ -61,20 +81,22 @@ export const ToggleSourceMutedEffectType: EffectType<EffectProperties> =

$scope.sourceList = null;

$scope.missingSources = [];

if ($scope.effect.selectedSources == null) {
$scope.effect.selectedSources = [];
}

$scope.sourceIsSelected = (sourceName: string) => {
return $scope.effect.selectedSources.some(
(s) => s.sourceName === sourceName
s => s.sourceName === sourceName
);
};

$scope.toggleSourceSelected = (sourceName: string) => {
if ($scope.sourceIsSelected(sourceName)) {
$scope.effect.selectedSources = $scope.effect.selectedSources.filter(
(s) => !(s.sourceName === sourceName)
s => !(s.sourceName === sourceName)
);
} else {
$scope.effect.selectedSources.push({
Expand All @@ -89,7 +111,7 @@ export const ToggleSourceMutedEffectType: EffectType<EffectProperties> =
action: "toggle" | boolean
) => {
const selectedSource = $scope.effect.selectedSources.find(
(s) => s.sourceName === sourceName
s => s.sourceName === sourceName
);
if (selectedSource != null) {
selectedSource.action = action;
Expand All @@ -98,8 +120,11 @@ export const ToggleSourceMutedEffectType: EffectType<EffectProperties> =

$scope.getSourceActionDisplay = (sourceName: string) => {
const selectedSource = $scope.effect.selectedSources.find(
(s) => s.sourceName === sourceName
s => s.sourceName === sourceName
);

$scope.missingSources = $scope.missingSources.filter(item => item !== selectedSource);

if (selectedSource == null) {
return "";
}
Expand All @@ -117,14 +142,27 @@ export const ToggleSourceMutedEffectType: EffectType<EffectProperties> =
input
.split(" ")
.map(
(w) => w[0].toLocaleUpperCase() + w.substr(1).toLocaleLowerCase()
w => w[0].toLocaleUpperCase() + w.substr(1).toLocaleLowerCase()
)
.join(" ");

$scope.formatSourceType = (type: string) => {
return capitalizeWords((type ?? "").replace(/_/, " "));
};

$scope.deleteSceneAtIndex = (index: number) => {
$scope.effect.selectedSources = $scope.effect.selectedSources.filter(
item => item !== $scope.missingSources [index]
);
$scope.missingSources.splice(index, 1);
};

$scope.getStoredData = () => {
for (const sceneName of $scope.effect.selectedSources) {
$scope.missingSources.push(sceneName);
}
};

$scope.getSourceList = () => {
$scope.isObsConfigured = backendCommunicator.fireEventSync("obs-is-configured");

Expand All @@ -136,6 +174,7 @@ export const ToggleSourceMutedEffectType: EffectType<EffectProperties> =
};

$scope.getSourceList();
$scope.getStoredData();
},
optionsValidator: () => {
return [];
Expand Down
Loading