Skip to content

Commit

Permalink
Merge pull request #30 from dyte-io/fix/dyte-debugger-i18n
Browse files Browse the repository at this point in the history 
fix(debugger-i18n): fixed the lack of i18n in debugger files
  • Loading branch information
@ravindra-dyte
ravindra-dyte authored Nov 6, 2024
2 parents cd2c3e2 + 3962e80 commit cfe575a
Show file tree
Hide file tree
Showing 7 changed files with 117 additions and 67 deletions.
22 changes: 11 additions & 11 deletions packages/core/src/components/dyte-debugger-audio/dyte-debugger-audio.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,9 @@ export class DyteDebuggerAudio {

const newStatsList: FormattedStatsObj[] = [];
newStatsList.push({
name: `Bitrate`,
name: this.t('debugger.stats.bitrate.label'),
value: `${Math.round(statsObj.bitrate / 1024)} kbps`,
description: 'Data transmitted per second, affects quality and file size.',
description: this.t('debugger.stats.bitrate.description'),
verdict: getBitrateVerdict({
bitrate: statsObj.bitrate,
kind: 'audio',
Expand All @@ -104,15 +104,15 @@ export class DyteDebuggerAudio {
});

newStatsList.push({
name: `Packet Loss`,
name: this.t('debugger.stats.packet_loss.label'),
value: `${statsObj.packetsLostPercentage}%`,
description: 'Amount of data lost during transfer',
description: this.t('debugger.stats.packet_loss.description'),
verdict: getPacketLossVerdict({ packetLossPercentage: statsObj.packetsLostPercentage }),
});
newStatsList.push({
name: `Jitter`,
name: this.t('debugger.stats.jitter.label'),
value: `${Math.round(statsObj.jitter * 1000)} ms`,
description: 'Variance or fluctuation in latency',
description: this.t('debugger.stats.jitter.description'),
verdict: getJitterVerdict({ jitterInMS: statsObj.jitter * 1000 }),
});

Expand Down Expand Up @@ -168,20 +168,20 @@ export class DyteDebuggerAudio {
class={`section-header ${!this.networkBasedMediaHealth ? 'only-child' : ''}`}
// onClick={() => this.toggleSection('network')}
>
<span>Network & Media</span>
<span>{this.t('debugger.audio.sections.network_media')}</span>
{this.networkBasedMediaHealth && (
<span class={`status ${this.networkBasedMediaHealth?.toLowerCase()}`}>
{this.networkBasedMediaHealth}
{this.t(`debugger.quality.${this.networkBasedMediaHealth?.toLowerCase()}`)}
</span>
)}
{/* <span class="arrow">{this.isNetworkOpen ? '▾' : '▸'}</span> */}
</div>
{this.isNetworkOpen && !this.audioProducerFormattedStats.length && (
<div class="section-body missing-stats">
{this.meeting.self.audioEnabled ? (
<span>Generating report. Please wait for a few seconds.</span>
<span>{this.t('debugger.audio.messages.generating_report')}</span>
) : (
<span>Please enable mic to see the report.</span>
<span>{this.t('debugger.audio.messages.enable_media')}</span>
)}
</div>
)}
Expand All @@ -195,7 +195,7 @@ export class DyteDebuggerAudio {
</div>
<div class="network-cell value">
<span class={`status ${formattedStatsObj.verdict?.toLowerCase()}`}>
{formattedStatsObj.verdict}
{this.t(`debugger.quality.${formattedStatsObj.verdict?.toLowerCase()}`)}
</span>
<span class="value">{formattedStatsObj.value}</span>
</div>
Expand Down
42 changes: 21 additions & 21 deletions packages/core/src/components/dyte-debugger-screenshare/dyte-debugger-screenshare.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,23 +101,23 @@ export class DyteDebuggerScreenShare {
const newStatsList: FormattedStatsObj[] = [];

newStatsList.push({
name: `CPU Limitations`,
name: this.t('debugger.stats.cpu_limitations.label'),
value: statsObj.cpuLimitations ? 'Yes' : 'No',
description: 'CPU limitations can impact WebRTC call quality and performance.',
description: this.t('debugger.stats.cpu_limitations.description'),
verdict: statsObj.cpuLimitations ? 'Poor' : 'Good',
});

newStatsList.push({
name: `Bandwidth Limitations`,
name: this.t('debugger.stats.bandwidth_limitations.label'),
value: statsObj.bandwidthLimitations ? 'Yes' : 'No',
description: 'Slow internet speeds can degrade video quality.',
description: this.t('debugger.stats.bandwidth_limitations.description'),
verdict: statsObj.bandwidthLimitations ? 'Poor' : 'Good',
});

newStatsList.push({
name: `Bitrate`,
name: this.t('debugger.stats.bitrate.label'),
value: `${Math.round(statsObj.bitrate / 1024)} kbps`,
description: 'Data transmitted per second, affects quality and file size.',
description: this.t('debugger.stats.bitrate.description'),
verdict: getBitrateVerdict({
bitrate: statsObj.bitrate,
kind: 'video',
Expand All @@ -126,15 +126,15 @@ export class DyteDebuggerScreenShare {
});

newStatsList.push({
name: `Packet Loss`,
name: this.t('debugger.stats.packet_loss.label'),
value: `${statsObj.packetsLostPercentage}%`,
description: 'Amount of data lost during transfer',
description: this.t('debugger.stats.packet_loss.description'),
verdict: getPacketLossVerdict({ packetLossPercentage: statsObj.packetsLostPercentage }),
});
newStatsList.push({
name: `Jitter`,
name: this.t('debugger.stats.jitter.label'),
value: `${Math.round(statsObj.jitter * 1000)} ms`,
description: 'Variance or fluctuation in latency',
description: this.t('debugger.stats.jitter.description'),
verdict: getJitterVerdict({ jitterInMS: statsObj.jitter * 1000 }),
});

Expand All @@ -157,9 +157,9 @@ export class DyteDebuggerScreenShare {

const newStatsList: FormattedStatsObj[] = [];
newStatsList.push({
name: `Bitrate`,
name: this.t('debugger.stats.bitrate.label'),
value: `${Math.round(statsObj.bitrate / 1024)} kbps`,
description: 'Data transmitted per second, affects quality and file size.',
description: this.t('debugger.stats.bitrate.description'),
verdict: getBitrateVerdict({
bitrate: statsObj.bitrate,
kind: 'audio',
Expand All @@ -168,15 +168,15 @@ export class DyteDebuggerScreenShare {
});

newStatsList.push({
name: `Packet Loss`,
name: this.t('debugger.stats.packet_loss.label'),
value: `${statsObj.packetsLostPercentage}%`,
description: 'Amount of data lost during transfer',
description: this.t('debugger.stats.packet_loss.description'),
verdict: getPacketLossVerdict({ packetLossPercentage: statsObj.packetsLostPercentage }),
});
newStatsList.push({
name: `Jitter`,
name: this.t('debugger.stats.jitter.label'),
value: `${Math.round(statsObj.jitter * 1000)} ms`,
description: 'Variance or fluctuation in latency',
description: this.t('debugger.stats.jitter.description'),
verdict: getJitterVerdict({ jitterInMS: statsObj.jitter * 1000 }),
});

Expand Down Expand Up @@ -223,20 +223,20 @@ export class DyteDebuggerScreenShare {
class={`section-header ${!this.networkBasedMediaHealth ? 'only-child' : ''}`}
// onClick={() => this.toggleSection('network')}
>
<span>Network & Media</span>
<span>{this.t('debugger.screenshare.sections.network_media')}</span>
{this.networkBasedMediaHealth && (
<span class={`status ${this.networkBasedMediaHealth?.toLowerCase()}`}>
{this.networkBasedMediaHealth}
{this.t(`debugger.quality.${this.networkBasedMediaHealth?.toLowerCase()}`)}
</span>
)}
{/* <span class="arrow">{this.isNetworkOpen ? '▾' : '▸'}</span> */}
</div>
{this.isNetworkOpen && !this.videoProducerFormattedStats.length && (
<div class="section-body missing-stats">
{this.meeting.self.screenShareEnabled ? (
<span>Generating report. Please wait for a few seconds.</span>
<span>{this.t('debugger.screenshare.messages.generating_report')}</span>
) : (
<span>Please share the screen to see the report.</span>
<span>{this.t('debugger.screenshare.messages.enable_media')}</span>
)}
</div>
)}
Expand All @@ -250,7 +250,7 @@ export class DyteDebuggerScreenShare {
</div>
<div class="network-cell value">
<span class={`status ${formattedStatsObj.verdict?.toLowerCase()}`}>
{formattedStatsObj.verdict}
{this.t(`debugger.quality.${formattedStatsObj.verdict?.toLowerCase()}`)}
</span>
<span class="value">{formattedStatsObj.value}</span>
</div>
Expand Down
20 changes: 12 additions & 8 deletions packages/core/src/components/dyte-debugger-system/dyte-debugger-system.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,18 +67,22 @@ export class DyteDebuggerSystem {
const newBatteryStats: FormattedStatsObj[] = [];

newBatteryStats.push({
name: 'Battery Level',
name: this.t('debugger.system.battery.level.label'),
value: `${batteryLevelPercentage}%`,
description: 'A low battery charge may result in reduced performance.',
description: this.t('debugger.system.battery.level.description'),
verdict: getBatteryLevelVerdict({
batteryLevelPercentage,
}),
});

newBatteryStats.push({
name: 'Battery Charging Status',
value: `${this.battery.charging ? 'Charging' : 'Not charging'}`,
description: 'A device running on power performs optimally.',
name: this.t('debugger.system.battery.charging.label'),
value: `${
this.battery.charging
? this.t('debugger.system.battery.charging.is_charging')
: this.t('debugger.system.battery.charging.is_not_charging')
}`,
description: this.t('debugger.system.battery.charging.description'),
verdict: getBatteryChargingVerdict({
batteryLevelPercentage,
chargingTimeInSeconds: this.battery.chargingTime,
Expand Down Expand Up @@ -131,10 +135,10 @@ export class DyteDebuggerSystem {
<div class="status-container">
<div class="status-section">
<div class="section-header" onClick={() => this.toggleSection('battery')}>
<span>Battery</span>
<span>{this.t('debugger.system.sections.battery')}</span>
{this.batterySectionHealth && (
<span class={`status ${this.batterySectionHealth?.toLowerCase()}`}>
{this.batterySectionHealth}
{this.t(`debugger.quality.${this.batterySectionHealth?.toLowerCase()}`)}
</span>
)}
{/* <span class="arrow">{this.isBatterySectionOpen ? '▾' : '▸'}</span> */}
Expand All @@ -149,7 +153,7 @@ export class DyteDebuggerSystem {
</div>
<div class="battery-cell value">
<span class={`status ${formattedStatsObj.verdict?.toLowerCase()}`}>
{formattedStatsObj.verdict}
{this.t(`debugger.quality.${formattedStatsObj.verdict?.toLowerCase()}`)}
</span>
<span class="value">{formattedStatsObj.value}</span>
</div>
Expand Down
30 changes: 15 additions & 15 deletions packages/core/src/components/dyte-debugger-video/dyte-debugger-video.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,23 +94,23 @@ export class DyteDebuggerVideo {
const newStatsList: FormattedStatsObj[] = [];

newStatsList.push({
name: `CPU Limitations`,
name: this.t('debugger.stats.cpu_limitations.label'),
value: statsObj.cpuLimitations ? 'Yes' : 'No',
description: 'CPU limitations can impact WebRTC call quality and performance.',
description: this.t('debugger.stats.cpu_limitations.description'),
verdict: statsObj.cpuLimitations ? 'Poor' : 'Good',
});

newStatsList.push({
name: `Bandwidth Limitations`,
name: this.t('debugger.stats.bandwidth_limitations.label'),
value: statsObj.bandwidthLimitations ? 'Yes' : 'No',
description: 'Slow internet speeds can degrade video quality.',
description: this.t('debugger.stats.bandwidth_limitations.description'),
verdict: statsObj.bandwidthLimitations ? 'Poor' : 'Good',
});

newStatsList.push({
name: `Bitrate`,
name: this.t('debugger.stats.bitrate.label'),
value: `${Math.round(statsObj.bitrate / 1024)} kbps`,
description: 'Data transmitted per second, affects quality and file size.',
description: this.t('debugger.stats.bitrate.description'),
verdict: getBitrateVerdict({
bitrate: statsObj.bitrate,
kind: 'video',
Expand All @@ -119,15 +119,15 @@ export class DyteDebuggerVideo {
});

newStatsList.push({
name: `Packet Loss`,
name: this.t('debugger.stats.packet_loss.label'),
value: `${statsObj.packetsLostPercentage}%`,
description: 'Amount of data lost during transfer',
description: this.t('debugger.stats.packet_loss.description'),
verdict: getPacketLossVerdict({ packetLossPercentage: statsObj.packetsLostPercentage }),
});
newStatsList.push({
name: `Jitter`,
name: this.t('debugger.stats.jitter.label'),
value: `${Math.round(statsObj.jitter * 1000)} ms`,
description: 'Variance or fluctuation in latency',
description: this.t('debugger.stats.jitter.description'),
verdict: getJitterVerdict({ jitterInMS: statsObj.jitter * 1000 }),
});

Expand Down Expand Up @@ -183,20 +183,20 @@ export class DyteDebuggerVideo {
class={`section-header ${!this.networkBasedMediaHealth ? 'only-child' : ''}`}
// onClick={() => this.toggleSection('network')}
>
<span>Network & Media</span>
<span>{this.t('debugger.video.sections.network_media')}</span>
{this.networkBasedMediaHealth && (
<span class={`status ${this.networkBasedMediaHealth?.toLowerCase()}`}>
{this.networkBasedMediaHealth}
{this.t(`debugger.quality.${this.networkBasedMediaHealth?.toLowerCase()}`)}
</span>
)}
{/* <span class="arrow">{this.isNetworkOpen ? '▾' : '▸'}</span> */}
</div>
{this.isNetworkOpen && !this.videoProducerFormattedStats.length && (
<div class="section-body missing-stats">
{this.meeting.self.videoEnabled ? (
<span>Generating report. Please wait for a few seconds.</span>
<span>{this.t('debugger.video.messages.generating_report')}</span>
) : (
<span>Please enable camera to see the report.</span>
<span>{this.t('debugger.video.messages.enable_media')}</span>
)}
</div>
)}
Expand All @@ -210,7 +210,7 @@ export class DyteDebuggerVideo {
</div>
<div class="network-cell value">
<span class={`status ${formattedStatsObj.verdict?.toLowerCase()}`}>
{formattedStatsObj.verdict}
{this.t(`debugger.quality.${formattedStatsObj.verdict?.toLowerCase()}`)}
</span>
<span class="value">{formattedStatsObj.value}</span>
</div>
Expand Down
22 changes: 10 additions & 12 deletions packages/core/src/components/dyte-debugger/dyte-debugger.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,15 @@ export class DyteDebugger {
private getActiveTab() {
switch (this.activeTab) {
case 'audio':
return this.t('Audio Troubleshooting');
return this.t('debugger.audio.troubleshooting.label');
case 'screenshare':
return this.t('Media Troubleshooting');
return this.t('debugger.screenshare.troubleshooting.label');
case 'video':
return this.t('Video Troubleshooting');
return this.t('debugger.video.troubleshooting.label');
case 'system':
return this.t('System Troubleshooting');
return this.t('debugger.system.troubleshooting.label');
default:
return this.t('Troubleshooting');
return this.t('debugger.troubleshooting.label');
}
}

Expand All @@ -100,20 +100,18 @@ export class DyteDebugger {

const showSystemsTab = typeof (navigator as any).getBattery !== 'undefined';

console.log('Show systems battery:: ', showSystemsTab, (navigator as any).getBattery);

return (
<Host>
<aside class={{ hide: this.isMobileMainVisible }} part="menu">
<header>
<h3>{this.t('Troubleshooting')}</h3>
<h3>{this.t('debugger.troubleshooting')}</h3>
</header>
<button
type="button"
class={{ active: this.activeTab === 'audio' }}
onClick={() => this.changeTab('audio')}
>
{this.t('audio')}
{this.t('debugger.audio.label')}
<div class="right">
<dyte-icon icon={this.iconPack.mic_on} iconPack={this.iconPack} t={this.t} />
{this.size === 'sm' && (
Expand All @@ -126,7 +124,7 @@ export class DyteDebugger {
class={{ active: this.activeTab === 'video' }}
onClick={() => this.changeTab('video')}
>
{this.t('video')}
{this.t('debugger.video.label')}
<div class="right">
<dyte-icon icon={this.iconPack.video_on} iconPack={this.iconPack} t={this.t} />
{this.size === 'sm' && (
Expand All @@ -139,7 +137,7 @@ export class DyteDebugger {
class={{ active: this.activeTab === 'screenshare' }}
onClick={() => this.changeTab('screenshare')}
>
{this.t('Screenshare')}
{this.t('debugger.screenshare.label')}
<div class="right">
<dyte-icon
icon={this.iconPack.share_screen_start}
Expand All @@ -156,7 +154,7 @@ export class DyteDebugger {
class={{ active: this.activeTab === 'system', hidden: !showSystemsTab }}
onClick={() => this.changeTab('system')}
>
{this.t('System')}
{this.t('debugger.system.label')}
<div class="right">
<dyte-icon icon={this.iconPack.settings} iconPack={this.iconPack} t={this.t} />
{this.size === 'sm' && (
Expand Down
Loading

0 comments on commit cfe575a

Please sign in to comment.