Merge pull request OwnTube-tv#435 from mykhailodanilenko/feature/finalize-diagnostics-events

Add remaining analytics events and opt-out functionality

Author: mykhailodanilenko

OwnTube.tv/__mocks__/react-native-device-info.js

@@ -0,0 +1 @@
+export * from "react-native-device-info/jest/react-native-device-info-mock";

OwnTube.tv/api/axiosInstance.ts

@@ -3,9 +3,9 @@ import { useAuthSessionStore } from "../store";
 import { parseISOToEpoch } from "../utils";
 import { parseAuthSessionData } from "../utils/auth";
 import { OAuthClientLocal, UserLogin } from "@peertube/peertube-types";
-import { APP_IDENTIFIER } from "./constants";
 import { postHogInstance } from "../diagnostics";
 import { CustomPostHogEvents, CustomPostHogExceptions } from "../diagnostics/constants";
+import { APP_IDENTIFIER } from "./sharedConstants";
 
 export const axiosInstance = axios.create({
   withCredentials: false,

OwnTube.tv/api/constants.ts

@@ -1,5 +1,4 @@
 import { VideosCommonQuery } from "@peertube/peertube-types";
-import buildInfo from "../build-info.json";
 
 // Common query parameters for fetching videos that are classified as "local", "non-live", and "Safe-For-Work"
 export const commonQueryParams: VideosCommonQuery = {
@@ -49,5 +48,3 @@ export enum MUTATION_KEYS {
 export const WRONG_SERVER_VERSION_STATUS_CODE = 444;
 
 export const GLOBAL_QUERY_STALE_TIME = 3_600_000; // 1 hour in ms
-
-export const APP_IDENTIFIER = `${buildInfo.GITHUB_REPOSITORY}@${buildInfo.GITHUB_SHA_SHORT} (https://github.com/${buildInfo.GITHUB_ACTOR})`;

OwnTube.tv/api/sharedConstants.ts

@@ -0,0 +1,3 @@
+import buildInfo from "../build-info.json";
+
+export const APP_IDENTIFIER = `${buildInfo.GITHUB_REPOSITORY}@${buildInfo.GITHUB_SHA_SHORT} (https://github.com/${buildInfo.GITHUB_ACTOR})`;

OwnTube.tv/components/ComboBoxInput/ComboBoxInput.tsx

@@ -15,6 +15,7 @@ const ComboBoxInput = ({
   width,
   allowCustomOptions,
   getCustomOptionText,
+  onChangeText,
 }: ComboBoxInputProps) => {
   const { colors } = useTheme();
   const modalControls = useFullScreenModalContext();
@@ -49,6 +50,7 @@ const ComboBoxInput = ({
           modalControls.toggleModal(true);
           modalControls.setContent(modalContent);
         }}
+        onChangeText={onChangeText}
         editable={false}
         placeholder={placeholder}
         placeholderTextColor={colors.text}

OwnTube.tv/components/ComboBoxInput/ComboBoxInput.web.tsx

@@ -15,6 +15,7 @@ const ComboBoxInput = ({
   width,
   allowCustomOptions,
   getCustomOptionText,
+  onChangeText,
 }: ComboBoxInputProps) => {
   const { colors } = useTheme();
   const listRef = useRef<FlatList | null>(null);
@@ -26,6 +27,11 @@ const ComboBoxInput = ({
     [value, onSelect],
   );
 
+  const handleTextChange = (text: string) => {
+    setInputValue(text);
+    onChangeText?.(text);
+  };
+
   return (
     <View
       testID={testID}
@@ -47,7 +53,7 @@ const ComboBoxInput = ({
           }, 300);
         }}
         value={inputValue}
-        onChangeText={setInputValue}
+        onChangeText={handleTextChange}
         onSubmitEditing={(event) => {
           if (allowCustomOptions && event.nativeEvent.text && getCustomOptionText) {
             onSelect({ label: getCustomOptionText(event.nativeEvent.text), value: event.nativeEvent.text })();

OwnTube.tv/components/ComboBoxInput/models.ts

@@ -12,4 +12,5 @@ export interface ComboBoxInputProps {
   width?: number;
   allowCustomOptions?: boolean;
   getCustomOptionText?: (input: string) => string;
+  onChangeText?: (text: string) => void;
 }

OwnTube.tv/components/VideoControlsOverlay/components/modals/Settings.tsx

@@ -18,6 +18,8 @@ import DeviceCapabilities from "../../../DeviceCapabilities";
 import Picker from "../../../shared/Picker";
 import { useGetInstanceInfoQuery } from "../../../../api";
 import { usePostHog } from "posthog-react-native/lib/posthog-react-native/src/hooks/usePostHog";
+import { useState } from "react";
+import { PostHogPersistedProperty } from "posthog-react-native/lib/posthog-core/src/types";
 
 interface SettingsProps {
   onClose: () => void;
@@ -33,6 +35,9 @@ export const Settings = ({ onClose }: SettingsProps) => {
 
   const { data: instanceInfo } = useGetInstanceInfoQuery(backend);
   const { currentInstanceConfig } = useAppConfigContext();
+  const [isOptedOut, setIsOptedOut] = useState(
+    posthog.getPersistedProperty(PostHogPersistedProperty.OptedOut) || false,
+  );
 
   const handleLeaveInstance = () => {
     writeToAsyncStorage(STORAGE.DATASOURCE, "").then(() => {
@@ -48,12 +53,16 @@ export const Settings = ({ onClose }: SettingsProps) => {
   const handleToggleDebugMode = (debugModeOn: boolean) => {
     setIsDebugMode(debugModeOn);
     writeToAsyncStorage(STORAGE.DEBUG_MODE, String(debugModeOn));
+  };
 
-    if (debugModeOn) {
+  const handleToggleOptOutCheckbox = (optOut: boolean) => {
+    if (!optOut) {
       posthog.optIn();
     } else {
       posthog.optOut();
     }
+
+    setIsOptedOut(optOut);
   };
 
   return (
@@ -78,7 +87,14 @@ export const Settings = ({ onClose }: SettingsProps) => {
             items={LANGUAGE_OPTIONS}
           />
           <Spacer height={spacing.xl} />
-          <Checkbox checked={isDebugMode} onChange={handleToggleDebugMode} label={t("debugLogging")} />
+          <Checkbox
+            disabled={isOptedOut}
+            checked={isDebugMode && !isOptedOut}
+            onChange={handleToggleDebugMode}
+            label={t("debugLogging")}
+          />
+          <Spacer height={spacing.md} />
+          <Checkbox checked={isOptedOut} onChange={handleToggleOptOutCheckbox} label={t("optOutOfDiagnostics")} />
           <Spacer height={spacing.xl} />
           {!primaryBackend && (
             <>

OwnTube.tv/components/VideoView/VideoView.tsx

@@ -378,6 +378,11 @@ const VideoView = ({
     });
   };
 
+  const handleSetSpeed = (speed: number) => {
+    setPlaybackSpeed(speed);
+    captureDiagnosticsEvent(CustomPostHogEvents.PlaybackSpeedChanged, { playbackSpeed: speed });
+  };
+
   const allowQualityControls = Platform.OS !== "ios" || !videoData?.streamingPlaylists?.length;
 
   return (
@@ -410,7 +415,7 @@ const VideoView = ({
         handleShare={handleShare}
         handleOpenSettings={handleOpenSettings}
         handleHideOverlay={hideOverlay}
-        handleSetSpeed={setPlaybackSpeed}
+        handleSetSpeed={handleSetSpeed}
         speed={playbackSpeed}
         selectedQuality={selectedQuality}
         handleSetQuality={allowQualityControls ? handleSetQuality : undefined}

OwnTube.tv/components/VideoView/VideoView.web.tsx

@@ -543,6 +543,7 @@ const VideoView = ({
   };
 
   const handleSetSpeed = (speed: number) => {
+    captureDiagnosticsEvent(CustomPostHogEvents.PlaybackSpeedChanged, { playbackSpeed: speed });
     playerRef.current?.playbackRate(speed);
   };
   const [isCCShown, setIsCCShown] = useState(false);