feat: Media preview serving path from the preview server setting. (#231)

Since the preview server configuration has been implemented, allow the media field to look up the preview serving url from the preview server.

fixes #228

src/sass/ui/_list.sass

@@ -185,10 +185,6 @@
     margin: 0 $le-space-medium 0 0
 
 .le__list__item__icon
-  // Use the tertiary color when not special.
-  :not(.le__list__item--heading):not(.le__list__item--selected):not(.le__list__item--primary):not(.le__list__item--secondary) > &
-    color: var(--color-tertiary-dark)
-
   align-items: center
   display: flex
   justify-content: center

src/ts/editor/field/media.ts

@@ -14,12 +14,18 @@ import {
   classMap,
   html,
 } from '@blinkk/selective-edit';
+import {
+  EditorPreviewSettings,
+  MediaFileData,
+  PreviewRoutesLocaleData,
+  WorkspaceData,
+} from '../api';
 
 import {EVENT_RENDER_COMPLETE} from '../events';
 import {LiveEditorGlobalConfig} from '../editor';
-import {MediaFileData} from '../api';
 import {Template} from '@blinkk/selective-edit/dist/selective/template';
 import {findPreviewValue} from '@blinkk/selective-edit/dist/utility/preview';
+import {interpolatePreviewUrl} from '../preview';
 import merge from 'lodash.merge';
 import {reduceFraction} from '../../utility/math';
 import {templateLoading} from '../template';
@@ -371,7 +377,29 @@ export class MediaField
       }
     }
 
-    // TODO: Use api to get the preview url for the file path.
+    // Check the preview config to see if it knows the preview url.
+    const previewConfig =
+      this.globalConfig.state.previewConfigOrGetPreviewConfig();
+
+    if (previewConfig?.routes[value.path]) {
+      let path = '';
+      if (previewConfig.routes[value.path].path) {
+        path = previewConfig.routes[value.path].path as string;
+      } else {
+        path = (previewConfig.routes[value.path] as PreviewRoutesLocaleData)[
+          previewConfig.defaultLocale
+        ].path as string;
+      }
+
+      const previewUrl = interpolatePreviewUrl(
+        this.globalConfig.state.project?.preview as EditorPreviewSettings,
+        this.globalConfig.state.workspace as WorkspaceData,
+        undefined,
+        path
+      );
+
+      return previewUrl;
+    }
 
     return undefined;
   }

src/ts/editor/preview.ts

@@ -9,16 +9,19 @@ import {shortenWorkspaceName} from './workspace';
  * @param workspace Workspace to generate the url for.
  * @returns Interpolated url for the base preview server.
  */
-export function interpolatePreviewBaseUrl(
+export function interpolatePreviewUrl(
   settings: EditorPreviewSettings,
   workspace: WorkspaceData,
-  params?: Record<string, string>
+  params?: Record<string, string>,
+  path = '/'
 ) {
   params = params ?? {
     workspace: shortenWorkspaceName(workspace.name),
     workspaceFull: workspace.name,
   };
-  return interpolate(params, settings.baseUrl);
+  const baseUrl = interpolate(params, settings.baseUrl);
+  path = path.replace(/^\/*/, '');
+  return `${baseUrl}${baseUrl.endsWith('/') ? '' : '/'}${path}`;
 }
 
 /**
@@ -40,7 +43,7 @@ export function interpolatePreviewConfigUrl(
     baseUrl: '',
   };
 
-  params.baseUrl = interpolatePreviewBaseUrl(settings, workspace, params);
+  params.baseUrl = interpolatePreviewUrl(settings, workspace, params);
   params.baseUrl = `${params.baseUrl}${
     params.baseUrl.endsWith('/') ? '' : '/'
   }`;

src/ts/editor/state.ts

@@ -39,7 +39,7 @@ import {FeatureManager} from '../utility/featureManager';
 import {GrowState} from '../projectType/grow/growState';
 import {ListenersMixin} from '../mixin/listeners';
 import {ProjectTypeComponent} from '../projectType/projectType';
-import {interpolatePreviewBaseUrl} from './preview';
+import {interpolatePreviewUrl} from './preview';
 
 const REGEX_START_SLASH = /^\//i;
 export const STORAGE_SCHEME = 'live.scheme';
@@ -401,7 +401,7 @@ export class EditorState extends ListenersMixin(Base) {
           this.file?.file.path &&
           this.file?.file.path in previewSettings.routes
         ) {
-          const baseUrl = interpolatePreviewBaseUrl(
+          const baseUrl = interpolatePreviewUrl(
             this.project?.preview as EditorPreviewSettings,
             this.workspace as WorkspaceData
           );

src/ts/editor/ui/parts/preview.ts

@@ -1,13 +1,13 @@
 import {BasePart, LazyUiParts, UiPartComponent, UiPartConfig} from '.';
+import {DeviceData, EditorPreviewSettings, WorkspaceData} from '../../api';
 import {EditorState, StatePromiseKeys} from '../../state';
 import {PreviewFramePart, PreviewFramePartConfig} from './preview/frame';
 import {PreviewToolbarPart, PreviewToolbarPartConfig} from './preview/toolbar';
 import {TemplateResult, classMap, html} from '@blinkk/selective-edit';
 
 import {DataStorage} from '../../../utility/dataStorage';
-import {DeviceData, EditorPreviewSettings, WorkspaceData} from '../../api';
+import {interpolatePreviewUrl} from '../../preview';
 import {templateLoading} from '../../template';
-import {interpolatePreviewBaseUrl} from '../../preview';
 
 export interface PreviewPartConfig extends UiPartConfig {
   /**
@@ -62,7 +62,7 @@ export class PreviewPart extends BasePart implements UiPartComponent {
       clearInterval(this.loginTimer);
     }
 
-    const baseUrl = interpolatePreviewBaseUrl(
+    const baseUrl = interpolatePreviewUrl(
       this.config.state.project?.preview as EditorPreviewSettings,
       this.config.state.workspace as WorkspaceData
     );

src/ts/example/exampleApi.ts

@@ -455,6 +455,12 @@ const fullFiles: Record<string, EditorFileData> = {
     url: 'preview.html',
   },
   '/example/media.yaml': {
+    data: {
+      media: {
+        path: '/static/img/landscape.png',
+        label: 'Landscape image',
+      },
+    },
     editor: {
       fields: [
         // Media example.